fix(TextField): Revert change that made addons not centered (#1248)

Co-authored-by: Simon Marquis <[email protected]>
Co-authored-by: spark-ui-bot <[email protected]>

catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/samples/textfields/TextFieldsConfigurator.kt

@@ -43,7 +43,6 @@ import com.adevinta.spark.catalog.themes.SegmentedButton
 import com.adevinta.spark.catalog.util.SampleSourceUrl
 import com.adevinta.spark.components.iconbuttons.toggle.IconToggleButtonFilled
 import com.adevinta.spark.components.iconbuttons.toggle.IconToggleButtonIcons
-import com.adevinta.spark.components.icons.Icon
 import com.adevinta.spark.components.text.Text
 import com.adevinta.spark.components.textfields.TextField
 import com.adevinta.spark.components.textfields.TextFieldState
@@ -63,7 +62,7 @@ public val TextFieldsConfigurator: Configurator = Configurator(
 
 @Composable
 private fun ColumnScope.TextFieldSample() {
-    var icon: SparkIcon? by remember { mutableStateOf(null) }
+    var icon: SparkIcon? by remember { mutableStateOf(SparkIcons.LikeFill) }
     var isReadOnly by remember { mutableStateOf(false) }
     var isEnabled by remember { mutableStateOf(true) }
     var isRequired by remember { mutableStateOf(true) }
@@ -86,7 +85,7 @@ private fun ColumnScope.TextFieldSample() {
         placeholder = placeHolderText,
         helper = helperText,
         leadingContent = addonText?.let { { Text(it) } },
-        trailingContent = icon?.let { { Icon(it, contentDescription = null) } },
+        trailingContent = icon?.let { { TextFieldIconButton(onClick = {}, icon = it, contentDescription = null) } },
         state = state,
         stateMessage = stateMessageText,
     )

catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/textfields/TextfieldsExamples.kt

@@ -0,0 +1,222 @@
+/*
+ * Copyright (c) 2023-2024 Adevinta
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package com.adevinta.spark.catalog.examples.samples.textfields
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.PopupProperties
+import com.adevinta.spark.SparkTheme
+import com.adevinta.spark.catalog.model.Example
+import com.adevinta.spark.catalog.util.SampleSourceUrl
+import com.adevinta.spark.components.menu.DropdownMenuItem
+import com.adevinta.spark.components.text.Text
+import com.adevinta.spark.components.textfields.SparkSelectTrailingIcon
+import com.adevinta.spark.components.textfields.TextField
+import com.adevinta.spark.icons.Booster
+import com.adevinta.spark.icons.EyeFill
+import com.adevinta.spark.icons.EyeOffFill
+import com.adevinta.spark.icons.QuestionOutline
+import com.adevinta.spark.icons.SparkIcons
+import kotlin.random.Random
+
+private const val TextFieldsExampleSourceUrl = "$SampleSourceUrl/DropdownExamples.kt"
+
+public val TextFieldsExamples: List<Example> = listOf(
+    Example(
+        name = "Default Addons",
+        description = "Sample of addons provided by Spark through the AddonScope api",
+        sourceUrl = TextFieldsExampleSourceUrl,
+    ) {
+        Addons()
+    },
+)
+
+@Composable
+private fun ColumnScope.Addons() {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        TextFieldWithDropdown()
+        TextFieldWithButton()
+        TextFieldWithIcon()
+        TextFieldWithIconButton()
+        TextFieldWithIconToggleButton()
+        TextFieldWithPrefixSuffixButton()
+    }
+}
+
+@Composable
+private fun TextFieldWithDropdown() {
+    var expanded by remember { mutableStateOf(false) }
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = "+33 0123456789",
+        label = "Phone number - Dropdown addon",
+        onValueChange = {},
+        leadingContent = {
+            Dropdown(
+                modifier = Modifier,
+                expanded = expanded,
+                onExpandedChange = {
+                    expanded = !expanded
+                },
+                onDismissRequest = {
+                    expanded = false
+                },
+                properties = PopupProperties(),
+                dropdownLabel = {
+                    Canvas(
+                        modifier = Modifier.size(width = 24.dp, height = 14.dp),
+                    ) {
+                        drawRect(color = Color.Blue)
+                        drawRect(color = Color.White, topLeft = Offset(24.dp.toPx() / 3, 0f))
+                        drawRect(color = Color.Red, topLeft = Offset(24.dp.toPx() / 3 * 2, 0f))
+                    }
+                    Text(text = "FR", style = SparkTheme.typography.body1)
+                    SparkSelectTrailingIcon(expanded = expanded)
+                },
+            ) {
+                repeat(4) {
+                    DropdownMenuItem(
+                        onClick = {
+                            expanded = false
+                        },
+                        text = { Text(text = "Dropdown") },
+                    )
+                }
+            }
+        },
+    )
+}
+
+@Composable
+private fun TextFieldWithButton() {
+    var isLoading by remember { mutableStateOf(false) }
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = "AA-123-BB",
+        label = "Button addon",
+        onValueChange = {},
+        trailingContent = {
+            Button(
+                text = "Validate",
+                modifier = Modifier,
+                onClick = { isLoading = !isLoading },
+                isLoading = isLoading,
+            )
+        },
+    )
+}
+
+@Composable
+private fun TextFieldWithIcon() {
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = "AA-123-BB",
+        label = "Icon addon",
+        onValueChange = {},
+        trailingContent = {
+            TextFieldIcon(
+                icon = SparkIcons.QuestionOutline,
+                modifier = Modifier,
+                contentDescription = "",
+            )
+        },
+    )
+}
+
+@Composable
+private fun TextFieldWithIconButton() {
+    var value by remember {
+        mutableStateOf("AA-123-BB")
+    }
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = value,
+        label = "Icon button addon",
+        onValueChange = {},
+        trailingContent = {
+            TextFieldIconButton(
+                modifier = Modifier,
+                icon = SparkIcons.Booster,
+                contentDescription = "",
+                onClick = { value = Random.nextInt(0, 8000).toString() },
+            )
+        },
+    )
+}
+
+@Composable
+private fun TextFieldWithIconToggleButton() {
+    var checked by remember {
+        mutableStateOf(false)
+    }
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = "AA-123-BB",
+        label = "Icon toggle button addon",
+        onValueChange = {},
+        trailingContent = {
+            TextFieldIconToggleButton(
+                modifier = Modifier,
+                checked = checked,
+                checkedIcon = SparkIcons.EyeFill,
+                unCheckedIcon = SparkIcons.EyeOffFill,
+                contentDescription = "",
+                onCheckedChange = { checked = it },
+            )
+        },
+    )
+}
+
+@Composable
+private fun TextFieldWithPrefixSuffixButton() {
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = "www.adevinta.com",
+        label = "Url - Prefix/Suffix addon",
+        onValueChange = {},
+        leadingContent = {
+            TextFieldText(
+                text = "https://",
+            )
+        },
+        trailingContent = {
+            TextFieldText(
+                text = ".com",
+            )
+        },
+    )
+}

catalog/src/main/kotlin/com/adevinta/spark/catalog/model/Components.kt

@@ -60,6 +60,7 @@ import com.adevinta.spark.catalog.examples.samples.tabs.TabsExamples
 import com.adevinta.spark.catalog.examples.samples.tags.TagsExamples
 import com.adevinta.spark.catalog.examples.samples.text.DropdownsExamples
 import com.adevinta.spark.catalog.examples.samples.text.TextLinksExamples
+import com.adevinta.spark.catalog.examples.samples.textfields.TextFieldsExamples
 import com.adevinta.spark.catalog.examples.samples.toggles.CheckboxExamples
 import com.adevinta.spark.catalog.examples.samples.toggles.IconToggleButtonsExamples
 import com.adevinta.spark.catalog.examples.samples.toggles.RadioButtonExamples
@@ -312,19 +313,6 @@ private val ProgressTracker = Component(
     configurator = ProgressTrackerConfigurator,
 )
 
-private val TextLinks = Component(
-    id = nextId(),
-    name = "TextLinks",
-    description = R.string.component_textlink_description,
-    illustration = R.drawable.icon_textlink,
-    tintIcon = false,
-    guidelinesUrl = "$ComponentGuidelinesUrl/p/75ed11-textlink/b/403107",
-    docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.text/index.html",
-    sourceUrl = "$SparkSourceUrl/kotlin/com/adevinta/components/text/TextLink.kt",
-    examples = TextLinksExamples,
-    configurator = TextLinksConfigurator,
-)
-
 private val Sliders = Component(
     id = nextId(),
     name = "Slider",
@@ -345,10 +333,23 @@ private val TextFields = Component(
     guidelinesUrl = "$ComponentGuidelinesUrl/p/773c60-input--text-field/b/0658e2",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.textfields/index.html",
     sourceUrl = "$SparkSourceUrl/kotlin/com/adevinta/components/textfields/TextField.kt",
-    examples = emptyList(),
+    examples = TextFieldsExamples,
     configurator = TextFieldsConfigurator,
 )
 
+private val TextLinks = Component(
+    id = nextId(),
+    name = "TextLinks",
+    description = R.string.component_textlink_description,
+    illustration = R.drawable.icon_textlink,
+    tintIcon = false,
+    guidelinesUrl = "$ComponentGuidelinesUrl/p/75ed11-textlink/b/403107",
+    docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.text/index.html",
+    sourceUrl = "$SparkSourceUrl/kotlin/com/adevinta/components/text/TextLink.kt",
+    examples = TextLinksExamples,
+    configurator = TextLinksConfigurator,
+)
+
 private val Tokens = Component(
     id = nextId(),
     name = "Tokens",

spark-screenshot-testing/src/test/kotlin/com/adevinta/spark/textfields/TextFieldScreenshot.kt

@@ -31,6 +31,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.adevinta.spark.DefaultTestDevices
+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
@@ -147,6 +148,7 @@ internal class TextFieldScreenshot {
         }
     }
 
+    @OptIn(ExperimentalSparkApi::class)
     @Composable
     private fun TextFields(
         modifier: Modifier = Modifier,
@@ -157,7 +159,7 @@ internal class TextFieldScreenshot {
     ) {
         val leadingContent: (@Composable AddonScope.() -> Unit)? = icon?.let {
             @Composable {
-                Icon(icon, contentDescription = null)
+                TextFieldIconButton(icon = icon, contentDescription = null, onClick = {})
             }
         }
         val trailingContent: (@Composable AddonScope.() -> Unit)? = icon?.let {