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

Design system : implement new TextField

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/edit/RoomDetailsEditView.kt

@@ -9,7 +9,6 @@
 
 package io.element.android.features.roomdetails.impl.edit
 
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -21,7 +20,6 @@ import androidx.compose.foundation.rememberScrollState
 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
@@ -33,7 +31,6 @@ 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.roomdetails.impl.R
-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.avatar.AvatarSize
@@ -45,6 +42,7 @@ import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 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.TextButton
+import io.element.android.libraries.designsystem.theme.components.TextField
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.matrix.ui.components.AvatarActionBottomSheet
 import io.element.android.libraries.matrix.ui.components.EditableAvatarView
@@ -110,40 +108,28 @@ fun RoomDetailsEditView(
             )
             Spacer(modifier = Modifier.height(60.dp))
 
-            if (state.canChangeName) {
-                LabelledTextField(
-                    label = stringResource(id = R.string.screen_room_details_room_name_label),
-                    value = state.roomRawName,
-                    placeholder = stringResource(CommonStrings.common_room_name_placeholder),
-                    singleLine = true,
-                    onValueChange = { state.eventSink(RoomDetailsEditEvents.UpdateRoomName(it)) },
-                )
-            } else {
-                LabelledReadOnlyField(
-                    title = stringResource(R.string.screen_room_details_room_name_label),
-                    value = state.roomRawName
-                )
-            }
+            TextField(
+                label = stringResource(id = R.string.screen_room_details_room_name_label),
+                value = state.roomRawName,
+                placeholder = stringResource(CommonStrings.common_room_name_placeholder),
+                singleLine = true,
+                readOnly = !state.canChangeName,
+                onValueChange = { state.eventSink(RoomDetailsEditEvents.UpdateRoomName(it)) },
+            )
 
             Spacer(modifier = Modifier.height(28.dp))
 
-            if (state.canChangeTopic) {
-                LabelledTextField(
-                    label = stringResource(CommonStrings.common_topic),
-                    value = state.roomTopic,
-                    placeholder = stringResource(CommonStrings.common_topic_placeholder),
-                    maxLines = 10,
-                    onValueChange = { state.eventSink(RoomDetailsEditEvents.UpdateRoomTopic(it)) },
-                    keyboardOptions = KeyboardOptions(
-                        capitalization = KeyboardCapitalization.Sentences,
-                    ),
-                )
-            } else {
-                LabelledReadOnlyField(
-                    title = stringResource(R.string.screen_room_details_topic_title),
-                    value = state.roomTopic
-                )
-            }
+            TextField(
+                label = stringResource(CommonStrings.common_topic),
+                value = state.roomTopic,
+                placeholder = stringResource(CommonStrings.common_topic_placeholder),
+                maxLines = 10,
+                readOnly = !state.canChangeTopic,
+                onValueChange = { state.eventSink(RoomDetailsEditEvents.UpdateRoomTopic(it)) },
+                keyboardOptions = KeyboardOptions(
+                    capitalization = KeyboardCapitalization.Sentences,
+                ),
+            )
         }
     }
 
@@ -171,30 +157,6 @@ fun RoomDetailsEditView(
     )
 }
 
-@Composable
-private fun LabelledReadOnlyField(
-    title: String,
-    value: String,
-) {
-    Column(
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-    ) {
-        Text(
-            modifier = Modifier.padding(horizontal = 16.dp),
-            style = ElementTheme.typography.fontBodyMdRegular,
-            color = MaterialTheme.colorScheme.primary,
-            text = title,
-        )
-
-        Text(
-            modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 12.dp),
-            style = MaterialTheme.typography.bodyLarge,
-            color = MaterialTheme.colorScheme.primary,
-            text = value,
-        )
-    }
-}
-
 @PreviewsDayNight
 @Composable
 internal fun RoomDetailsEditViewPreview(@PreviewParameter(RoomDetailsEditStateProvider::class) state: RoomDetailsEditState) = ElementPreview {

features/roomdetails/impl/src/test/kotlin/io/element/android/features/roomdetails/edit/RoomDetailsEditViewTest.kt

@@ -9,9 +9,9 @@ package io.element.android.features.roomdetails.edit
 
 import androidx.activity.ComponentActivity
 import androidx.annotation.StringRes
-import androidx.compose.ui.test.assertHasClickAction
-import androidx.compose.ui.test.assertHasNoClickAction
+import androidx.compose.ui.test.assert
 import androidx.compose.ui.test.hasTestTag
+import androidx.compose.ui.test.isEditable
 import androidx.compose.ui.test.junit4.AndroidComposeTestRule
 import androidx.compose.ui.test.junit4.createAndroidComposeRule
 import androidx.compose.ui.test.onNodeWithText
@@ -78,7 +78,6 @@ class RoomDetailsEditViewTest {
                 roomRawName = "Marketing",
             ),
         )
-        rule.onNodeWithText("Marketing").assertHasClickAction()
         rule.onNodeWithText("Marketing").performTextInput("A")
         eventsRecorder.assertSingle(RoomDetailsEditEvents.UpdateRoomName("AMarketing"))
     }
@@ -93,7 +92,7 @@ class RoomDetailsEditViewTest {
                 canChangeName = false,
             ),
         )
-        rule.onNodeWithText("Marketing").assertHasNoClickAction()
+        rule.onNodeWithText("Marketing").assert(!isEditable())
     }
 
     @Test
@@ -105,7 +104,6 @@ class RoomDetailsEditViewTest {
                 roomTopic = "My Topic",
             ),
         )
-        rule.onNodeWithText("My Topic").assertHasClickAction()
         rule.onNodeWithText("My Topic").performTextInput("A")
         eventsRecorder.assertSingle(RoomDetailsEditEvents.UpdateRoomTopic("AMy Topic"))
     }
@@ -120,7 +118,7 @@ class RoomDetailsEditViewTest {
                 canChangeTopic = false,
             ),
         )
-        rule.onNodeWithText("My Topic").assertHasNoClickAction()
+        rule.onNodeWithText("My Topic").assert(!isEditable())
     }
 
     @Ignore("This test is failing because the bottom sheet does not open")