Merge pull request #3834 from element-hq/feature/fga/design_system_te…

…xt_field Design system : implement new TextField
element-hq · Nov 12, 2024 · cffd2da · cffd2da
2 parents c4b4255 + 324b3d0
commit cffd2da
Show file tree

Hide file tree

Showing 188 changed files with 803 additions and 887 deletions.
diff --git a/...ain/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt b/...ain/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt
@@ -23,7 +23,6 @@ import androidx.compose.foundation.selection.selectableGroup
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -36,16 +35,17 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.features.createroom.impl.R
+import io.element.android.libraries.architecture.coverage.ExcludeFromCoverage
 import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
 import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
-import io.element.android.libraries.designsystem.components.LabelledTextField
 import io.element.android.libraries.designsystem.components.async.AsyncActionView
 import io.element.android.libraries.designsystem.components.async.AsyncActionViewDefaults
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.modifiers.clearFocusOnTap
-import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.preview.PreviewWithLargeHeight
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 import io.element.android.libraries.designsystem.theme.components.ListItem
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -217,7 +217,7 @@ private fun RoomNameWithAvatar(
             modifier = Modifier.clickable(onClick = onAvatarClick),
         )
 
-        LabelledTextField(
+        TextField(
             label = stringResource(R.string.screen_create_room_room_name_label),
             value = roomName,
             placeholder = stringResource(CommonStrings.common_room_name_placeholder),
@@ -233,7 +233,7 @@ private fun RoomTopic(
     onTopicChange: (String) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    LabelledTextField(
+    TextField(
         modifier = modifier,
         label = stringResource(R.string.screen_create_room_topic_label),
         value = topic,
@@ -322,51 +322,43 @@ private fun RoomAddressField(
     onAddressChange: (String) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-    ) {
-        Text(
-            modifier = Modifier.padding(horizontal = 16.dp),
-            style = ElementTheme.typography.fontBodyMdRegular,
-            color = MaterialTheme.colorScheme.primary,
-            text = stringResource(R.string.screen_create_room_room_address_section_title),
-        )
-
-        TextField(
-            modifier = Modifier.fillMaxWidth(),
-            value = address.value,
-            leadingIcon = {
-                Text(
-                    text = "#",
-                    style = ElementTheme.typography.fontBodyLgMedium,
-                    color = ElementTheme.colors.textSecondary,
-                )
-            },
-            trailingIcon = {
-                Text(
-                    text = homeserverName,
-                    style = ElementTheme.typography.fontBodyLgMedium,
-                    color = ElementTheme.colors.textSecondary,
-                    modifier = Modifier.padding(end = 16.dp)
-                )
-            },
-            supportingText = {
-                Text(
-                    text = stringResource(R.string.screen_create_room_room_address_section_footer),
-                    style = ElementTheme.typography.fontBodySmRegular,
-                    color = ElementTheme.colors.textSecondary,
-                )
-            },
-            onValueChange = onAddressChange,
-            singleLine = true,
-        )
-    }
+    TextField(
+        modifier = modifier.fillMaxWidth(),
+        value = address.value,
+        label = stringResource(R.string.screen_create_room_room_address_section_title),
+        leadingIcon = {
+            Text(
+                text = "#",
+                style = ElementTheme.typography.fontBodyLgMedium,
+                color = ElementTheme.colors.textSecondary,
+            )
+        },
+        trailingIcon = {
+            Text(
+                text = homeserverName,
+                style = ElementTheme.typography.fontBodyLgMedium,
+                color = ElementTheme.colors.textSecondary,
+            )
+        },
+        supportingText = stringResource(R.string.screen_create_room_room_address_section_footer),
+        onValueChange = onAddressChange,
+        singleLine = true,
+    )
 }
 
-@PreviewsDayNight
+@PreviewWithLargeHeight
+@Composable
+internal fun ConfigureRoomViewLightPreview(@PreviewParameter(ConfigureRoomStateProvider::class) state: ConfigureRoomState) =
+    ElementPreviewLight { ContentToPreview(state) }
+
+@PreviewWithLargeHeight
+@Composable
+internal fun ConfigureRoomViewDarkPreview(@PreviewParameter(ConfigureRoomStateProvider::class) state: ConfigureRoomState) =
+    ElementPreviewDark { ContentToPreview(state) }
+
+@ExcludeFromCoverage
 @Composable
-internal fun ConfigureRoomViewPreview(@PreviewParameter(ConfigureRoomStateProvider::class) state: ConfigureRoomState) = ElementPreview {
+private fun ContentToPreview(state: ConfigureRoomState) {
     ConfigureRoomView(
         state = state,
         onBackClick = {},

diff --git a/...n/impl/src/main/kotlin/io/element/android/features/logout/impl/AccountDeactivationView.kt b/...n/impl/src/main/kotlin/io/element/android/features/logout/impl/AccountDeactivationView.kt
@@ -9,7 +9,9 @@
 
 package io.element.android.features.logout.impl
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
@@ -52,19 +54,18 @@ import io.element.android.libraries.designsystem.atomic.organisms.InfoListOrgani
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.form.textFieldState
 import io.element.android.libraries.designsystem.components.list.SwitchListItem
+import io.element.android.libraries.designsystem.modifiers.autofill
+import io.element.android.libraries.designsystem.modifiers.onTabOrEnterKeyFocusNext
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.buildAnnotatedStringWithStyledPart
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Icon
-import io.element.android.libraries.designsystem.theme.components.IconButton
-import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 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.TopAppBar
-import io.element.android.libraries.designsystem.theme.components.autofill
-import io.element.android.libraries.designsystem.theme.components.onTabOrEnterKeyFocusNext
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -257,26 +258,21 @@ private fun Content(
             )
         }
 
-        Column(
+        Box(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(top = 16.dp),
         ) {
-            Text(
-                text = stringResource(CommonStrings.action_confirm_password),
-                style = ElementTheme.typography.fontBodySmMedium,
-                color = ElementTheme.colors.textSecondary,
-            )
             var passwordVisible by remember { mutableStateOf(false) }
             if (isLoading) {
                 // Ensure password is hidden when user submits the form
                 passwordVisible = false
             }
-            OutlinedTextField(
+            TextField(
                 value = passwordFieldState,
+                label = stringResource(CommonStrings.action_confirm_password),
                 readOnly = isLoading,
                 modifier = Modifier
-                    .padding(top = 8.dp)
                     .fillMaxWidth()
                     .onTabOrEnterKeyFocusNext(focusManager)
                     .testTag(TestTags.loginPassword)
@@ -293,17 +289,15 @@ private fun Content(
                     passwordFieldState = sanitized
                     eventSink(AccountDeactivationEvents.SetPassword(sanitized))
                 },
-                placeholder = {
-                    Text(text = stringResource(CommonStrings.common_password))
-                },
+                placeholder = stringResource(CommonStrings.common_password),
                 visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
                 trailingIcon = {
                     val image =
                         if (passwordVisible) CompoundIcons.VisibilityOn() else CompoundIcons.VisibilityOff()
                     val description =
                         if (passwordVisible) stringResource(CommonStrings.a11y_hide_password) else stringResource(CommonStrings.a11y_show_password)
 
-                    IconButton(onClick = { passwordVisible = !passwordVisible }) {
+                    Box(modifier = Modifier.clickable { passwordVisible = !passwordVisible }) {
                         Icon(imageVector = image, description)
                     }
                 },

diff --git a/...s/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt b/...s/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt
@@ -60,8 +60,8 @@ import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.ButtonSize
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
-import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
 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.TopAppBar
 import io.element.android.libraries.matrix.api.core.RoomIdOrAlias
 import io.element.android.libraries.matrix.api.room.RoomType
@@ -390,19 +390,13 @@ private fun DefaultLoadedContent(
                     )
                 } else if (contentState.joinAuthorisationStatus is JoinAuthorisationStatus.CanKnock) {
                     Spacer(modifier = Modifier.height(24.dp))
-                    OutlinedTextField(
+                    TextField(
                         value = knockMessage,
                         onValueChange = onKnockMessageUpdate,
                         maxLines = 3,
                         minLines = 3,
-                        modifier = Modifier.fillMaxWidth()
-                    )
-                    Text(
-                        text = stringResource(R.string.screen_join_room_knock_message_description),
-                        style = ElementTheme.typography.fontBodySmRegular,
-                        color = ElementTheme.colors.textPlaceholder,
-                        textAlign = TextAlign.Start,
-                        modifier = Modifier.fillMaxWidth()
+                        modifier = Modifier.fillMaxWidth(),
+                        supportingText = stringResource(R.string.screen_join_room_knock_message_description)
                     )
                 }
             }

diff --git a/.../kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt b/.../kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt
@@ -7,6 +7,7 @@
 
 package io.element.android.features.login.impl.screens.loginpassword
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -52,17 +53,15 @@ import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.form.textFieldState
+import io.element.android.libraries.designsystem.modifiers.autofill
+import io.element.android.libraries.designsystem.modifiers.onTabOrEnterKeyFocusNext
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Icon
-import io.element.android.libraries.designsystem.theme.components.IconButton
-import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
 import io.element.android.libraries.designsystem.theme.components.Scaffold
-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.TopAppBar
-import io.element.android.libraries.designsystem.theme.components.autofill
-import io.element.android.libraries.designsystem.theme.components.onTabOrEnterKeyFocusNext
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -101,12 +100,12 @@ fun LoginPasswordView(
 
         Column(
             modifier = Modifier
-                .fillMaxSize()
-                .imePadding()
-                .padding(padding)
-                .consumeWindowInsets(padding)
-                .verticalScroll(state = scrollState)
-                .padding(start = 20.dp, end = 20.dp, bottom = 20.dp),
+                    .fillMaxSize()
+                    .imePadding()
+                    .padding(padding)
+                    .consumeWindowInsets(padding)
+                    .verticalScroll(state = scrollState)
+                    .padding(start = 20.dp, end = 20.dp, bottom = 20.dp),
         ) {
             // Title
             IconTitleSubtitleMolecule(
@@ -140,8 +139,8 @@ fun LoginPasswordView(
                         onClick = ::submit,
                         enabled = state.submitEnabled || isLoading,
                         modifier = Modifier
-                            .fillMaxWidth()
-                            .testTag(TestTags.loginContinue)
+                                .fillMaxWidth()
+                                .testTag(TestTags.loginContinue)
                     )
                     Spacer(modifier = Modifier.height(48.dp))
                 }
@@ -170,16 +169,10 @@ private fun LoginForm(
     val eventSink = state.eventSink
 
     Column {
-        Text(
-            text = stringResource(R.string.screen_login_form_header),
-            modifier = Modifier.padding(start = 16.dp),
-            style = ElementTheme.typography.fontBodyMdRegular,
-        )
-
-        Spacer(modifier = Modifier.height(8.dp))
-        OutlinedTextField(
+        TextField(
+            label = stringResource(R.string.screen_login_form_header),
             value = loginFieldState,
-            readOnly = isLoading,
+            enabled = !isLoading,
             modifier = Modifier
                 .fillMaxWidth()
                 .onTabOrEnterKeyFocusNext(focusManager)
@@ -192,9 +185,7 @@ private fun LoginForm(
                         eventSink(LoginPasswordEvents.SetLogin(sanitized))
                     }
                 ),
-            placeholder = {
-                Text(text = stringResource(CommonStrings.common_username))
-            },
+            placeholder = stringResource(CommonStrings.common_username),
             onValueChange = {
                 val sanitized = it.sanitize()
                 loginFieldState = sanitized
@@ -210,10 +201,14 @@ private fun LoginForm(
             singleLine = true,
             trailingIcon = if (loginFieldState.isNotEmpty()) {
                 {
-                    IconButton(onClick = {
+                    Box(Modifier.clickable {
                         loginFieldState = ""
                     }) {
-                        Icon(imageVector = CompoundIcons.Close(), contentDescription = stringResource(CommonStrings.action_clear))
+                        Icon(
+                            imageVector = CompoundIcons.Close(),
+                            contentDescription = stringResource(CommonStrings.action_clear),
+                            tint = ElementTheme.colors.iconSecondary
+                        )
                     }
                 }
             } else {
@@ -226,9 +221,9 @@ private fun LoginForm(
             passwordVisible = false
         }
         Spacer(Modifier.height(20.dp))
-        OutlinedTextField(
+        TextField(
             value = passwordFieldState,
-            readOnly = isLoading,
+            enabled = !isLoading,
             modifier = Modifier
                 .fillMaxWidth()
                 .onTabOrEnterKeyFocusNext(focusManager)
@@ -246,18 +241,18 @@ private fun LoginForm(
                 passwordFieldState = sanitized
                 eventSink(LoginPasswordEvents.SetPassword(sanitized))
             },
-            placeholder = {
-                Text(text = stringResource(CommonStrings.common_password))
-            },
+            placeholder = stringResource(CommonStrings.common_password),
             visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
             trailingIcon = {
                 val image =
                     if (passwordVisible) CompoundIcons.VisibilityOn() else CompoundIcons.VisibilityOff()
                 val description =
                     if (passwordVisible) stringResource(CommonStrings.a11y_hide_password) else stringResource(CommonStrings.a11y_show_password)
-
-                IconButton(onClick = { passwordVisible = !passwordVisible }) {
-                    Icon(imageVector = image, description)
+                Box(Modifier.clickable { passwordVisible = !passwordVisible }) {
+                    Icon(
+                        imageVector = image,
+                        contentDescription = description,
+                    )
                 }
             },
             keyboardOptions = KeyboardOptions(