fix: TextField padding between leadingContent and Label/BasicTextField (

#588)
adevinta · Aug 3, 2023 · f5170e9 · f5170e9
1 parent 35143bd
commit f5170e9
Show file tree

Hide file tree

Showing 58 changed files with 108 additions and 136 deletions.
diff --git a/...textfields_TextFieldScreenshot_test__value.0_leadingicon_enabled_helper.121.png b/...textfields_TextFieldScreenshot_test__value.0_leadingicon_enabled_helper.121.png
diff --git a/...a.spark.textfields_TextFieldScreenshot_test__value.0_leadingicon_helper.121.png b/...a.spark.textfields_TextFieldScreenshot_test__value.0_leadingicon_helper.121.png
diff --git a/...xtFieldScreenshot_test__value.0_leadingicon_trailingicon_enabled_helper.121.png b/...xtFieldScreenshot_test__value.0_leadingicon_trailingicon_enabled_helper.121.png
diff --git a/...ields_TextFieldScreenshot_test__value.0_leadingicon_trailingicon_helper.121.png b/...ields_TextFieldScreenshot_test__value.0_leadingicon_trailingicon_helper.121.png
diff --git a/...om.adevinta.spark.textfields_TextFieldScreenshot_test__value.11_leadingicon.png b/...om.adevinta.spark.textfields_TextFieldScreenshot_test__value.11_leadingicon.png
diff --git a/...nta.spark.textfields_TextFieldScreenshot_test__value.11_leadingicon_enabled.png b/...nta.spark.textfields_TextFieldScreenshot_test__value.11_leadingicon_enabled.png
diff --git a/...extfields_TextFieldScreenshot_test__value.11_leadingicon_enabled_helper.121.png b/...extfields_TextFieldScreenshot_test__value.11_leadingicon_enabled_helper.121.png
diff --git a/....spark.textfields_TextFieldScreenshot_test__value.11_leadingicon_helper.121.png b/....spark.textfields_TextFieldScreenshot_test__value.11_leadingicon_helper.121.png
diff --git a/...park.textfields_TextFieldScreenshot_test__value.11_leadingicon_trailingicon.png b/...park.textfields_TextFieldScreenshot_test__value.11_leadingicon_trailingicon.png
diff --git a/...tfields_TextFieldScreenshot_test__value.11_leadingicon_trailingicon_enabled.png b/...tfields_TextFieldScreenshot_test__value.11_leadingicon_trailingicon_enabled.png
diff --git a/...tFieldScreenshot_test__value.11_leadingicon_trailingicon_enabled_helper.121.png b/...tFieldScreenshot_test__value.11_leadingicon_trailingicon_enabled_helper.121.png
diff --git a/...elds_TextFieldScreenshot_test__value.11_leadingicon_trailingicon_helper.121.png b/...elds_TextFieldScreenshot_test__value.11_leadingicon_trailingicon_helper.121.png
diff --git a/...ts/images/com.adevinta.spark.textfields_TextFieldScreenshot_test__value.121.png b/...ts/images/com.adevinta.spark.textfields_TextFieldScreenshot_test__value.121.png
diff --git a/...s/com.adevinta.spark.textfields_TextFieldScreenshot_test__value.121_enabled.png b/...s/com.adevinta.spark.textfields_TextFieldScreenshot_test__value.121_enabled.png
diff --git a/...nta.spark.textfields_TextFieldScreenshot_test__value.121_enabled_helper.121.png b/...nta.spark.textfields_TextFieldScreenshot_test__value.121_enabled_helper.121.png
diff --git a/...om.adevinta.spark.textfields_TextFieldScreenshot_test__value.121_helper.121.png b/...om.adevinta.spark.textfields_TextFieldScreenshot_test__value.121_helper.121.png
diff --git a/...m.adevinta.spark.textfields_TextFieldScreenshot_test__value.121_leadingicon.png b/...m.adevinta.spark.textfields_TextFieldScreenshot_test__value.121_leadingicon.png
diff --git a/...ta.spark.textfields_TextFieldScreenshot_test__value.121_leadingicon_enabled.png b/...ta.spark.textfields_TextFieldScreenshot_test__value.121_leadingicon_enabled.png
diff --git a/...xtfields_TextFieldScreenshot_test__value.121_leadingicon_enabled_helper.121.png b/...xtfields_TextFieldScreenshot_test__value.121_leadingicon_enabled_helper.121.png
diff --git a/...spark.textfields_TextFieldScreenshot_test__value.121_leadingicon_helper.121.png b/...spark.textfields_TextFieldScreenshot_test__value.121_leadingicon_helper.121.png
diff --git a/...ark.textfields_TextFieldScreenshot_test__value.121_leadingicon_trailingicon.png b/...ark.textfields_TextFieldScreenshot_test__value.121_leadingicon_trailingicon.png
diff --git a/...fields_TextFieldScreenshot_test__value.121_leadingicon_trailingicon_enabled.png b/...fields_TextFieldScreenshot_test__value.121_leadingicon_trailingicon_enabled.png
diff --git a/...FieldScreenshot_test__value.121_leadingicon_trailingicon_enabled_helper.121.png b/...FieldScreenshot_test__value.121_leadingicon_trailingicon_enabled_helper.121.png
diff --git a/...lds_TextFieldScreenshot_test__value.121_leadingicon_trailingicon_helper.121.png b/...lds_TextFieldScreenshot_test__value.121_leadingicon_trailingicon_helper.121.png
diff --git a/....adevinta.spark.textfields_TextFieldScreenshot_test__value.121_trailingicon.png b/....adevinta.spark.textfields_TextFieldScreenshot_test__value.121_trailingicon.png
diff --git a/...a.spark.textfields_TextFieldScreenshot_test__value.121_trailingicon_enabled.png b/...a.spark.textfields_TextFieldScreenshot_test__value.121_trailingicon_enabled.png
diff --git a/...tfields_TextFieldScreenshot_test__value.121_trailingicon_enabled_helper.121.png b/...tfields_TextFieldScreenshot_test__value.121_trailingicon_enabled_helper.121.png
diff --git a/...park.textfields_TextFieldScreenshot_test__value.121_trailingicon_helper.121.png b/...park.textfields_TextFieldScreenshot_test__value.121_trailingicon_helper.121.png
diff --git a/...devinta.spark_PreviewScreenshotTests_preview_tests_tabs_leadingicontab_dark.png b/...devinta.spark_PreviewScreenshotTests_preview_tests_tabs_leadingicontab_dark.png
diff --git a/...evinta.spark_PreviewScreenshotTests_preview_tests_tabs_leadingicontab_light.png b/...evinta.spark_PreviewScreenshotTests_preview_tests_tabs_leadingicontab_light.png
diff --git a/...es/com.adevinta.spark_PreviewScreenshotTests_preview_tests_tabs_tabrow_dark.png b/...es/com.adevinta.spark_PreviewScreenshotTests_preview_tests_tabs_tabrow_dark.png
diff --git a/...s/com.adevinta.spark_PreviewScreenshotTests_preview_tests_tabs_tabrow_light.png b/...s/com.adevinta.spark_PreviewScreenshotTests_preview_tests_tabs_tabrow_light.png
diff --git a/...viewScreenshotTests_preview_tests_textfields_multilinetextfieldintents_dark.png b/...viewScreenshotTests_preview_tests_textfields_multilinetextfieldintents_dark.png
diff --git a/...iewScreenshotTests_preview_tests_textfields_multilinetextfieldintents_light.png b/...iewScreenshotTests_preview_tests_textfields_multilinetextfieldintents_light.png
diff --git a/...creenshotTests_preview_tests_textfields_multilinetextfieldintentsalert_dark.png b/...creenshotTests_preview_tests_textfields_multilinetextfieldintentsalert_dark.png
diff --git a/...reenshotTests_preview_tests_textfields_multilinetextfieldintentsalert_light.png b/...reenshotTests_preview_tests_textfields_multilinetextfieldintentsalert_light.png
diff --git a/...creenshotTests_preview_tests_textfields_multilinetextfieldintentserror_dark.png b/...creenshotTests_preview_tests_textfields_multilinetextfieldintentserror_dark.png
diff --git a/...reenshotTests_preview_tests_textfields_multilinetextfieldintentserror_light.png b/...reenshotTests_preview_tests_textfields_multilinetextfieldintentserror_light.png
diff --git a/...eenshotTests_preview_tests_textfields_multilinetextfieldintentssuccess_dark.png b/...eenshotTests_preview_tests_textfields_multilinetextfieldintentssuccess_dark.png
diff --git a/...enshotTests_preview_tests_textfields_multilinetextfieldintentssuccess_light.png b/...enshotTests_preview_tests_textfields_multilinetextfieldintentssuccess_light.png
diff --git a/...PreviewScreenshotTests_preview_tests_textfields_selecttextfieldintents_dark.png b/...PreviewScreenshotTests_preview_tests_textfields_selecttextfieldintents_dark.png
diff --git a/...reviewScreenshotTests_preview_tests_textfields_selecttextfieldintents_light.png b/...reviewScreenshotTests_preview_tests_textfields_selecttextfieldintents_light.png
diff --git a/...ewScreenshotTests_preview_tests_textfields_selecttextfieldintentsalert_dark.png b/...ewScreenshotTests_preview_tests_textfields_selecttextfieldintentsalert_dark.png
diff --git a/...wScreenshotTests_preview_tests_textfields_selecttextfieldintentsalert_light.png b/...wScreenshotTests_preview_tests_textfields_selecttextfieldintentsalert_light.png
diff --git a/...ewScreenshotTests_preview_tests_textfields_selecttextfieldintentserror_dark.png b/...ewScreenshotTests_preview_tests_textfields_selecttextfieldintentserror_dark.png
diff --git a/...wScreenshotTests_preview_tests_textfields_selecttextfieldintentserror_light.png b/...wScreenshotTests_preview_tests_textfields_selecttextfieldintentserror_light.png
diff --git a/...ScreenshotTests_preview_tests_textfields_selecttextfieldintentssuccess_dark.png b/...ScreenshotTests_preview_tests_textfields_selecttextfieldintentssuccess_dark.png
diff --git a/...creenshotTests_preview_tests_textfields_selecttextfieldintentssuccess_light.png b/...creenshotTests_preview_tests_textfields_selecttextfieldintentssuccess_light.png
diff --git a/..._PreviewScreenshotTests_preview_tests_textfields_textfieldintentsalert_dark.png b/..._PreviewScreenshotTests_preview_tests_textfields_textfieldintentsalert_dark.png
diff --git a/...PreviewScreenshotTests_preview_tests_textfields_textfieldintentsalert_light.png b/...PreviewScreenshotTests_preview_tests_textfields_textfieldintentsalert_light.png
diff --git a/..._PreviewScreenshotTests_preview_tests_textfields_textfieldintentserror_dark.png b/..._PreviewScreenshotTests_preview_tests_textfields_textfieldintentserror_dark.png
diff --git a/...PreviewScreenshotTests_preview_tests_textfields_textfieldintentserror_light.png b/...PreviewScreenshotTests_preview_tests_textfields_textfieldintentserror_light.png
diff --git a/...reviewScreenshotTests_preview_tests_textfields_textfieldintentssuccess_dark.png b/...reviewScreenshotTests_preview_tests_textfields_textfieldintentssuccess_dark.png
diff --git a/...eviewScreenshotTests_preview_tests_textfields_textfieldintentssuccess_light.png b/...eviewScreenshotTests_preview_tests_textfields_textfieldintentssuccess_light.png
diff --git a/...evinta.spark_PreviewScreenshotTests_preview_tests_textfields_textfieldslots.png b/...evinta.spark_PreviewScreenshotTests_preview_tests_textfields_textfieldslots.png
diff --git a/spark/src/main/kotlin/com/adevinta/spark/components/textfields/SparkTextFieldImpl.kt b/spark/src/main/kotlin/com/adevinta/spark/components/textfields/SparkTextFieldImpl.kt
@@ -66,6 +66,7 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.lerp
 import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import com.adevinta.spark.SparkTheme
@@ -99,6 +100,8 @@ internal fun SparkDecorationBox(
     val contentPadding = OutlinedTextFieldDefaults.contentPadding(
         top = VerticalContentPadding,
         bottom = VerticalContentPadding,
+        start = if (leadingIcon != null) 8.dp else 16.dp,
+        end = if (trailingIcon != null) 8.dp else 16.dp,
     )
 
     val isFocused = interactionSource.collectIsFocusedAsState().value
@@ -201,7 +204,7 @@ internal fun SparkDecorationBox(
             Box(
                 Modifier
                     .layoutId(ContainerId)
-                    .outlineCutout(labelSize.value, contentPadding),
+                    .outlineCutout(labelSize.value, 16.dp),
                 propagateMinConstraints = true,
             ) {
                 border?.invoke()
@@ -378,12 +381,12 @@ internal fun SparkTextFieldLayout(
 internal fun widthOrZero(placeable: Placeable?) = placeable?.width ?: 0
 internal fun heightOrZero(placeable: Placeable?) = placeable?.height ?: 0
 
-internal fun Modifier.outlineCutout(labelSize: Size, paddingValues: PaddingValues) =
+internal fun Modifier.outlineCutout(labelSize: Size, leftPadding: Dp) =
     this.drawWithContent {
         val labelWidth = labelSize.width
         if (labelWidth > 0f) {
             val innerPadding = OutlinedTextFieldInnerPadding.toPx()
-            val leftLtr = paddingValues.calculateLeftPadding(layoutDirection).toPx() - innerPadding
+            val leftLtr = leftPadding.toPx() - innerPadding
             val rightLtr = leftLtr + labelWidth + 2 * innerPadding
             val left = when (layoutDirection) {
                 LayoutDirection.Rtl -> size.width - rightLtr
@@ -520,7 +523,7 @@ private const val PlaceholderAnimationDuration = 83
 private const val PlaceholderAnimationDelayOrDuration = 67
 
 internal val CounterPadding = 8.dp
-internal val HorizontalIconPadding = 8.dp
+internal val HorizontalIconPadding = 16.dp
 internal val VerticalContentPadding = 12.dp
 
 internal val IconDefaultSizeModifier = Modifier.defaultMinSize(24.dp, 24.dp)

diff --git a/...k/src/main/kotlin/com/adevinta/spark/components/textfields/SparkTextFieldMeasurePolicy.kt b/...k/src/main/kotlin/com/adevinta/spark/components/textfields/SparkTextFieldMeasurePolicy.kt
@@ -405,8 +405,6 @@ private fun Placeable.PlacementScope.place(
     val startPadding =
         (paddingValues.calculateStartPadding(layoutDirection).value * density).roundToInt()
 
-    val iconPadding = HorizontalIconPadding.value * density
-
     // placed center vertically and to the start edge horizontally
     leadingPlaceable?.placeRelative(
         0,
@@ -441,7 +439,7 @@ private fun Placeable.PlacementScope.place(
             if (leadingPlaceable == null) {
                 0f
             } else {
-                (widthOrZero(leadingPlaceable) - iconPadding) * (1 - animationProgress)
+                (widthOrZero(leadingPlaceable) - startPadding) * (1 - animationProgress) + startPadding
             }
             ).roundToInt() + startPadding
         it.placeRelative(positionX, positionY.roundToInt())