PM-17376, PM-17380, PM-17385: Update card padding and layout (#4652)

bitwarden · Jan 30, 2025 · 9b3bb32 · 9b3bb32
1 parent 6f5cb0d
commit 9b3bb32
Show file tree

Hide file tree

Showing 43 changed files with 606 additions and 856 deletions.
diff --git a/...va/com/x8bit/bitwarden/ui/auth/feature/completeregistration/CompleteRegistrationScreen.kt b/...va/com/x8bit/bitwarden/ui/auth/feature/completeregistration/CompleteRegistrationScreen.kt
@@ -247,7 +247,7 @@ private fun CompleteRegistrationContent(
             onValueChange = handler.onPasswordInputChange,
             showPasswordTestTag = "PasswordVisibilityToggle",
             imeAction = ImeAction.Next,
-            supportingTextContent = {
+            supportingContent = {
                 PasswordStrengthIndicator(
                     state = passwordStrengthState,
                     currentCharacterCount = passwordInput.length,
@@ -286,7 +286,7 @@ private fun CompleteRegistrationContent(
             ),
             value = passwordHintInput,
             onValueChange = handler.onPasswordHintChange,
-            supportingTextContent = {
+            supportingContent = {
                 Text(
                     text = stringResource(
                         id = R.string.bitwarden_cannot_recover_a_lost_or_forgotten_master_password

diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/createaccount/CreateAccountScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/createaccount/CreateAccountScreen.kt
@@ -1,19 +1,13 @@
 package com.x8bit.bitwarden.ui.auth.feature.createaccount
 
 import android.widget.Toast
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -31,6 +25,10 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.CustomAccessibilityAction
+import androidx.compose.ui.semantics.customActions
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
@@ -54,6 +52,7 @@ import com.x8bit.bitwarden.ui.auth.feature.createaccount.CreateAccountEvent.Navi
 import com.x8bit.bitwarden.ui.auth.feature.createaccount.CreateAccountEvent.NavigateToTerms
 import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
 import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin
+import com.x8bit.bitwarden.ui.platform.base.util.toAnnotatedString
 import com.x8bit.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar
 import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenBasicDialog
@@ -63,7 +62,6 @@ import com.x8bit.bitwarden.ui.platform.components.field.BitwardenPasswordField
 import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
 import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
 import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
-import com.x8bit.bitwarden.ui.platform.components.text.BitwardenClickableText
 import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenSwitch
 import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
 import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager
@@ -206,7 +204,7 @@ fun CreateAccountScreen(
                     { viewModel.trySendAction(PasswordInputChange(it)) }
                 },
                 showPasswordTestTag = "PasswordVisibilityToggle",
-                supportingTextContent = {
+                supportingContent = {
                     PasswordStrengthIndicator(
                         modifier = Modifier.fillMaxWidth(),
                         state = state.passwordStrengthState,
@@ -289,7 +287,6 @@ fun CreateAccountScreen(
     }
 }
 
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
 private fun TermsAndPrivacySwitch(
     isChecked: Boolean,
@@ -298,38 +295,39 @@ private fun TermsAndPrivacySwitch(
     onPrivacyPolicyClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val strTerms = stringResource(id = R.string.terms_of_service)
+    val strPrivacy = stringResource(id = R.string.privacy_policy)
+    val annotatedLinkString: AnnotatedString = R.string
+        .by_activating_this_switch_you_agree_to_the_terms_of_service_and_privacy_policy
+        .toAnnotatedString {
+            when (it) {
+                "termsOfService" -> onTermsClick()
+                "privacyPolicy" -> onPrivacyPolicyClick()
+            }
+        }
     BitwardenSwitch(
-        modifier = modifier,
-        label = stringResource(id = R.string.accept_policies),
+        modifier = modifier.semantics(mergeDescendants = true) {
+            customActions = listOf(
+                CustomAccessibilityAction(
+                    label = strTerms,
+                    action = {
+                        onTermsClick()
+                        true
+                    },
+                ),
+                CustomAccessibilityAction(
+                    label = strPrivacy,
+                    action = {
+                        onPrivacyPolicyClick()
+                        true
+                    },
+                ),
+            )
+        },
+        label = annotatedLinkString,
         isChecked = isChecked,
         contentDescription = "AcceptPoliciesToggle",
         onCheckedChange = onCheckedChange,
-        supportingTextContent = {
-            FlowRow(
-                horizontalArrangement = Arrangement.Start,
-                modifier = Modifier.fillMaxWidth(),
-            ) {
-                BitwardenClickableText(
-                    label = stringResource(id = R.string.terms_of_service),
-                    onClick = onTermsClick,
-                    style = BitwardenTheme.typography.bodyMedium,
-                    innerPadding = PaddingValues(vertical = 8.dp, horizontal = 0.dp),
-                )
-                Text(
-                    text = ",",
-                    style = BitwardenTheme.typography.bodyMedium,
-                    color = BitwardenTheme.colorScheme.text.primary,
-                    modifier = Modifier.padding(vertical = 4.dp),
-                )
-                Spacer(modifier = Modifier.width(4.dp))
-                BitwardenClickableText(
-                    label = stringResource(id = R.string.privacy_policy),
-                    onClick = onPrivacyPolicyClick,
-                    style = BitwardenTheme.typography.bodyMedium,
-                    innerPadding = PaddingValues(vertical = 8.dp, horizontal = 0.dp),
-                )
-            }
-        },
         cardStyle = CardStyle.Bottom,
     )
 }
diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt
@@ -3,6 +3,7 @@ package com.x8bit.bitwarden.ui.auth.feature.landing
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -245,12 +246,15 @@ private fun LandingScreenContent(
             keyboardType = KeyboardType.Email,
             textFieldTestTag = "EmailAddressEntry",
             cardStyle = CardStyle.Full,
-            supportingTextContent = {
+            supportingContentPadding = PaddingValues(),
+            supportingContent = {
                 EnvironmentSelector(
                     labelText = stringResource(id = R.string.logging_in_on_with_colon),
                     dialogTitle = stringResource(id = R.string.logging_in_on),
                     selectedOption = state.selectedEnvironmentType,
                     onOptionSelected = onEnvironmentTypeSelect,
+                    isHelpEnabled = false,
+                    onHelpClick = {},
                     modifier = Modifier
                         .testTag("RegionSelectorDropdown")
                         .fillMaxWidth(),

diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/login/LoginScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/login/LoginScreen.kt
@@ -239,18 +239,17 @@ private fun LoginScreenContent(
             onValueChange = onPasswordInputChanged,
             label = stringResource(id = R.string.master_password),
             showPasswordTestTag = "PasswordVisibilityToggle",
-            supportingTextContent = {
+            supportingContentPadding = PaddingValues(),
+            supportingContent = {
                 BitwardenClickableText(
                     label = stringResource(id = R.string.get_master_passwordword_hint),
                     onClick = onMasterPasswordClick,
                     style = BitwardenTheme.typography.labelMedium,
-                    innerPadding = PaddingValues(
-                        top = 8.dp,
-                        bottom = 8.dp,
-                        start = 0.dp,
-                        end = 16.dp,
-                    ),
-                    modifier = Modifier.testTag("GetMasterPasswordHintLabel"),
+                    innerPadding = PaddingValues(all = 16.dp),
+                    cornerSize = 0.dp,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .testTag(tag = "GetMasterPasswordHintLabel"),
                 )
             },
             passwordFieldTestTag = "MasterPasswordEntry",

diff --git a/...ain/java/com/x8bit/bitwarden/ui/auth/feature/startregistration/StartRegistrationScreen.kt b/...ain/java/com/x8bit/bitwarden/ui/auth/feature/startregistration/StartRegistrationScreen.kt
@@ -4,14 +4,14 @@ import android.widget.Toast
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -54,7 +54,6 @@ import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin
 import com.x8bit.bitwarden.ui.platform.base.util.toAnnotatedString
 import com.x8bit.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar
 import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton
-import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenBasicDialog
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
 import com.x8bit.bitwarden.ui.platform.components.dropdown.EnvironmentSelector
@@ -216,32 +215,19 @@ private fun StartRegistrationContent(
             onValueChange = handler.onEmailInputChange,
             keyboardType = KeyboardType.Email,
             textFieldTestTag = "EmailAddressEntry",
-            supportingTextContent = {
-                Row(
-                    horizontalArrangement = Arrangement.SpaceBetween,
-                    verticalAlignment = Alignment.CenterVertically,
-                    modifier = Modifier.fillMaxWidth(),
-                ) {
-                    EnvironmentSelector(
-                        labelText = stringResource(id = R.string.create_account_on_with_colon),
-                        dialogTitle = stringResource(id = R.string.create_account_on),
-                        selectedOption = selectedEnvironmentType,
-                        onOptionSelected = handler.onEnvironmentTypeSelect,
-                        modifier = Modifier.testTag("RegionSelectorDropdown"),
-                    )
-                    if (isNewOnboardingUiEnabled) {
-                        BitwardenStandardIconButton(
-                            vectorIconRes = R.drawable.ic_question_circle_small,
-                            contentDescription = stringResource(
-                                R.string.help_with_server_geolocations,
-                            ),
-                            onClick = handler.onServerGeologyHelpClick,
-                            contentColor = BitwardenTheme.colorScheme.icon.secondary,
-                            // Align with design but keep accessible touch target of IconButton.
-                            modifier = Modifier.offset(x = 16.dp),
-                        )
-                    }
-                }
+            supportingContentPadding = PaddingValues(),
+            supportingContent = {
+                EnvironmentSelector(
+                    labelText = stringResource(id = R.string.create_account_on_with_colon),
+                    dialogTitle = stringResource(id = R.string.create_account_on),
+                    selectedOption = selectedEnvironmentType,
+                    onOptionSelected = handler.onEnvironmentTypeSelect,
+                    onHelpClick = handler.onServerGeologyHelpClick,
+                    isHelpEnabled = isNewOnboardingUiEnabled,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .testTag(tag = "RegionSelectorDropdown"),
+                )
             },
             cardStyle = CardStyle.Full,
             modifier = Modifier

diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ModifierExtensions.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ModifierExtensions.kt
@@ -1,12 +1,18 @@
+@file:Suppress("TooManyFunctions")
+
 package com.x8bit.bitwarden.ui.platform.base.util
 
 import android.os.Build
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.CombinedModifier
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -33,6 +39,7 @@ import androidx.compose.ui.node.currentValueOf
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.LayoutDirection
@@ -87,6 +94,38 @@ fun Modifier.scrolledContainerBottomDivider(
         enabled = enabled,
     )
 
+/**
+ * This is a [Modifier] extension for adding an optional click listener to a composable.
+ */
+@OmitFromCoverage
+@Stable
+@Composable
+fun Modifier.nullableClickable(
+    indicationColor: Color = BitwardenTheme.colorScheme.background.pressed,
+    enabled: Boolean = true,
+    onClick: (() -> Unit)?,
+): Modifier =
+    onClick
+        ?.let {
+            this.clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = ripple(color = indicationColor),
+                onClick = it,
+                enabled = enabled,
+            )
+        }
+        ?: this
+
+/**
+ * This is a [Modifier] extension for adding an optional test tag to the composable.
+ */
+@OmitFromCoverage
+@Stable
+@Composable
+fun Modifier.nullableTestTag(
+    tag: String?,
+): Modifier = this.run { tag?.let { testTag(tag = it) } ?: this }
+
 /**
  * This is a [Modifier] extension for drawing a divider at the bottom of the composable.
  */

diff --git a/.../main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenDateSelectButton.kt b/.../main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenDateSelectButton.kt
@@ -12,6 +12,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.material3.rememberDatePickerState
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
@@ -39,6 +40,7 @@ import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
 import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldButtonColors
 import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
 import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
+import com.x8bit.bitwarden.ui.platform.components.row.BitwardenRowOfActions
 import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 import com.x8bit.bitwarden.ui.platform.util.orNow
@@ -58,8 +60,8 @@ import java.time.ZonedDateTime
  * @param formatPattern The pattern to format the displayed time.
  * @param onDateSelect The callback to be invoked when a new date is selected.
  * @param isEnabled Whether the button is enabled.
- * @param modifier A [Modifier] that you can use to apply custom modifications to the composable.
  * @param cardStyle Indicates the type of card style to be applied.
+ * @param modifier A [Modifier] that you can use to apply custom modifications to the composable.
  */
 @Suppress("LongMethod")
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@@ -70,8 +72,8 @@ fun BitwardenDateSelectButton(
     formatPattern: String,
     onDateSelect: (ZonedDateTime) -> Unit,
     isEnabled: Boolean,
+    cardStyle: CardStyle?,
     modifier: Modifier = Modifier,
-    cardStyle: CardStyle? = null,
 ) {
     var shouldShowDialog: Boolean by rememberSaveable { mutableStateOf(false) }
     val formattedDate by remember(currentZonedDateTime) {
@@ -105,10 +107,15 @@ fun BitwardenDateSelectButton(
         onValueChange = { },
         enabled = shouldShowDialog,
         trailingIcon = {
-            Icon(
-                painter = rememberVectorPainter(id = R.drawable.ic_chevron_down),
-                contentDescription = null,
-            )
+            BitwardenRowOfActions(
+                modifier = Modifier.padding(end = 4.dp),
+            ) {
+                Icon(
+                    painter = rememberVectorPainter(id = R.drawable.ic_chevron_down),
+                    contentDescription = null,
+                    modifier = Modifier.minimumInteractiveComponentSize(),
+                )
+            }
         },
         colors = bitwardenTextFieldButtonColors(),
     )