fix(text-inputs): Improve helper text allocation on TextInput (#179)

Decathlon · Oct 11, 2023 · e6645ac · e6645ac
1 parent 34ffb22
commit e6645ac
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 65 deletions.
diff --git a/sample/src/main/java/com/decathlon/compose/sample/screens/TextInputs.kt b/sample/src/main/java/com/decathlon/compose/sample/screens/TextInputs.kt
@@ -88,9 +88,9 @@ object TextInputs : Screen {
                         icon = {
                             Icon(
                                 painter = painter,
-                                contentDescription = null
+                                contentDescription = null,
                             )
-                        }
+                        },
                     )
                 }
                 item {
@@ -166,7 +166,7 @@ object TextInputs : Screen {
                         value = "Input",
                         label = "Label",
                         onValueChange = {},
-                        helperText = "Helper Text",
+                        helperText = "Helper Text, lorem ipsum helper text next to the counter",
                         counter = 999 to 999,
                         icon = {
                             Icon(

diff --git a/.../src/main/java/com/decathlon/vitamin/compose/textinputs/TextInputStateColorsExtensions.kt b/.../src/main/java/com/decathlon/vitamin/compose/textinputs/TextInputStateColorsExtensions.kt
@@ -0,0 +1,77 @@
+package com.decathlon.vitamin.compose.textinputs
+
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.TextFieldColors
+import androidx.compose.material.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import com.decathlon.vitamin.compose.foundation.VitaminTheme
+
+@Composable
+internal fun TextInputStateColors.outlinedTextFieldColors(): TextFieldColors {
+    return TextFieldDefaults.outlinedTextFieldColors(
+        backgroundColor = VitaminTheme.colors.vtmnBackgroundPrimary,
+        cursorColor = VitaminTheme.colors.vtmnContentAction,
+        errorCursorColor = VitaminTheme.colors.vtmnContentNegative,
+        textColor = VitaminTheme.colors.vtmnContentPrimary,
+        disabledTextColor = VitaminTheme.colors.vtmnContentTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        focusedBorderColor = focusBorderColor,
+        unfocusedBorderColor = borderColor,
+        disabledBorderColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorBorderColor = borderColor,
+        leadingIconColor = iconColor,
+        disabledLeadingIconColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorLeadingIconColor = iconColor,
+        trailingIconColor = iconColor,
+        disabledTrailingIconColor = VitaminTheme.colors.vtmnContentPrimary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorTrailingIconColor = iconColor,
+        focusedLabelColor = focusTextColor,
+        unfocusedLabelColor = textColor,
+        disabledLabelColor = VitaminTheme.colors.vtmnContentTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorLabelColor = textColor,
+    )
+}
+
+@Composable
+internal fun TextInputStateColors.textFieldColors(): TextFieldColors {
+    return TextFieldDefaults.textFieldColors(
+        backgroundColor = VitaminTheme.colors.vtmnBackgroundPrimary,
+        cursorColor = VitaminTheme.colors.vtmnContentAction,
+        errorCursorColor = VitaminTheme.colors.vtmnContentNegative,
+        textColor = VitaminTheme.colors.vtmnContentPrimary,
+        disabledTextColor = VitaminTheme.colors.vtmnContentTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        focusedIndicatorColor = focusBorderColor,
+        unfocusedIndicatorColor = borderColor,
+        disabledIndicatorColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorIndicatorColor = borderColor,
+        leadingIconColor = iconColor,
+        disabledLeadingIconColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorLeadingIconColor = iconColor,
+        trailingIconColor = iconColor,
+        disabledTrailingIconColor = VitaminTheme.colors.vtmnContentPrimary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorTrailingIconColor = iconColor,
+        focusedLabelColor = focusTextColor,
+        unfocusedLabelColor = textColor,
+        disabledLabelColor = VitaminTheme.colors.vtmnContentTertiary.copy(
+            ContentAlpha.disabled,
+        ),
+        errorLabelColor = textColor,
+    )
+}
diff --git a/...s/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt b/...s/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt
@@ -1,11 +1,14 @@
 package com.decathlon.vitamin.compose.textinputs
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.ContentAlpha
@@ -15,7 +18,6 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
-import androidx.compose.material.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
@@ -94,35 +96,7 @@ object VitaminTextInputs {
                     value = value,
                     onValueChange = onValueChange,
                     label = { Text(text = label) },
-                    colors = TextFieldDefaults.outlinedTextFieldColors(
-                        backgroundColor = VitaminTheme.colors.vtmnBackgroundPrimary,
-                        cursorColor = VitaminTheme.colors.vtmnContentAction,
-                        errorCursorColor = VitaminTheme.colors.vtmnContentNegative,
-                        textColor = VitaminTheme.colors.vtmnContentPrimary,
-                        disabledTextColor = VitaminTheme.colors.vtmnContentTertiary.copy(ContentAlpha.disabled),
-                        focusedBorderColor = colors.focusBorderColor,
-                        unfocusedBorderColor = colors.borderColor,
-                        disabledBorderColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorBorderColor = colors.borderColor,
-                        leadingIconColor = colors.iconColor,
-                        disabledLeadingIconColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorLeadingIconColor = colors.iconColor,
-                        trailingIconColor = colors.iconColor,
-                        disabledTrailingIconColor = VitaminTheme.colors.vtmnContentPrimary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorTrailingIconColor = colors.iconColor,
-                        focusedLabelColor = colors.focusTextColor,
-                        unfocusedLabelColor = colors.textColor,
-                        disabledLabelColor = VitaminTheme.colors.vtmnContentTertiary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorLabelColor = colors.textColor,
-                    ),
+                    colors = colors.outlinedTextFieldColors(),
                     textStyle = textStyle,
                     visualTransformation = transformation,
                     interactionSource = interactionSource,
@@ -263,35 +237,7 @@ object VitaminTextInputs {
                     value = value,
                     onValueChange = onValueChange,
                     label = { Text(text = label) },
-                    colors = TextFieldDefaults.textFieldColors(
-                        backgroundColor = VitaminTheme.colors.vtmnBackgroundPrimary,
-                        cursorColor = VitaminTheme.colors.vtmnContentAction,
-                        errorCursorColor = VitaminTheme.colors.vtmnContentNegative,
-                        textColor = VitaminTheme.colors.vtmnContentPrimary,
-                        disabledTextColor = VitaminTheme.colors.vtmnContentTertiary.copy(ContentAlpha.disabled),
-                        focusedIndicatorColor = colors.focusBorderColor,
-                        unfocusedIndicatorColor = colors.borderColor,
-                        disabledIndicatorColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorIndicatorColor = colors.borderColor,
-                        leadingIconColor = colors.iconColor,
-                        disabledLeadingIconColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorLeadingIconColor = colors.iconColor,
-                        trailingIconColor = colors.iconColor,
-                        disabledTrailingIconColor = VitaminTheme.colors.vtmnContentPrimary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorTrailingIconColor = colors.iconColor,
-                        focusedLabelColor = colors.focusTextColor,
-                        unfocusedLabelColor = colors.textColor,
-                        disabledLabelColor = VitaminTheme.colors.vtmnContentTertiary.copy(
-                            ContentAlpha.disabled,
-                        ),
-                        errorLabelColor = colors.textColor,
-                    ),
+                    colors = colors.textFieldColors(),
                     textStyle = textStyle,
                     visualTransformation = transformation,
                     interactionSource = interactionSource,
@@ -405,7 +351,10 @@ internal fun VitaminTextInputLayoutImpl(
             textInput()
         }
         Row(
-            modifier = Modifier.padding(vertical = 1.dp, horizontal = 4.dp)
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 1.dp, horizontal = 4.dp),
+            horizontalArrangement = Arrangement.End,
         ) {
             helperText?.let {
                 val color = if (!enabled) {
@@ -428,7 +377,7 @@ internal fun VitaminTextInputLayoutImpl(
                             if (!enabled) {
                                 this.disabled()
                             }
-                        }
+                        },
                 )
             }
             counter?.let {
@@ -437,6 +386,7 @@ internal fun VitaminTextInputLayoutImpl(
                 } else {
                     colors.helperColor
                 }
+                Spacer(modifier = Modifier.width(4.dp))
                 Text(
                     text = "${it.first}/${it.second}",
                     style = VitaminTheme.typography.caption,
@@ -447,7 +397,7 @@ internal fun VitaminTextInputLayoutImpl(
                                 this.disabled()
                             }
                         }
-                        .weight(1f),
+                        .wrapContentWidth(),
                     textAlign = TextAlign.End,
                 )
             }