Merge pull request #116 from kiwicom/inputs-bg

Fix active `TextField()` background, multiline icon alignment and precedence for focus outline
kiwicom · Mar 16, 2022 · 8fe1af7 · 8fe1af7
2 parents c081340 + 5a843f6
commit 8fe1af7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/TextField.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/TextField.kt
@@ -129,17 +129,8 @@ public fun TextField(
             ) {
                 when (it) {
                     InputState.Normal -> Color.Transparent
-                    InputState.Focused -> OrbitTheme.colors.interactive.main
-                    InputState.NormalError, InputState.FocusedError -> OrbitTheme.colors.critical.main
-                }
-            }
-            val backgroundColor = transition.animateColor(
-                transitionSpec = { tween(durationMillis = AnimationDuration) },
-                label = "backgroundColor"
-            ) {
-                when (it) {
-                    InputState.Focused, InputState.FocusedError -> OrbitTheme.colors.surface.main
-                    else -> OrbitTheme.colors.surface.subtle
+                    InputState.Focused, InputState.FocusedError -> OrbitTheme.colors.interactive.main
+                    InputState.NormalError -> OrbitTheme.colors.critical.main
                 }
             }
 
@@ -154,7 +145,7 @@ public fun TextField(
                 modifier = Modifier
                     .then(autoBringIntoViewFocusModifier)
                     .border(1.dp, borderColor.value, OrbitTheme.shapes.normal)
-                    .background(backgroundColor.value, OrbitTheme.shapes.normal),
+                    .background(OrbitTheme.colors.surface.subtle, OrbitTheme.shapes.normal),
                 enabled = enabled,
                 readOnly = readOnly,
                 textStyle = mergedTextStyle,

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/field/FieldContent.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/field/FieldContent.kt
@@ -42,10 +42,20 @@ internal fun FieldContent(
     Layout(
         content = {
             if (leadingIcon != null) {
-                FieldIcon(LeadingId, onLeadingIconClick, leadingIcon, Modifier.padding(start = FieldIconPadding))
+                FieldIcon(
+                    LeadingId,
+                    onLeadingIconClick,
+                    leadingIcon,
+                    Modifier.padding(start = FieldIconPadding)
+                )
             }
             if (trailingIcon != null) {
-                FieldIcon(TrailingId, onTrailingIconClick, trailingIcon, Modifier.padding(end = FieldIconPadding))
+                FieldIcon(
+                    TrailingId,
+                    onTrailingIconClick,
+                    trailingIcon,
+                    Modifier.padding(end = FieldIconPadding)
+                )
             }
 
             val padding = Modifier.padding(
@@ -54,14 +64,20 @@ internal fun FieldContent(
             )
 
             if (placeholder != null) {
-                Box(Modifier.layoutId(PlaceholderId).then(padding)) {
+                Box(
+                    Modifier
+                        .layoutId(PlaceholderId)
+                        .then(padding)
+                ) {
                     ProvideMergedTextStyle(OrbitTheme.typography.bodyNormal) {
                         ProvideContentEmphasis(ContentEmphasis.Subtle, content = placeholder)
                     }
                 }
             }
             Box(
-                Modifier.layoutId(FieldId).then(padding),
+                Modifier
+                    .layoutId(FieldId)
+                    .then(padding),
                 propagateMinConstraints = true,
             ) {
                 fieldContent()
@@ -98,9 +114,9 @@ private class FieldContentMeasurePolicy(
             )
         val fieldPlaceable = measurables.first { it.layoutId == FieldId }.measure(fieldConstraints)
 
-        // Placeholder
         val placeholderConstraints = fieldConstraints.copy(minWidth = 0)
-        val placeholderPlaceable = measurables.find { it.layoutId == PlaceholderId }?.measure(placeholderConstraints)
+        val placeholderPlaceable = measurables.find { it.layoutId == PlaceholderId }
+            ?.measure(placeholderConstraints)
 
         val width = calculateWidth(
             fieldWidth = fieldPlaceable.width,
@@ -119,23 +135,31 @@ private class FieldContentMeasurePolicy(
         )
 
         return layout(width, height) {
-            val verticalPaddingPadding = (FieldPadding.value * density).roundToInt()
+            val verticalPaddingPx = FieldPadding.roundToPx()
 
             leadingPlaceable?.placeRelative(
                 x = 0,
-                y = Alignment.CenterVertically.align(leadingPlaceable.height, height)
+                y = if (singleLine) {
+                    Alignment.CenterVertically.align(leadingPlaceable.height, height)
+                } else {
+                    verticalPaddingPx
+                },
             )
             trailingPlaceable?.placeRelative(
                 x = width - trailingPlaceable.width,
-                y = Alignment.CenterVertically.align(trailingPlaceable.height, height)
+                y = if (singleLine) {
+                    Alignment.CenterVertically.align(trailingPlaceable.height, height)
+                } else {
+                    verticalPaddingPx
+                },
             )
 
             // Single line text field without label places its input center vertically. Multiline text
             // field without label places its input at the top with padding
             val fieldVerticalPosition = if (singleLine) {
                 Alignment.CenterVertically.align(fieldPlaceable.height, height)
             } else {
-                verticalPaddingPadding
+                verticalPaddingPx
             }
             fieldPlaceable.placeRelative(
                 x = leadingPlaceable?.width ?: 0,
@@ -148,7 +172,7 @@ private class FieldContentMeasurePolicy(
                 val placeholderVerticalPosition = if (singleLine) {
                     Alignment.CenterVertically.align(placeholderPlaceable.height, height)
                 } else {
-                    verticalPaddingPadding
+                    verticalPaddingPx
                 }
                 placeholderPlaceable.placeRelative(
                     x = leadingPlaceable?.width ?: 0,