Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Oct 11, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions sample/src/main/java/com/decathlon/compose/sample/screens/TextInputs.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,9 @@ object TextInputs : Screen {
icon = {
Icon(
painter = painter,
contentDescription = null
contentDescription = null,
)
}
},
)
}
item {
Expand Down Expand Up @@ -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(
Expand Down
77 changes: 77 additions & 0 deletions .../src/main/java/com/decathlon/vitamin/compose/textinputs/TextInputStateColorsExtensions.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
)
}
74 changes: 12 additions & 62 deletions ...s/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
ManonPolle marked this conversation as resolved.
Show resolved Hide resolved
) {
helperText?.let {
val color = if (!enabled) {
Expand All @@ -428,7 +377,7 @@ internal fun VitaminTextInputLayoutImpl(
if (!enabled) {
this.disabled()
}
}
},
)
}
counter?.let {
Expand All @@ -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,
Expand All @@ -447,7 +397,7 @@ internal fun VitaminTextInputLayoutImpl(
this.disabled()
}
}
.weight(1f),
.wrapContentWidth(),
textAlign = TextAlign.End,
)
}
Expand Down
Loading