Merge pull request #347 from kiwicom/scaffold-fixes

Scaffold fixes

catalog/src/main/java/kiwi/orbit/compose/catalog/screens/MainScreen.kt

@@ -126,7 +126,7 @@ internal fun MainScreen(
     ) { contentPadding ->
         LazyVerticalGrid(
             columns = GridCells.Adaptive(160.dp),
-            contentPadding = contentPadding + PaddingValues(horizontal = 16.dp, vertical = 8.dp),
+            contentPadding = contentPadding + PaddingValues(16.dp),
             verticalArrangement = Arrangement.spacedBy(8.dp),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {

catalog/src/main/java/kiwi/orbit/compose/catalog/screens/TextFieldScreen.kt

@@ -52,7 +52,7 @@ internal fun TextFieldScreen(onNavigateUp: () -> Unit) {
             )
         },
         action = {
-            ButtonPrimary(onClick = {}, Modifier.fillMaxWidth()) {
+            ButtonPrimary(onClick = {}) {
                 Text("Primary Action")
             }
         },

ui/src/main/java/kiwi/orbit/compose/ui/controls/Scaffold.kt

@@ -1,6 +1,7 @@
 package kiwi.orbit.compose.ui.controls
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
@@ -9,18 +10,19 @@ import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.ime
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.union
-import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.AlignmentLine
+import androidx.compose.ui.layout.HorizontalAlignmentLine
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.SubcomposeLayout
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.offset
 import kiwi.orbit.compose.ui.OrbitTheme
@@ -36,7 +38,7 @@ public fun Scaffold(
     action: @Composable () -> Unit = {},
     backgroundColor: Color = OrbitTheme.colors.surface.main,
     contentColor: Color = contentColorFor(backgroundColor),
-    actionLayout: @Composable () -> Unit = { ScaffoldAction(backgroundColor, action) },
+    actionLayout: @Composable () -> Unit = { ScaffoldAction(backgroundColor, content = action) },
     toastHostState: ToastHostState = remember { ToastHostState() },
     toastHost: @Composable (ToastHostState) -> Unit = { ToastHost(it) },
     contentWindowInsets: WindowInsets = WindowInsets.systemBars,
@@ -75,26 +77,29 @@ private fun ScaffoldLayout(
         val toastPlaceables = subcompose(SlotToast, toast).map { it.measure(looseConstraints) }
 
         val actionHeight = actionPlaceables.maxOfOrNull { it.height } ?: 0
+        val actionFadeHeight = actionPlaceables.firstOrNull()?.get(ActionFadeLine)?.let { value ->
+            if (value == AlignmentLine.Unspecified) 0 else value
+        } ?: 0
         val contentTop = topBarPlaceables.maxOfOrNull { it.height } ?: 0
-        val contentBottom = (actionHeight - ActionGradientHeight.roundToPx()).coerceAtLeast(0)
+        val contentBottom = (actionHeight - actionFadeHeight).coerceAtLeast(0)
         val contentConstraints = looseConstraints.copy(
             maxHeight = layoutHeight - contentTop - contentBottom,
         )
 
-        val insets = contentWindowInsets.asPaddingValues(this)
+        val contentInsets = contentWindowInsets.asPaddingValues(this)
         val innerPadding = PaddingValues(
             top = if (topBarPlaceables.isEmpty()) {
-                insets.calculateTopPadding()
+                contentInsets.calculateTopPadding()
             } else {
                 0.dp
             },
-            bottom = if (actionPlaceables.isEmpty()) {
-                insets.calculateBottomPadding()
+            bottom = if (actionHeight > 0) {
+                actionFadeHeight.toDp()
             } else {
-                ActionGradientHeight
+                contentInsets.calculateBottomPadding()
             },
-            start = insets.calculateStartPadding(layoutDirection),
-            end = insets.calculateEndPadding(layoutDirection),
+            start = contentInsets.calculateStartPadding(layoutDirection),
+            end = contentInsets.calculateEndPadding(layoutDirection),
         )
         val contentPlaceables = subcompose(SlotContent) {
             content(innerPadding)
@@ -114,38 +119,49 @@ private fun ScaffoldLayout(
  * Adds additional padding and background to this action.
  */
 @Composable
-private fun ScaffoldAction(
-    backgroundColor: Color,
+public fun ScaffoldAction(
+    backgroundColor: Color = OrbitTheme.colors.surface.main,
+    contentWindowInsets: WindowInsets = WindowInsets.systemBars.union(WindowInsets.ime),
+    fadeHeight: Dp = DefaultActionFadeHeight,
     content: @Composable () -> Unit,
 ) {
     val density = LocalDensity.current
     val brush = remember(density, backgroundColor) {
         Brush.verticalGradient(
             colors = listOf(Color.Transparent, backgroundColor),
-            endY = with(density) { ActionGradientHeight.toPx() },
+            endY = with(density) { fadeHeight.toPx() },
         )
     }
+    val inset = contentWindowInsets.asPaddingValues()
     Layout(
-        content = content,
-        modifier = Modifier
-            .background(brush)
-            .windowInsetsPadding(WindowInsets.ime.union(WindowInsets.navigationBars)),
+        content = {
+            Box(Modifier.fillMaxWidth(), propagateMinConstraints = true) {
+                content()
+            }
+        },
+        modifier = Modifier.background(brush),
     ) { measurables, constraints ->
-        val action = measurables.firstOrNull()
-            ?: return@Layout layout(0, 0) {}
-
-        val top = ActionGradientHeight.roundToPx()
         val padding = 16.dp.roundToPx()
-        val placeable = action.measure(constraints.offset(horizontal = -2 * padding))
+        val action = measurables.first().measure(
+            constraints.offset(horizontal = padding * -2),
+        )
+
+        if (action.height == 0) {
+            return@Layout layout(0, 0) {}
+        }
+
+        val top = fadeHeight.roundToPx()
         val width = constraints.maxWidth
-        val height = top + placeable.height + padding
+        val height = top + action.height + padding + inset.calculateBottomPadding().roundToPx()
 
-        layout(width, height) {
-            placeable.place(x = (width - placeable.width) / 2, y = top)
+        layout(width, height, alignmentLines = mapOf(ActionFadeLine to top)) {
+            action.place(x = (width - action.width) / 2, y = top)
         }
     }
 }
 
+private val ActionFadeLine = HorizontalAlignmentLine(::minOf)
+
 private val SlotTopAppBar = 0
 private val SlotAction = 1
 private val SlotToast = 2
@@ -157,15 +173,15 @@ private val SlotContent = 3
  * this semi-transparent area.
  * https://issuetracker.google.com/issues/221252680
  */
-private val ActionGradientHeight = 8.dp
+public val DefaultActionFadeHeight: Dp = 8.dp
 
 @OrbitPreviews
 @Composable
 internal fun ScaffoldPreview() {
     Preview {
         Scaffold(
             action = {
-                ButtonPrimary(onClick = {}, Modifier.fillMaxWidth()) { Text("Test") }
+                ButtonPrimary(onClick = {}) { Text("Test") }
             },
         ) {
             CustomPlaceholder(Modifier.fillMaxSize())