refactor: introduce BasicTextField2 [WPB-8779] [WPB-8727] (#2991)

Co-authored-by: Vitor Hugo Schwaab <[email protected]>
wireapp · May 14, 2024 · 24769c4 · 24769c4
1 parent bb9e765
commit 24769c4
Show file tree

Hide file tree

Showing 32 changed files with 1,112 additions and 659 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -135,6 +135,7 @@ dependencies {
 
     implementation(libs.compose.ui)
     implementation(libs.compose.foundation)
+    implementation(libs.compose.material.android)
     // we still cannot get rid of material2 because swipeable is still missing - https://issuetracker.google.com/issues/229839039
     // https://developer.android.com/jetpack/compose/designsystems/material2-material3#components-and
     implementation(libs.compose.material.core)

diff --git a/...in/kotlin/com/wire/android/ui/authentication/create/details/CreateAccountDetailsScreen.kt b/...in/kotlin/com/wire/android/ui/authentication/create/details/CreateAccountDetailsScreen.kt
@@ -24,18 +24,15 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
-import com.wire.android.ui.common.scaffold.WireScaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
@@ -122,7 +119,6 @@ fun CreateAccountDetailsScreen(
     }
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun DetailsContent(
     state: CreateAccountDetailsViewState,
@@ -259,7 +255,7 @@ private fun DetailsContent(
                     labelText = stringResource(R.string.create_account_details_confirm_password_label),
                     labelMandatoryIcon = true,
                     imeAction = ImeAction.Done,
-                    keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+                    onImeAction = { keyboardController?.hide() },
                     modifier = Modifier
                         .padding(
                             horizontal = MaterialTheme.wireDimensions.spacing16x,

diff --git a/...c/main/kotlin/com/wire/android/ui/authentication/devices/register/RegisterDeviceScreen.kt b/...c/main/kotlin/com/wire/android/ui/authentication/devices/register/RegisterDeviceScreen.kt
@@ -24,13 +24,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.material3.MaterialTheme
-import com.wire.android.ui.common.scaffold.WireScaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.testTag
@@ -55,6 +52,7 @@ import com.wire.android.ui.common.button.WirePrimaryButton
 import com.wire.android.ui.common.dialogs.CancelLoginDialogContent
 import com.wire.android.ui.common.dialogs.CancelLoginDialogState
 import com.wire.android.ui.common.error.CoreFailureErrorDialog
+import com.wire.android.ui.common.scaffold.WireScaffold
 import com.wire.android.ui.common.textfield.WirePasswordTextField
 import com.wire.android.ui.common.textfield.WireTextFieldState
 import com.wire.android.ui.common.textfield.clearAutofillTree
@@ -183,7 +181,6 @@ private fun RegisterDeviceContent(
     }
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun PasswordTextField(state: RegisterDeviceState, onPasswordChange: (TextFieldValue) -> Unit) {
     val keyboardController = LocalSoftwareKeyboardController.current
@@ -197,7 +194,7 @@ private fun PasswordTextField(state: RegisterDeviceState, onPasswordChange: (Tex
             else -> WireTextFieldState.Default
         },
         imeAction = ImeAction.Done,
-        keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+        onImeAction = { keyboardController?.hide() },
         modifier = Modifier
             .padding(horizontal = MaterialTheme.wireDimensions.spacing16x)
             .testTag("password field"),

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/devices/remove/RemoveDeviceDialog.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/devices/remove/RemoveDeviceDialog.kt
@@ -18,12 +18,10 @@
 package com.wire.android.ui.authentication.devices.remove
 
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
@@ -43,7 +41,6 @@ import com.wire.android.ui.common.textfield.WireTextFieldState
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.util.deviceDateTimeFormat
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun RemoveDeviceDialog(
     errorState: RemoveDeviceError,
@@ -97,7 +94,7 @@ fun RemoveDeviceDialog(
                     else -> WireTextFieldState.Default
                 },
                 imeAction = ImeAction.Done,
-                keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+                onImeAction = { keyboardController?.hide() },
                 modifier = Modifier
                     .focusRequester(focusRequester)
                     .padding(bottom = MaterialTheme.wireDimensions.spacing8x)

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/login/email/LoginEmailScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/login/email/LoginEmailScreen.kt
@@ -29,7 +29,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
@@ -41,7 +40,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.autofill.AutofillType
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.testTag
@@ -62,8 +60,9 @@ import com.wire.android.ui.common.button.WireButtonState
 import com.wire.android.ui.common.button.WirePrimaryButton
 import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.common.rememberBottomBarElevationState
-import com.wire.android.ui.common.textfield.AutoFillTextField
+import com.wire.android.ui.common.textfield.WireAutoFillType
 import com.wire.android.ui.common.textfield.WirePasswordTextField
+import com.wire.android.ui.common.textfield.WireTextField
 import com.wire.android.ui.common.textfield.WireTextFieldState
 import com.wire.android.ui.common.textfield.clearAutofillTree
 import com.wire.android.ui.theme.WireTheme
@@ -207,7 +206,6 @@ private fun LoginEmailContent(
     }
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun UserIdentifierInput(
     modifier: Modifier,
@@ -216,8 +214,8 @@ private fun UserIdentifierInput(
     onUserIdentifierChange: (TextFieldValue) -> Unit,
     isEnabled: Boolean,
 ) {
-    AutoFillTextField(
-        autofillTypes = listOf(AutofillType.EmailAddress, AutofillType.Username),
+    WireTextField(
+        autoFillType = WireAutoFillType.Login,
         value = userIdentifier,
         onValueChange = onUserIdentifierChange,
         placeholderText = stringResource(R.string.login_user_identifier_placeholder),
@@ -233,15 +231,14 @@ private fun UserIdentifierInput(
     )
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun PasswordInput(modifier: Modifier, password: TextFieldValue, onPasswordChange: (TextFieldValue) -> Unit) {
     val keyboardController = LocalSoftwareKeyboardController.current
     WirePasswordTextField(
         value = password,
         onValueChange = onPasswordChange,
         imeAction = ImeAction.Done,
-        keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+        onImeAction = { keyboardController?.hide() },
         modifier = modifier.testTag("passwordField"),
         autofill = true,
         testTag = "PasswordInput"

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/login/email/ProxyScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/login/email/ProxyScreen.kt
@@ -22,13 +22,11 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.testTag
@@ -139,7 +137,6 @@ private fun ProxyIdentifierInput(
     )
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun ProxyPasswordInput(modifier: Modifier, proxyPassword: TextFieldValue, onProxyPasswordChange: (TextFieldValue) -> Unit) {
     val keyboardController = LocalSoftwareKeyboardController.current
@@ -148,7 +145,7 @@ private fun ProxyPasswordInput(modifier: Modifier, proxyPassword: TextFieldValue
         onValueChange = onProxyPasswordChange,
         imeAction = ImeAction.Done,
         labelText = stringResource(R.string.label_proxy_password),
-        keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+        onImeAction = { keyboardController?.hide() },
         modifier = modifier.testTag("passwordField"),
         autofill = false
     )

diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraButton.kt
@@ -22,7 +22,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material.ripple
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -62,7 +62,7 @@ fun CameraButton(
                 .wrapContentSize()
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(
+                    indication = ripple(
                         bounded = false,
                         radius = dimensions().defaultCallingControlsSize / 2
                     ),

diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraFlipButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraFlipButton.kt
@@ -21,7 +21,7 @@ package com.wire.android.ui.calling.controlbuttons
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material.ripple
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -46,7 +46,7 @@ fun CameraFlipButton(
                 .wrapContentSize()
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(bounded = false, radius = dimensions().defaultCallingControlsSize / 2),
+                    indication = ripple(bounded = false, radius = dimensions().defaultCallingControlsSize / 2),
                     role = Role.Button,
                     onClick = onCameraFlipButtonClicked
 

diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/DeclineButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/DeclineButton.kt
@@ -21,7 +21,7 @@ package com.wire.android.ui.calling.controlbuttons
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material.ripple
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
@@ -45,7 +45,7 @@ fun DeclineButton(buttonClicked: () -> Unit) {
             modifier = Modifier
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(
+                    indication = ripple(
                         bounded = false,
                         radius = dimensions().outgoingCallHangUpButtonSize / 2
                     ),

diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/MicrophoneButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/MicrophoneButton.kt
@@ -22,7 +22,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material.ripple
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -49,7 +49,7 @@ fun MicrophoneButton(
                 .wrapContentSize()
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(bounded = false, radius = dimensions().defaultCallingControlsSize / 2),
+                    indication = ripple(bounded = false, radius = dimensions().defaultCallingControlsSize / 2),
                     role = Role.Button,
                     onClick = { onMicrophoneButtonClicked() }
                 ),

diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/SpeakerButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/SpeakerButton.kt
@@ -22,12 +22,11 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material.ripple
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.Role
@@ -50,7 +49,7 @@ fun SpeakerButton(
                 .wrapContentSize()
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(bounded = false, radius = dimensions().defaultCallingControlsSize / 2),
+                    indication = ripple(bounded = false, radius = dimensions().defaultCallingControlsSize / 2),
                     role = Role.Button,
                     onClick = { onSpeakerButtonClicked() }
                 ),

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/AppExtensions.kt b/app/src/main/kotlin/com/wire/android/ui/common/AppExtensions.kt
@@ -21,7 +21,7 @@ package com.wire.android.ui.common
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.selection.selectable
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material.ripple
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
@@ -62,7 +62,7 @@ fun Modifier.selectableBackground(isSelected: Boolean, onClick: () -> Unit): Mod
         selected = isSelected,
         onClick = { onClick() },
         interactionSource = remember { MutableInteractionSource() },
-        indication = rememberRipple(bounded = true, color = MaterialTheme.colorScheme.onBackground.copy(0.5f)),
+        indication = ripple(bounded = true, color = MaterialTheme.colorScheme.onBackground.copy(0.5f)),
         role = Role.Tab
     )