Merge pull request #464 from kiwicom/tile-intrinsic

Avoid Intrinsic measuring in Tile as it has problems with Image

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

@@ -1,10 +1,15 @@
 package kiwi.orbit.compose.catalog.screens
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
@@ -15,6 +20,7 @@ import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.catalog.AppTheme
 import kiwi.orbit.compose.catalog.components.CustomPlaceholder
 import kiwi.orbit.compose.icons.Icons
+import kiwi.orbit.compose.illustrations.Illustrations
 import kiwi.orbit.compose.ui.OrbitTheme
 import kiwi.orbit.compose.ui.controls.Icon
 import kiwi.orbit.compose.ui.controls.Scaffold
@@ -84,6 +90,20 @@ private fun TileScreenInner() {
                 )
             },
         )
+        Tile(
+            onClick = {},
+            title = {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Image(
+                        Illustrations.CabinBaggage,
+                        contentDescription = null,
+                        modifier = Modifier.height(88.dp),
+                    )
+                    Spacer(Modifier.width(8.dp))
+                    Text("Title")
+                }
+            },
+        )
         Tile(
             onClick = {},
         ) {

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

@@ -4,19 +4,17 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.LayoutScopeMarker
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.icons.Icons
@@ -128,24 +126,40 @@ public fun TileGroupScope.Tile(
         modifier = modifier,
         interactionSource = interactionSource,
     ) {
-        Row(
-            modifier = Modifier
-                .height(IntrinsicSize.Max)
-                .padding(16.dp),
-            horizontalArrangement = Arrangement.spacedBy(12.dp),
-        ) {
-            Box(Modifier.weight(1f)) {
-                content()
-            }
-            Row(
-                modifier = Modifier.fillMaxHeight(),
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                ProvideMergedTextStyle(OrbitTheme.typography.bodyNormal) {
-                    ProvideContentEmphasis(ContentEmphasis.Minor) {
-                        trailingContent()
+        Layout(
+            modifier = Modifier.padding(16.dp),
+            content = {
+                Box {
+                    content()
+                }
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    ProvideMergedTextStyle(OrbitTheme.typography.bodyNormal) {
+                        ProvideContentEmphasis(ContentEmphasis.Minor) {
+                            trailingContent()
+                        }
                     }
                 }
+            },
+        ) { measurables, constraints ->
+            val trailingWidth = measurables[1].maxIntrinsicWidth(Int.MAX_VALUE)
+            val occupied = trailingWidth.takeIf { it != 0 }?.plus(12.dp.roundToPx()) ?: 0
+            val contentPlaceable = measurables[0].measure(
+                Constraints.fixedWidth(width = constraints.maxWidth - occupied),
+            )
+            val trailingPlaceable = measurables[1].measure(
+                Constraints.fixed(
+                    width = trailingWidth,
+                    height = contentPlaceable.height,
+                ),
+            )
+            layout(constraints.maxWidth, contentPlaceable.height) {
+                contentPlaceable.placeRelative(0, 0)
+                trailingPlaceable.placeRelative(
+                    x = constraints.maxWidth - trailingPlaceable.width,
+                    y = 0,
+                )
             }
         }
     }