From bdc96da04fb870d2e1dbd71aad2d03e786bf0396 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 15 Feb 2023 12:57:08 +0100 Subject: [PATCH] Improve preview for OutlinedTextField and TextField --- .../theme/components/OutlinedTextField.kt | 31 +++++++++++++------ .../theme/components/TextField.kt | 25 ++++++++++++++- .../designsystem/utils/Extensions.kt | 21 +++++++++++++ ...FieldsDarkPreview_0_null,NEXUS_5,1,en].png | 4 +-- ...ieldsLightPreview_0_null,NEXUS_5,1,en].png | 4 +-- ...tFieldDarkPreview_0_null,NEXUS_5,1,en].png | 4 +-- ...FieldLightPreview_0_null,NEXUS_5,1,en].png | 4 +-- 7 files changed, 75 insertions(+), 18 deletions(-) create mode 100644 libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/Extensions.kt diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/OutlinedTextField.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/OutlinedTextField.kt index 5a5b56e96c..72e2fb64e4 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/OutlinedTextField.kt +++ b/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)) + } + } + } } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt index e9f6502fba..4884217b0c 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt +++ b/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)) + } + } + } + } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/Extensions.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/Extensions.kt new file mode 100644 index 0000000000..a6fa194fca --- /dev/null +++ b/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) diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsDarkPreview_0_null,NEXUS_5,1,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsDarkPreview_0_null,NEXUS_5,1,en].png index fb679b5908..12b3b8a837 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsDarkPreview_0_null,NEXUS_5,1,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsDarkPreview_0_null,NEXUS_5,1,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e842ff561687f991106043a4f6b51455bd917db879ef1d624bd59df155ac61dd -size 21932 +oid sha256:a341207d89b9d841068b1b0d378de75c14abfa5f413fd07238cd125f62cf0b2b +size 42348 diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsLightPreview_0_null,NEXUS_5,1,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsLightPreview_0_null,NEXUS_5,1,en].png index 36cc8f6ff1..9effbfcb09 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsLightPreview_0_null,NEXUS_5,1,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_OutlinedTextFieldsLightPreview_0_null,NEXUS_5,1,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6c0ef4d55a1a21fdcec03d5f95871cb0bea94350cbfc5ed7a50cc343df7898ec -size 21054 +oid sha256:4407122130f821256fb19572f50aef531602376d80b4ad0d41ac98558a5552dd +size 37212 diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldDarkPreview_0_null,NEXUS_5,1,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldDarkPreview_0_null,NEXUS_5,1,en].png index 89aafe0d0b..458ab349c5 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldDarkPreview_0_null,NEXUS_5,1,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldDarkPreview_0_null,NEXUS_5,1,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7363a82f68682a66bef4f1742a240afc8da4735aceaecb51ee3472a9db2926a3 -size 5954 +oid sha256:a4126bd250551e094a1904761c0d49bb4404dda771919ec5fd80d9b088d0e2d4 +size 37904 diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldLightPreview_0_null,NEXUS_5,1,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldLightPreview_0_null,NEXUS_5,1,en].png index aeacea07de..98892bdbb7 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldLightPreview_0_null,NEXUS_5,1,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextFieldLightPreview_0_null,NEXUS_5,1,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9c31f19f2c19bf94a71bda62792ae710e06e8cec4801c24fe11fbbb2543bcf19 -size 5923 +oid sha256:c2243658ecef2ec5560f017e8ffe3e3c5549ddaf67116e420c8e70b0603e3013 +size 38325