Fix FlatWithCheckmark Row Style (#10261)

* Align FlatWithCheck view more CTA * Default checkmarkInsetDp to 0
stripe · Feb 24, 2025 · 27bdb23 · 27bdb23
1 parent ef9b4cb
commit 27bdb23
Show file tree

Hide file tree

Showing 33 changed files with 64 additions and 36 deletions.
diff --git a/.../android/paymentsheet/example/playground/settings/EmbeddedAppearanceSettingsDefinition.kt b/.../android/paymentsheet/example/playground/settings/EmbeddedAppearanceSettingsDefinition.kt
@@ -53,7 +53,7 @@ internal data class EmbeddedAppearance(
     val endSeparatorInset: Float = 0.0f,
     val additionalVerticalInsetsDp: Float = 4.0f,
     val horizontalInsetsDp: Float = 0.0f,
-    val checkmarkInsetsDp: Float = 12.0f,
+    val checkmarkInsetsDp: Float = 0.0f,
     val floatingButtonSpacingDp: Float = 12.0f,
     val topSeparatorEnabled: Boolean = true,
     val bottomSeparatorEnabled: Boolean = true,

diff --git a/...heet/src/main/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowButton.kt b/...heet/src/main/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowButton.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -262,7 +263,7 @@ private fun RowButtonCheckmarkOuterContent(
             content()
             Row {
                 if (trailingContent != null) {
-                    Spacer(Modifier.width(iconWidth + 16.dp))
+                    Spacer(Modifier.width(iconWidth + 9.dp))
                     trailingContent()
                 }
             }
@@ -274,7 +275,8 @@ private fun RowButtonCheckmarkOuterContent(
                 contentDescription = null,
                 modifier = Modifier
                     .align(Alignment.CenterVertically)
-                    .padding(end = style.checkmarkInsetDp.dp),
+                    .padding(end = style.checkmarkInsetDp.dp)
+                    .offset(3.dp),
                 tint = Color(style.checkmarkColor)
             )
         }

diff --git a/...stripe/android/paymentsheet/verticalmode/PaymentMethodRowCheckmarkButtonScreenshotTest.kt b/...stripe/android/paymentsheet/verticalmode/PaymentMethodRowCheckmarkButtonScreenshotTest.kt
@@ -1,15 +1,28 @@
 package com.stripe.android.paymentsheet.verticalmode
 
-import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.toArgb
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.stripe.android.paymentelement.ExperimentalEmbeddedPaymentElementApi
 import com.stripe.android.paymentsheet.PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark
+import com.stripe.android.paymentsheet.ui.PaymentMethodIconFromResource
+import com.stripe.android.paymentsheet.verticalmode.UIConstants.iconHeight
+import com.stripe.android.paymentsheet.verticalmode.UIConstants.iconWidth
 import com.stripe.android.screenshottesting.FontSize
 import com.stripe.android.screenshottesting.PaparazziRule
 import com.stripe.android.ui.core.R
@@ -35,10 +48,7 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
                 isEnabled = true,
                 isSelected = false,
                 iconContent = {
-                    Image(
-                        painter = painterResource(id = R.drawable.stripe_ic_paymentsheet_pm_card),
-                        contentDescription = null
-                    )
+                    Icon()
                 },
                 title = "**** 4242",
                 subtitle = null,
@@ -57,10 +67,7 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
                 isEnabled = false,
                 isSelected = false,
                 iconContent = {
-                    Image(
-                        painter = painterResource(id = R.drawable.stripe_ic_paymentsheet_pm_card),
-                        contentDescription = null
-                    )
+                    Icon()
                 },
                 title = "**** 4242",
                 subtitle = null,
@@ -79,10 +86,7 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
                 isEnabled = true,
                 isSelected = true,
                 iconContent = {
-                    Image(
-                        painter = painterResource(id = R.drawable.stripe_ic_paymentsheet_pm_card),
-                        contentDescription = null
-                    )
+                    Icon()
                 },
                 title = "**** 4242",
                 subtitle = null,
@@ -101,10 +105,7 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
                 isEnabled = true,
                 isSelected = false,
                 iconContent = {
-                    Image(
-                        painter = painterResource(id = R.drawable.stripe_ic_paymentsheet_pm_card),
-                        contentDescription = null
-                    )
+                    Icon()
                 },
                 title = "**** 4242",
                 subtitle = "Please click me, I'm fancy",
@@ -123,10 +124,7 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
                 isEnabled = true,
                 isSelected = false,
                 iconContent = {
-                    Image(
-                        painter = painterResource(id = R.drawable.stripe_ic_paymentsheet_pm_card),
-                        contentDescription = null
-                    )
+                    Icon()
                 },
                 title = "**** 4242",
                 subtitle = "Please click me, I'm fancy, but I shouldn't extend a a a a a a a a a a a a a a a a " +
@@ -146,18 +144,15 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
                 isEnabled = true,
                 isSelected = false,
                 iconContent = {
-                    Image(
-                        painter = painterResource(id = R.drawable.stripe_ic_paymentsheet_pm_card),
-                        contentDescription = null
-                    )
+                    Icon()
                 },
                 title = "**** 4242",
                 subtitle = null,
                 promoText = null,
                 onClick = {},
                 style = FlatWithCheckmark.defaultLight,
                 trailingContent = {
-                    Text(text = "View more")
+                    TrailingContent()
                 },
                 shouldShowDefaultBadge = false,
             )
@@ -183,21 +178,52 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
                 isEnabled = true,
                 isSelected = false,
                 iconContent = {
-                    Image(
-                        painter = painterResource(id = R.drawable.stripe_ic_paymentsheet_pm_card),
-                        contentDescription = null
-                    )
+                    Icon()
                 },
                 title = "**** 4242",
                 subtitle = null,
                 promoText = null,
                 onClick = {},
                 style = style,
                 trailingContent = {
-                    Text(text = "View more")
+                    TrailingContent()
                 },
                 shouldShowDefaultBadge = false,
             )
         }
     }
