Merge pull request #459 from kiwicom/font-scaling

Fix font scaling issues in `Tag`, `RadioField` and `CheckboxField`
kiwicom · Jun 12, 2023 · a66f74c · a66f74c
2 parents dcd2dbc + b144098
commit a66f74c
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 18 deletions.
diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/CheckboxField.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/CheckboxField.kt
@@ -25,6 +25,7 @@ import kiwi.orbit.compose.ui.foundation.ContentEmphasis
 import kiwi.orbit.compose.ui.foundation.LocalContentColor
 import kiwi.orbit.compose.ui.foundation.LocalContentEmphasis
 import kiwi.orbit.compose.ui.foundation.LocalTextStyle
+import kiwi.orbit.compose.ui.layout.alignByLineHeight
 
 @Composable
 public fun CheckboxField(
@@ -62,9 +63,9 @@ public fun CheckboxField(
         Checkbox(
             checked = checked,
             onCheckedChange = null,
-            modifier = Modifier.padding(
-                end = 10.dp,
-            ),
+            modifier = Modifier
+                .padding(end = 10.dp)
+                .alignByLineHeight(OrbitTheme.typography.title5),
             enabled = enabled,
             isError = isError,
             interactionSource = interactionSource,

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/RadioField.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/RadioField.kt
@@ -25,6 +25,7 @@ import kiwi.orbit.compose.ui.foundation.ContentEmphasis
 import kiwi.orbit.compose.ui.foundation.LocalContentColor
 import kiwi.orbit.compose.ui.foundation.LocalContentEmphasis
 import kiwi.orbit.compose.ui.foundation.LocalTextStyle
+import kiwi.orbit.compose.ui.layout.alignByLineHeight
 
 @Composable
 public fun RadioField(
@@ -63,9 +64,9 @@ public fun RadioField(
         Radio(
             selected = selected,
             onClick = null,
-            modifier = Modifier.padding(
-                end = 10.dp,
-            ),
+            modifier = Modifier
+                .padding(end = 10.dp)
+                .alignByLineHeight(OrbitTheme.typography.title5),
             enabled = enabled,
             isError = isError,
             interactionSource = interactionSource,

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/Tag.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/Tag.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -27,6 +26,7 @@ import kiwi.orbit.compose.ui.foundation.LocalContentColor
 import kiwi.orbit.compose.ui.foundation.LocalContentEmphasis
 import kiwi.orbit.compose.ui.foundation.LocalTextStyle
 import kiwi.orbit.compose.ui.foundation.contentColorFor
+import kiwi.orbit.compose.ui.layout.alignByLineHeight
 
 @Composable
 public fun Tag(
@@ -53,7 +53,6 @@ public fun Tag(
     ) {
         Row(
             modifier
-                .requiredHeight(32.dp)
                 .clip(shape)
                 .background(backgroundColor, shape)
                 .then(if (onSelect != null) Modifier.clickable(onClick = onSelect) else Modifier)
@@ -70,6 +69,7 @@ public fun Tag(
                     onClick = onRemove,
                     modifier = Modifier
                         .padding(start = 8.dp)
+                        .alignByLineHeight()
                         .size(16.dp),
                 ) {
                     Icon(

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/layout/AlignByLineHeightModifier.kt b/ui/src/main/java/kiwi/orbit/compose/ui/layout/AlignByLineHeightModifier.kt
@@ -0,0 +1,27 @@
+// ktlint-disable filename
+
+package kiwi.orbit.compose.ui.layout
+
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.TextStyle
+import kiwi.orbit.compose.ui.foundation.LocalTextStyle
+
+/**
+ * Aligns the composable vertically to the current LineHeight size.
+ */
+public fun Modifier.alignByLineHeight(
+    textStyle: TextStyle? = null,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+): Modifier = composed {
+    val style: TextStyle = textStyle ?: LocalTextStyle.current
+    val density = LocalDensity.current
+    val height = with(density) { style.lineHeight.toDp() }
+    Modifier
+        .height(height)
+        .wrapContentHeight(align = verticalAlignment)
+}
diff --git a/...est/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_checkboxField_big.png b/...est/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_checkboxField_big.png
diff --git a/...c/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_radioField_big.png b/...c/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_radioField_big.png
diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_tag.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_tag.png
diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_tag_big.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_tag_big.png
diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_tag_dark.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_tag_dark.png