fix(textfield): char counter now displays even if no helper is provid…

…ed (#1445) Co-authored-by: spark-ui-bot <spark-ui-bot@users.noreply.github.com>
adevinta · Jan 28, 2025 · da5546b · da5546b
1 parent c50c65e
commit da5546b
Show file tree

Hide file tree

Showing 18 changed files with 121 additions and 41 deletions.
diff --git a/...k-screenshot-testing/src/test/kotlin/com/adevinta/spark/textfields/TextFieldScreenshot.kt b/...k-screenshot-testing/src/test/kotlin/com/adevinta/spark/textfields/TextFieldScreenshot.kt
@@ -35,6 +35,7 @@ import com.adevinta.spark.ExperimentalSparkApi
 import com.adevinta.spark.components.icons.Icon
 import com.adevinta.spark.components.textfields.AddonScope
 import com.adevinta.spark.components.textfields.TextField
+import com.adevinta.spark.components.textfields.TextFieldCharacterCounter
 import com.adevinta.spark.components.textfields.TextFieldState
 import com.adevinta.spark.icons.Check
 import com.adevinta.spark.icons.SparkIcon
@@ -148,6 +149,85 @@ internal class TextFieldScreenshot {
         }
     }
 
+    @OptIn(ExperimentalLayoutApi::class)
+    @Test
+    fun helperMessage() {
+        paparazzi.sparkSnapshot {
+            FlowColumn(
+                modifier = Modifier.padding(8.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                // With no helper, status message or char counter
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                )
+                // With helper, but no status message or char counter
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                    helper = "helper",
+                )
+                // With helper, status message but no char counter
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                    helper = "helper",
+                    state = TextFieldState.Error,
+                    stateMessage = "state message",
+                )
+                // With helper, status message & char counter
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                    helper = "helper",
+                    state = TextFieldState.Error,
+                    stateMessage = "state message",
+                )
+                // With no helper, status message but with char counter
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                    counter = TextFieldCharacterCounter(10, 50),
+                )
+                // With helper, char counter but no status message
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                    helper = "helper",
+                    counter = TextFieldCharacterCounter(10, 50),
+                )
+                // With helper, status message but no char counter
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                    helper = "helper",
+                    state = TextFieldState.Error,
+                    stateMessage = "state message",
+                    counter = TextFieldCharacterCounter(10, 50),
+                )
+                // With helper, status message & char counter
+                TextField(
+                    value = "value",
+                    onValueChange = {},
+                    label = "Label",
+                    helper = "helper",
+                    state = TextFieldState.Error,
+                    stateMessage = "state message",
+                    counter = TextFieldCharacterCounter(10, 50),
+                )
+            }
+        }
+    }
+
     @OptIn(ExperimentalSparkApi::class)
     @Composable
     private fun TextFields(

diff --git a/...s/com.adevinta.spark.textfields_MultilineTextFieldScreenshot_showcase__dark.png b/...s/com.adevinta.spark.textfields_MultilineTextFieldScreenshot_showcase__dark.png
diff --git a/.../com.adevinta.spark.textfields_MultilineTextFieldScreenshot_showcase__light.png b/.../com.adevinta.spark.textfields_MultilineTextFieldScreenshot_showcase__light.png
diff --git a/...vinta.spark.textfields_MultilineTextFieldScreenshot_showcase_disabled__dark.png b/...vinta.spark.textfields_MultilineTextFieldScreenshot_showcase_disabled__dark.png
diff --git a/...inta.spark.textfields_MultilineTextFieldScreenshot_showcase_disabled__light.png b/...inta.spark.textfields_MultilineTextFieldScreenshot_showcase_disabled__light.png
diff --git a/...ta.spark.textfields_TextFieldDocScreenshot_multilineTextFieldShowcase__dark.png b/...ta.spark.textfields_TextFieldDocScreenshot_multilineTextFieldShowcase__dark.png
diff --git a/...a.spark.textfields_TextFieldDocScreenshot_multilineTextFieldShowcase__light.png b/...a.spark.textfields_TextFieldDocScreenshot_multilineTextFieldShowcase__light.png
diff --git a/...vinta.spark.textfields_TextFieldDocScreenshot_selectTextFieldShowcase__dark.png b/...vinta.spark.textfields_TextFieldDocScreenshot_selectTextFieldShowcase__dark.png
diff --git a/...inta.spark.textfields_TextFieldDocScreenshot_selectTextFieldShowcase__light.png b/...inta.spark.textfields_TextFieldDocScreenshot_selectTextFieldShowcase__light.png
diff --git a/...om.adevinta.spark.textfields_TextFieldDocScreenshot_textFieldShowcase__dark.png b/...om.adevinta.spark.textfields_TextFieldDocScreenshot_textFieldShowcase__dark.png
diff --git a/...m.adevinta.spark.textfields_TextFieldDocScreenshot_textFieldShowcase__light.png b/...m.adevinta.spark.textfields_TextFieldDocScreenshot_textFieldShowcase__light.png
diff --git a/...snapshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_bigValue.png b/...snapshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_bigValue.png
diff --git a/...snapshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_disabled.png b/...snapshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_disabled.png
diff --git a/.../snapshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_enabled.png b/.../snapshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_enabled.png
diff --git a/...hots/images/com.adevinta.spark.textfields_TextFieldScreenshot_helperMessage.png b/...hots/images/com.adevinta.spark.textfields_TextFieldScreenshot_helperMessage.png
diff --git a/...apshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_smallValue.png b/...apshots/images/com.adevinta.spark.textfields_TextFieldScreenshot_smallValue.png
diff --git a/spark/src/main/kotlin/com/adevinta/spark/components/textfields/MultilineTextField.kt b/spark/src/main/kotlin/com/adevinta/spark/components/textfields/MultilineTextField.kt
@@ -342,6 +342,7 @@ private fun ColumnScope.PreviewTextFields(
         enabled = true,
         state = state,
         stateMessage = stateMessage,
+        counter = TextFieldCharacterCounter(0, 300),
         required = true,
         label = "Label",
         placeholder = "Placeholder",

diff --git a/spark/src/main/kotlin/com/adevinta/spark/components/textfields/SparkTextField.kt b/spark/src/main/kotlin/com/adevinta/spark/components/textfields/SparkTextField.kt
@@ -322,7 +322,7 @@ private fun OutlinedBorderContainerBox(
 
 @Composable
 private fun SupportingText(
-    text: String,
+    text: String?,
     counterComposable: @Composable ((Modifier) -> Unit)?,
     statusIcon: @Composable ((Modifier) -> Unit)?,
 ) {
@@ -333,7 +333,7 @@ private fun SupportingText(
         statusIcon?.invoke(Modifier.padding(end = 4.dp))
         Text(
             modifier = Modifier.weight(1f, fill = true),
-            text = text,
+            text = text.orEmpty(),
         )
         counterComposable?.invoke(Modifier.padding(start = 8.dp))
     }
@@ -433,18 +433,14 @@ private fun supportText(
     stateMessage: String?,
     counterComposable: @Composable ((Modifier) -> Unit)?,
     stateIcon: @Composable ((Modifier) -> Unit)?,
-): (@Composable () -> Unit)? = if (stateMessage != null && state != null) {
-    {
-        SupportingText(
-            text = stateMessage,
-            counterComposable = counterComposable,
-            statusIcon = stateIcon,
-        )
-    }
-} else if (helper != null) {
+): (@Composable () -> Unit)? = if (
+    (stateMessage != null && state != null) || helper != null || counterComposable != null
+) {
     {
+        // Prioritize the state message if there's one and fallback to the helper otherwise
+        val message = state?.let { stateMessage } ?: helper
         SupportingText(
-            text = helper,
+            text = message,
             counterComposable = counterComposable,
             statusIcon = stateIcon,
         )
@@ -461,7 +457,7 @@ internal object TextFieldDefault {
 
         return { modifier ->
             Icon(
-                modifier = modifier.size(16.dp),
+                modifier = modifier.size(18.dp),
                 sparkIcon = state.icon,
                 contentDescription = null,
             )