Merge pull request #522 from kiwicom/text-field-label-alignment-line

introduce LabelLastBaseLine for field vertical aligment

Author: hrach

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

@@ -42,6 +42,7 @@ import kiwi.orbit.compose.ui.controls.Scaffold
 import kiwi.orbit.compose.ui.controls.Text
 import kiwi.orbit.compose.ui.controls.TextField
 import kiwi.orbit.compose.ui.controls.TopAppBar
+import kiwi.orbit.compose.ui.controls.field.LabelLastBaseLine
 
 @Composable
 internal fun TextFieldScreen(onNavigateUp: () -> Unit) {
@@ -226,10 +227,25 @@ private fun TextFieldScreenInner() {
 
         Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
             var v1 by rememberSaveable { mutableStateOf("") }
-            TextField(v1, { v1 = it }, label = { Text("A") }, modifier = Modifier.weight(1f))
+            TextField(
+                value = v1,
+                onValueChange = { v1 = it },
+                label = { Text("Very long label with many many words") },
+                modifier = Modifier
+                    .weight(1f)
+                    .alignBy(LabelLastBaseLine),
+            )
 
             var v2 by rememberSaveable { mutableStateOf("") }
-            TextField(v2, { v2 = it }, label = { Text("B") }, modifier = Modifier.weight(1f))
+            TextField(
+                value = v2,
+                onValueChange = { v2 = it },
+                label = { Text("B") },
+                error = { Text("Error") },
+                modifier = Modifier
+                    .weight(1f)
+                    .alignBy(LabelLastBaseLine),
+            )
         }
 
         Spacer(Modifier.height(8.dp))

docs/03-components/05-input/inputfield.mdx

@@ -76,6 +76,20 @@ fun Example() {
 }
 ```
 
+Utilize `LabelLastBaseLine` alignment line to vertically align multiple text fields.
+
+```kotlin
+@Composable
+import kiwi.orbit.compose.ui.controls.field.LabelLastBaseLine
+
+fun Example() {
+    Row {
+        TextField(Modifier.alignBy(LabelLastBaseLine), ...)
+        TextField(Modifier.alignBy(LabelLastBaseLine), ...)
+    }
+}
+```
+
 ## UI testing
 
 Slotting API allows you to add testTag to particular component parts.

ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/TextField.kt

@@ -31,12 +31,19 @@ import kiwi.orbit.compose.ui.R
 import kiwi.orbit.compose.ui.controls.field.FieldContent
 import kiwi.orbit.compose.ui.controls.field.FieldLabel
 import kiwi.orbit.compose.ui.controls.field.FieldMessage
+import kiwi.orbit.compose.ui.controls.field.LabelLastBaseLine
 import kiwi.orbit.compose.ui.controls.internal.ColumnWithMinConstraints
 import kiwi.orbit.compose.ui.controls.internal.OrbitPreviews
 import kiwi.orbit.compose.ui.controls.internal.Preview
 import kiwi.orbit.compose.ui.foundation.LocalTextStyle
 import kiwi.orbit.compose.ui.foundation.ProvideMergedTextStyle
 
+/**
+ * TextFiled control allowing a text single-line or multi-line input.
+ *
+ * To align multiple text fields vertically next to each other, utilize
+ * [LabelLastBaseLine] alignment line.
+ */
 @Composable
 public fun TextField(
     value: String,

ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/field/FieldLabel.kt

@@ -4,16 +4,42 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.HorizontalAlignmentLine
+import androidx.compose.ui.layout.LastBaseline
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.ui.OrbitTheme
 import kiwi.orbit.compose.ui.foundation.ProvideMergedTextStyle
+import kotlin.math.max
+
+/**
+ * Alignment line holding a value of label's last baseline.
+ *
+ * With this line, you have vertically align multiple text fields
+ * to have their "input boxes" aligned.
+ */
+public val LabelLastBaseLine: HorizontalAlignmentLine =
+    HorizontalAlignmentLine(::max)
 
 @Composable
 internal fun FieldLabel(
     content: @Composable () -> Unit,
 ) {
     ProvideMergedTextStyle(OrbitTheme.typography.bodyNormalMedium) {
-        Box(Modifier.padding(bottom = 4.dp)) {
+        Box(
+            Modifier
+                .padding(bottom = 4.dp)
+                .layout { measurable, constraints ->
+                    val placeable = measurable.measure(constraints)
+                    layout(
+                        placeable.width,
+                        placeable.height,
+                        mapOf(LabelLastBaseLine to placeable[LastBaseline]),
+                    ) {
+                        placeable.place(0, 0)
+                    }
+                },
+        ) {
             content()
         }
     }