Replace OutlinedTextField by our TextField (#4521)

* Let TextFieldListItem take the entire width. * Add unit test to detect usage of OutlinedTextField. * Use TextField instead of OutlinedTextField * Remove unnecessary opt in to ExperimentalFoundationApi * Use TextField instead of OutlinedTextField * Fix compilation issue. * Update screenshots * ListDialog: add space between items. * Update screenshots * Set applyPaddingToContents to true by default. * Update screenshots --------- Co-authored-by: ElementBot <android@element.io>
2025-04-02 16:04:07 +02:00
parent a8a5b55c81
commit a3ce1d484d
37 changed files with 86 additions and 167 deletions
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ListDialog.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ListDialog.kt
@@ -7,6 +7,7 @@

 package io.element.android.libraries.designsystem.components.dialogs

+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
@@ -38,7 +39,7 @@ fun ListDialog(
    cancelText: String = stringResource(CommonStrings.action_cancel),
    submitText: String = stringResource(CommonStrings.action_ok),
    enabled: Boolean = true,
-    applyPaddingToContents: Boolean = false,
+    applyPaddingToContents: Boolean = true,
    listItems: LazyListScope.() -> Unit,
 ) {
    val decoratedSubtitle: @Composable (() -> Unit)? = subtitle?.let {
@@ -92,7 +93,8 @@ private fun ListDialogContent(
        // No start padding if padding is already applied to the content
        val horizontalPadding = if (applyPaddingToContents) 0.dp else 8.dp
        LazyColumn(
-            modifier = Modifier.padding(horizontal = horizontalPadding)
+            modifier = Modifier.padding(horizontal = horizontalPadding),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) { listItems() }
    }
 }
@@ -117,7 +119,7 @@ internal fun ListDialogContentPreview() {
                cancelText = "Cancel",
                submitText = "Save",
                enabled = true,
-                applyPaddingToContents = false,
+                applyPaddingToContents = true,
            )
        }
    }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/TextFieldDialog.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/TextFieldDialog.kt
@@ -7,6 +7,7 @@

 package io.element.android.libraries.designsystem.components.dialogs

+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
@@ -44,7 +45,6 @@ fun TextFieldDialog(
    maxLines: Int = 1,
    content: String? = null,
    label: String? = null,
-    withBorder: Boolean = false,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    submitText: String = stringResource(CommonStrings.action_ok),
 ) {
@@ -65,7 +65,6 @@ fun TextFieldDialog(
        onSubmit = { onSubmit(textFieldContents.text) },
        onDismissRequest = onDismissRequest,
        enabled = canSubmit,
-        applyPaddingToContents = content.isNullOrEmpty().not(),
        submitText = submitText,
        modifier = modifier,
    ) {
@@ -81,7 +80,6 @@ fun TextFieldDialog(
            TextFieldListItem(
                placeholder = placeholder.orEmpty(),
                label = label,
-                withBorder = withBorder,
                text = textFieldContents,
                onTextChange = {
                    error = if (!validation(it.text)) onValidationErrorMessage else null
@@ -95,7 +93,9 @@ fun TextFieldDialog(
                    }
                }),
                maxLines = maxLines,
-                modifier = Modifier.focusRequester(focusRequester),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .focusRequester(focusRequester),
            )
            canRequestFocus = true
        }
@@ -120,22 +120,6 @@ internal fun TextFieldDialogPreview() = ElementPreview {
    )
 }

