Improve preview for OutlinedTextField and TextField

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/OutlinedTextField.kt

@@ -18,6 +18,9 @@ package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -31,8 +34,11 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.utils.allBooleans
+import io.element.android.libraries.designsystem.utils.asInt
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -92,14 +98,21 @@ internal fun OutlinedTextFieldsDarkPreview() = ElementPreviewDark { ContentToPre
 
 @Composable
 private fun ContentToPreview() {
-    Column {
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = true, readOnly = true)
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = true, readOnly = false)
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = false, readOnly = true)
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = false, readOnly = false)
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = true, readOnly = true)
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = true, readOnly = false)
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = false, readOnly = true)
-        OutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = false, readOnly = false)
+    Column(modifier = Modifier.padding(4.dp)) {
+        allBooleans.forEach { isError ->
+            allBooleans.forEach { enabled ->
+                allBooleans.forEach { readonly ->
+                    OutlinedTextField(
+                        onValueChange = {},
+                        label = { Text(text = "label") },
+                        value = "Hello er=${isError.asInt()}, en=${enabled.asInt()}, ro=${readonly.asInt()}",
+                        isError = isError,
+                        enabled = enabled,
+                        readOnly = readonly,
+                    )
+                    Spacer(modifier = Modifier.height(2.dp))
+                }
+            }
+        }
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt

@@ -17,6 +17,10 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -30,8 +34,11 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.utils.allBooleans
+import io.element.android.libraries.designsystem.utils.asInt
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -93,5 +100,21 @@ internal fun TextFieldDarkPreview() =
 
 @Composable
 private fun ContentToPreview() {
-    TextField(value = "Hello", onValueChange = {})
+    Column(modifier = Modifier.padding(4.dp)) {
+        allBooleans.forEach { isError ->
+            allBooleans.forEach { enabled ->
+                allBooleans.forEach { readonly ->
+                    TextField(
+                        onValueChange = {},
+                        label = { Text(text = "label") },
+                        value = "Hello er=${isError.asInt()}, en=${enabled.asInt()}, ro=${readonly.asInt()}",
+                        isError = isError,
+                        enabled = enabled,
+                        readOnly = readonly,
+                    )
+                    Spacer(modifier = Modifier.height(2.dp))
+                }
+            }
+        }
+    }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/Extensions.kt

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.utils
+
+internal fun Boolean.asInt(): Int = if (this) 1 else 0
+
+val allBooleans = listOf(false, true)