From e6645acb19ca674f2103cae7263b5bc6b22bf911 Mon Sep 17 00:00:00 2001 From: ManonPolle <46710837+ManonPolle@users.noreply.github.com> Date: Wed, 11 Oct 2023 15:10:48 +0200 Subject: [PATCH] fix(text-inputs): Improve helper text allocation on TextInput (#179) --- .../compose/sample/screens/TextInputs.kt | 6 +- .../TextInputStateColorsExtensions.kt | 77 +++++++++++++++++++ .../compose/textinputs/VitaminTextInputs.kt | 74 +++--------------- 3 files changed, 92 insertions(+), 65 deletions(-) create mode 100644 text-inputs/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/TextInputStateColorsExtensions.kt 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 index 66e26f78..7be96720 100644 --- 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/text-inputs/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/TextInputStateColorsExtensions.kt b/text-inputs/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/TextInputStateColorsExtensions.kt new file mode 100644 index 00000000..acad8650 --- /dev/null +++ b/text-inputs/text-inputs/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/text-inputs/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt b/text-inputs/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt index 5f0e3e1d..98912b47 100644 --- a/text-inputs/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt +++ b/text-inputs/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, ) }