+
+    @Composable
+    private fun Icon() {
+        PaymentMethodIconFromResource(
+            iconRes = R.drawable.stripe_ic_paymentsheet_pm_card,
+            colorFilter = null,
+            alignment = Alignment.Center,
+            modifier = Modifier
+                .height(iconHeight)
+                .width(iconWidth)
+        )
+    }
+
+    @Composable
+    private fun TrailingContent() {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .testTag(TEST_TAG_VIEW_MORE)
+                .padding(4.dp)
+        ) {
+            Text(
+                stringResource(id = com.stripe.android.paymentsheet.R.string.stripe_view_more),
+                color = MaterialTheme.colors.primary,
+                style = MaterialTheme.typography.subtitle1,
+                fontWeight = FontWeight.Medium,
+            )
+            Icon(
+                imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight,
+                contentDescription = null,
+                tint = MaterialTheme.colors.primary,
+            )
+        }
+    }
 }
diff --git a/...thodEmbeddedLayoutUIScreenshotTest_testBottomSeparatorOnly[CrazyAppearance].png b/...thodEmbeddedLayoutUIScreenshotTest_testBottomSeparatorOnly[CrazyAppearance].png
diff --git a/...hodEmbeddedLayoutUIScreenshotTest_testBottomSeparatorOnly[CustomAppearance].png b/...hodEmbeddedLayoutUIScreenshotTest_testBottomSeparatorOnly[CustomAppearance].png
diff --git a/...odEmbeddedLayoutUIScreenshotTest_testBottomSeparatorOnly[DefaultAppearance].png b/...odEmbeddedLayoutUIScreenshotTest_testBottomSeparatorOnly[DefaultAppearance].png
diff --git a/...MethodEmbeddedLayoutUIScreenshotTest_testFlatWithCheckmark[CrazyAppearance].png b/...MethodEmbeddedLayoutUIScreenshotTest_testFlatWithCheckmark[CrazyAppearance].png
diff --git a/...ethodEmbeddedLayoutUIScreenshotTest_testFlatWithCheckmark[CustomAppearance].png b/...ethodEmbeddedLayoutUIScreenshotTest_testFlatWithCheckmark[CustomAppearance].png
diff --git a/...thodEmbeddedLayoutUIScreenshotTest_testFlatWithCheckmark[DefaultAppearance].png b/...thodEmbeddedLayoutUIScreenshotTest_testFlatWithCheckmark[DefaultAppearance].png
diff --git a/...dEmbeddedLayoutUIScreenshotTest_testSavedPaymentMethodOnly[CrazyAppearance].png b/...dEmbeddedLayoutUIScreenshotTest_testSavedPaymentMethodOnly[CrazyAppearance].png
diff --git a/...EmbeddedLayoutUIScreenshotTest_testSavedPaymentMethodOnly[CustomAppearance].png b/...EmbeddedLayoutUIScreenshotTest_testSavedPaymentMethodOnly[CustomAppearance].png
diff --git a/...mbeddedLayoutUIScreenshotTest_testSavedPaymentMethodOnly[DefaultAppearance].png b/...mbeddedLayoutUIScreenshotTest_testSavedPaymentMethodOnly[DefaultAppearance].png
diff --git a/...EmbeddedLayoutUIScreenshotTest_testSeparatorColorAndInsets[CrazyAppearance].png b/...EmbeddedLayoutUIScreenshotTest_testSeparatorColorAndInsets[CrazyAppearance].png
diff --git a/...mbeddedLayoutUIScreenshotTest_testSeparatorColorAndInsets[CustomAppearance].png b/...mbeddedLayoutUIScreenshotTest_testSeparatorColorAndInsets[CustomAppearance].png
diff --git a/...beddedLayoutUIScreenshotTest_testSeparatorColorAndInsets[DefaultAppearance].png b/...beddedLayoutUIScreenshotTest_testSeparatorColorAndInsets[DefaultAppearance].png
diff --git a/...tMethodEmbeddedLayoutUIScreenshotTest_testTopSeparatorOnly[CrazyAppearance].png b/...tMethodEmbeddedLayoutUIScreenshotTest_testTopSeparatorOnly[CrazyAppearance].png
diff --git a/...MethodEmbeddedLayoutUIScreenshotTest_testTopSeparatorOnly[CustomAppearance].png b/...MethodEmbeddedLayoutUIScreenshotTest_testTopSeparatorOnly[CustomAppearance].png
diff --git a/...ethodEmbeddedLayoutUIScreenshotTest_testTopSeparatorOnly[DefaultAppearance].png b/...ethodEmbeddedLayoutUIScreenshotTest_testTopSeparatorOnly[DefaultAppearance].png
diff --git a/...aymentMethodRowCheckmarkButtonScreenshotTest_testDisabledState[DefaultFont].png b/...aymentMethodRowCheckmarkButtonScreenshotTest_testDisabledState[DefaultFont].png
diff --git a/..._PaymentMethodRowCheckmarkButtonScreenshotTest_testDisabledState[LargeFont].png b/..._PaymentMethodRowCheckmarkButtonScreenshotTest_testDisabledState[LargeFont].png
diff --git a/...PaymentMethodRowCheckmarkButtonScreenshotTest_testInitialState[DefaultFont].png b/...PaymentMethodRowCheckmarkButtonScreenshotTest_testInitialState[DefaultFont].png
diff --git a/...e_PaymentMethodRowCheckmarkButtonScreenshotTest_testInitialState[LargeFont].png b/...e_PaymentMethodRowCheckmarkButtonScreenshotTest_testInitialState[LargeFont].png
diff --git a/...odRowCheckmarkButtonScreenshotTest_testMultilineTextTruncation[DefaultFont].png b/...odRowCheckmarkButtonScreenshotTest_testMultilineTextTruncation[DefaultFont].png
diff --git a/...thodRowCheckmarkButtonScreenshotTest_testMultilineTextTruncation[LargeFont].png b/...thodRowCheckmarkButtonScreenshotTest_testMultilineTextTruncation[LargeFont].png
diff --git a/...aymentMethodRowCheckmarkButtonScreenshotTest_testMultilineText[DefaultFont].png b/...aymentMethodRowCheckmarkButtonScreenshotTest_testMultilineText[DefaultFont].png
diff --git a/..._PaymentMethodRowCheckmarkButtonScreenshotTest_testMultilineText[LargeFont].png b/..._PaymentMethodRowCheckmarkButtonScreenshotTest_testMultilineText[LargeFont].png
diff --git a/...aymentMethodRowCheckmarkButtonScreenshotTest_testSelectedState[DefaultFont].png b/...aymentMethodRowCheckmarkButtonScreenshotTest_testSelectedState[DefaultFont].png
diff --git a/..._PaymentMethodRowCheckmarkButtonScreenshotTest_testSelectedState[LargeFont].png b/..._PaymentMethodRowCheckmarkButtonScreenshotTest_testSelectedState[LargeFont].png
diff --git a/...mentMethodRowCheckmarkButtonScreenshotTest_testStyleAppearance[DefaultFont].png b/...mentMethodRowCheckmarkButtonScreenshotTest_testStyleAppearance[DefaultFont].png
diff --git a/...aymentMethodRowCheckmarkButtonScreenshotTest_testStyleAppearance[LargeFont].png b/...aymentMethodRowCheckmarkButtonScreenshotTest_testStyleAppearance[LargeFont].png
diff --git a/...ymentMethodRowCheckmarkButtonScreenshotTest_testTailingContent[DefaultFont].png b/...ymentMethodRowCheckmarkButtonScreenshotTest_testTailingContent[DefaultFont].png
diff --git a/...PaymentMethodRowCheckmarkButtonScreenshotTest_testTailingContent[LargeFont].png b/...PaymentMethodRowCheckmarkButtonScreenshotTest_testTailingContent[LargeFont].png
diff --git a/stripe-ui-core/src/main/java/com/stripe/android/uicore/StripeTheme.kt b/stripe-ui-core/src/main/java/com/stripe/android/uicore/StripeTheme.kt
@@ -242,7 +242,7 @@ object StripeThemeDefaults {
     val embeddedCommon = EmbeddedInsets(
         additionalVerticalInsetsDp = 0.0f,
         horizontalInsetsDp = 0.0f,
-        checkmarkInsetDp = 12.0f
+        checkmarkInsetDp = 0.0f
     )
 
     val floating = EmbeddedFloatingStyle(