Remove padding in sheet demos because it is blocking clicks outside

composablehorizons · Feb 23, 2025 · 3fe1eb0 · 3fe1eb0
1 parent 1024c4d
commit 3fe1eb0
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 73 deletions.
diff --git a/demo-modalsheet/src/commonMain/kotlin/ModalBottomSheetDemo.kt b/demo-modalsheet/src/commonMain/kotlin/ModalBottomSheetDemo.kt
@@ -55,27 +55,30 @@ fun ModalBottomSheetDemo() {
         ModalBottomSheet(state = modalSheetState) {
             Scrim(scrimColor = Color.Black.copy(0.3f), enter = fadeIn(), exit = fadeOut())
 
-            Sheet(
-                modifier = Modifier
+            Box(
+                Modifier.fillMaxSize()
                     .padding(top = 12.dp)
                     .let { if (isCompact) it else it.padding(horizontal = 56.dp) }
                     .displayCutoutPadding()
                     .statusBarsPadding()
-                    .padding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal).asPaddingValues())
-                    .shadow(4.dp, RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
-                    .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
-                    .background(Color.White)
-                    .widthIn(max = 640.dp)
-                    .fillMaxWidth()
-                    .imePadding(),
-            ) {
-                Box(Modifier.fillMaxWidth().height(600.dp), contentAlignment = Alignment.TopCenter) {
-                    DragIndication(
-                        modifier = Modifier.padding(top = 22.dp)
-                            .background(Color.Black.copy(0.4f), RoundedCornerShape(100))
-                            .width(32.dp)
-                            .height(4.dp)
-                    )
+                    .padding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal).asPaddingValues())) {
+                Sheet(
+                    modifier = Modifier
+                        .shadow(4.dp, RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
+                        .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
+                        .background(Color.White)
+                        .widthIn(max = 640.dp)
+                        .fillMaxWidth()
+                        .imePadding(),
+                ) {
+                    Box(Modifier.fillMaxWidth().height(600.dp), contentAlignment = Alignment.TopCenter) {
+                        DragIndication(
+                            modifier = Modifier.padding(top = 22.dp)
+                                .background(Color.Black.copy(0.4f), RoundedCornerShape(100))
+                                .width(32.dp)
+                                .height(4.dp)
+                        )
+                    }
                 }
             }
         }

diff --git a/demo-sheet/src/commonMain/kotlin/BottomSheetDemo.kt b/demo-sheet/src/commonMain/kotlin/BottomSheetDemo.kt
@@ -43,13 +43,14 @@ private val Peek = SheetDetent("peek") { containerHeight, sheetHeight ->
 
 @Composable
 fun BottomSheetDemo() {
-    BoxWithConstraints(
+    Box(
         modifier = Modifier
             .fillMaxSize()
-            .background(Brush.linearGradient(listOf(Color(0xFF800080), Color(0xFFDA70D6)))),
+            .background(Brush.linearGradient(listOf(Color(0xFF800080), Color(0xFFDA70D6))))
+            .padding(top = 12.dp)
+            .statusBarsPadding()
+            .padding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal).asPaddingValues()),
     ) {
-        val isCompact = maxWidth < 600.dp
-
         val sheetState = rememberBottomSheetState(
             initialDetent = Peek,
             detents = listOf(Hidden, Peek, FullyExpanded)
@@ -70,10 +71,6 @@ fun BottomSheetDemo() {
         BottomSheet(
             state = sheetState,
             modifier = Modifier
-                .padding(top = 12.dp)
-                .let { if (isCompact) it else it.padding(horizontal = 56.dp) }
-                .statusBarsPadding()
-                .padding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal).asPaddingValues())
                 .shadow(4.dp, RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
                 .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
                 .background(Color.White)

diff --git a/docs/bottom-sheet.md b/docs/bottom-sheet.md
@@ -79,7 +79,6 @@ val sheetState = rememberBottomSheetState(
 BottomSheet(
     state = sheetState,
     modifier = Modifier
-        .padding(top = 12.dp)
         .shadow(4.dp, RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
         .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
         .background(Color.White)

diff --git a/docs/modal-bottom-sheet.md b/docs/modal-bottom-sheet.md
@@ -85,7 +85,6 @@ val sheetState = rememberModalBottomSheetState(
 ModalBottomSheet(state = sheetState) {
     Sheet(
         modifier = Modifier
-            .padding(top = 12.dp)
             .shadow(4.dp, RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
             .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
             .background(Color.White)
@@ -231,20 +230,21 @@ val sheetState = rememberModalBottomSheetState(
 )
 
 ModalBottomSheet(state = sheetState) {
-    Sheet(
-        modifier = Modifier.fillMaxWidth()
-            .padding(
-                WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal)
-                    .asPaddingValues()
-            )
-            .navigationBarsPadding(),
-    ) {
-        Column(
-            modifier = Modifier.fillMaxWidth(),
-            horizontalAlignment = Alignment.CenterHorizontally,
+    Box(Modifier.padding(
+        // make sure the sheet is not behind nav bars on landscape
+        WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal)
+            .asPaddingValues()
+    )) {
+        Sheet(
+            modifier = Modifier.fillMaxWidth().navigationBarsPadding(),
         ) {
-            DragIndication()
-            BasicText("Here is some content")
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                DragIndication()
+                BasicText("Here is some content")
+            }
         }
     }
 }
@@ -262,45 +262,46 @@ val sheetState = rememberModalBottomSheetState(
     initialDetent = FullyExpanded,
 )
 ModalBottomSheet(state = sheetState) {
-    Sheet(
-        modifier = Modifier.fillMaxWidth()
-            .padding(
-                // make sure the sheet is not behind nav bars on landscape
-                WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal)
-                    .asPaddingValues()
-            )
-            .background(Color.White),
-    ) {
-        Column(
+   Box(Modifier.padding(
+       // make sure the sheet is not behind nav bars on landscape
+       WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal)
+           .asPaddingValues()
+   )) {
+        Sheet(
             modifier = Modifier.fillMaxWidth()
-                .padding(16.dp)
-                // make sure the contents of the sheet is always above the nav bar
-                .navigationBarsPadding()
-                // draw the contents above the soft keyboard
-                .imePadding()
+                .background(Color.White),
         ) {
-            DragIndication(Modifier.align(Alignment.CenterHorizontally))
-
-            var text by remember { mutableStateOf("") }
-            BasicTextField(
-                value = text,
-                onValueChange = { text = it },
+            Column(
                 modifier = Modifier.fillMaxWidth()
-            )
-            Box(Modifier
-                .clip(RoundedCornerShape(4.dp))
-                .background(Color.Blue)
-                .clickable { /* TODO */ }
-                .padding(4.dp)
-                .align(Alignment.End)) {
-                BasicText(
-                    text = "Save note",
-                    style = TextStyle.Default.copy(color = Color.White)
+                    .padding(16.dp)
+                    // make sure the contents of the sheet is always above the nav bar
+                    .navigationBarsPadding()
+                    // draw the contents above the soft keyboard
+                    .imePadding()
+            ) {
+                DragIndication(Modifier.align(Alignment.CenterHorizontally))
+
+                var text by remember { mutableStateOf("") }
+                BasicTextField(
+                    value = text,
+                    onValueChange = { text = it },
+                    modifier = Modifier.fillMaxWidth()
                 )
+                Box(
+                    Modifier
+                    .clip(RoundedCornerShape(4.dp))
+                    .background(Color.Blue)
+                    .clickable { /* TODO */ }
+                    .padding(4.dp)
+                    .align(Alignment.End)) {
+                    BasicText(
+                        text = "Save note",
+                        style = TextStyle.Default.copy(color = Color.White)
+                    )
+                }
             }
         }
-    }
-}
+    }}
 ```
 
 ### Scrollable sheets