-@PreviewsDayNight
-@Composable
-internal fun TextFieldDialogWithBorderPreview() = ElementPreview {
-    TextFieldDialog(
-        title = "Title",
-        content = "Some content",
-        onSubmit = {},
-        onDismissRequest = {},
-        value = "Value",
-        placeholder = "Placeholder",
-        label = "Label",
-        withBorder = true,
-        onValidationErrorMessage = "Error message",
-    )
-}
-
@PreviewsDayNight
@Composable
 internal fun TextFieldDialogWithErrorPreview() = ElementPreview {
@@ -148,7 +132,6 @@ internal fun TextFieldDialogWithErrorPreview() = ElementPreview {
        value = "Value",
        placeholder = "Placeholder",
        label = "Label",
-        withBorder = true,
        onValidationErrorMessage = "Error message",
    )
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/list/TextFieldListItem.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/list/TextFieldListItem.kt
@@ -9,17 +9,14 @@ package io.element.android.libraries.designsystem.components.list

 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
-import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TextField
+import io.element.android.libraries.designsystem.theme.components.TextFieldValidity

@Composable
 fun TextFieldListItem(
@@ -29,33 +26,19 @@ fun TextFieldListItem(
    modifier: Modifier = Modifier,
    error: String? = null,
    maxLines: Int = 1,
-    withBorder: Boolean = false,
    label: String? = null,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
 ) {
-    val textFieldStyle = ElementTheme.materialTypography.bodyLarge
-
-    OutlinedTextField(
+    TextField(
        value = text,
        onValueChange = { onTextChange(it) },
-        placeholder = placeholder?.let { @Composable { Text(it) } },
-        label = label?.let { @Composable { Text(it) } },
-        colors = if (withBorder) {
-            OutlinedTextFieldDefaults.colors()
-        } else {
-            OutlinedTextFieldDefaults.colors(
-                disabledBorderColor = Color.Transparent,
-                errorBorderColor = Color.Transparent,
-                focusedBorderColor = Color.Transparent,
-                unfocusedBorderColor = Color.Transparent,
-            )
-        },
-        isError = error != null,
-        supportingText = error?.let { @Composable { Text(it) } },
+        placeholder = placeholder,
+        label = label,
+        validity = if (error != null) TextFieldValidity.Invalid else TextFieldValidity.None,
+        supportingText = error,
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
-        textStyle = textFieldStyle,
        maxLines = maxLines,
        singleLine = maxLines == 1,
        modifier = modifier,
@@ -70,33 +53,19 @@ fun TextFieldListItem(
    modifier: Modifier = Modifier,
    error: String? = null,
    maxLines: Int = 1,
-    withBorder: Boolean = false,
    label: String? = null,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
 ) {
-    val textFieldStyle = ElementTheme.materialTypography.bodyLarge
-
-    OutlinedTextField(
+    TextField(
        value = text,
        onValueChange = { onTextChange(it) },
-        placeholder = placeholder?.let { @Composable { Text(it) } },
-        label = label?.let { @Composable { Text(it) } },
-        colors = if (withBorder) {
-            OutlinedTextFieldDefaults.colors()
-        } else {
-            OutlinedTextFieldDefaults.colors(
-                disabledBorderColor = Color.Transparent,
-                errorBorderColor = Color.Transparent,
-                focusedBorderColor = Color.Transparent,
-                unfocusedBorderColor = Color.Transparent,
-            )
-        },
-        isError = error != null,
-        supportingText = error?.let { @Composable { Text(it) } },
+        placeholder = placeholder,
+        label = label,
+        validity = if (error != null) TextFieldValidity.Invalid else TextFieldValidity.None,
+        supportingText = error,
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
-        textStyle = textFieldStyle,
        maxLines = maxLines,
        singleLine = maxLines == 1,
        modifier = modifier,
@@ -138,31 +107,3 @@ internal fun TextFieldListItemTextFieldValuePreview() {
        )
    }
 }
-
-@Preview("Text field List item with border - empty", group = PreviewGroup.ListItems)
-@Composable
-internal fun TextFieldListItemWithBorderEmptyPreview() {
-    ElementThemedPreview {
-        TextFieldListItem(
-            placeholder = "Placeholder",
-            label = "Label",
-            text = "",
-            withBorder = true,
-            onTextChange = {},
-        )
-    }
-}
-
-@Preview("Text field List item with border - text", group = PreviewGroup.ListItems)
-@Composable
-internal fun TextFieldListItemWithBorderPreview() {
-    ElementThemedPreview {
-        TextFieldListItem(
-            placeholder = "Placeholder",
-            label = "Label",
-            text = "Text",
-            withBorder = true,
-            onTextChange = {},
-        )
-    }
-}