Add startSeparatorInsetDp and endSeparatorInsetDp to Embedded Appeara…

…nce (#9896) * Add startSeparatorInsetDp and endSeparatorInsetDp to Embedded Appearance
stripe · Jan 13, 2025 · 20b4670 · 20b4670
1 parent 875aa0e
commit 20b4670
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 27 deletions.
diff --git a/...e/android/paymentsheet/example/playground/activity/AppearanceBottomSheetDialogFragment.kt b/...e/android/paymentsheet/example/playground/activity/AppearanceBottomSheetDialogFragment.kt
@@ -689,10 +689,19 @@ private fun EmbeddedPicker(
     )
     Divider()
 
-    IncrementDecrementItem("separatorInsetsDp", embeddedAppearance.separatorInsetsDp) {
+    IncrementDecrementItem("startSeparatorInsetDp", embeddedAppearance.startSeparatorInset) {
         updateEmbedded(
             embeddedAppearance.copy(
-                separatorInsetsDp = it
+                startSeparatorInset = it
+            )
+        )
+    }
+    Divider()
+
+    IncrementDecrementItem("endSeparatorInsetDp", embeddedAppearance.endSeparatorInset) {
+        updateEmbedded(
+            embeddedAppearance.copy(
+                endSeparatorInset = it
             )
         )
     }

diff --git a/.../android/paymentsheet/example/playground/settings/EmbeddedAppearanceSettingsDefinition.kt b/.../android/paymentsheet/example/playground/settings/EmbeddedAppearanceSettingsDefinition.kt
@@ -49,7 +49,8 @@ internal enum class EmbeddedRow {
 internal data class EmbeddedAppearance(
     val embeddedRowStyle: EmbeddedRow = EmbeddedRow.FlatWithRadio,
     val separatorThicknessDp: Float = 1.0f,
-    val separatorInsetsDp: Float = 0.0f,
+    val startSeparatorInset: Float = 0.0f,
+    val endSeparatorInset: Float = 0.0f,
     val additionalInsetsDp: Float = 4.0f,
     val checkmarkInsetsDp: Float = 12.0f,
     val floatingButtonSpacingDp: Float = 12.0f,
@@ -65,7 +66,8 @@ internal data class EmbeddedAppearance(
             EmbeddedRow.FlatWithRadio -> PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio(
                 separatorThicknessDp = separatorThicknessDp,
                 separatorColor = separatorColor,
-                separatorInsetsDp = separatorInsetsDp,
+                startSeparatorInsetDp = startSeparatorInset,
+                endSeparatorInsetDp = endSeparatorInset,
                 topSeparatorEnabled = topSeparatorEnabled,
                 bottomSeparatorEnabled = bottomSeparatorEnabled,
                 selectedColor = selectedColor,
@@ -75,7 +77,8 @@ internal data class EmbeddedAppearance(
             EmbeddedRow.FlatWithCheckmark -> PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark(
                 separatorThicknessDp = separatorThicknessDp,
                 separatorColor = separatorColor,
-                separatorInsetsDp = separatorInsetsDp,
+                startSeparatorInsetDp = startSeparatorInset,
+                endSeparatorInsetDp = endSeparatorInset,
                 topSeparatorEnabled = topSeparatorEnabled,
                 bottomSeparatorEnabled = bottomSeparatorEnabled,
                 checkmarkColor = checkmarkColor,

diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt
@@ -979,9 +979,14 @@ class PaymentSheet internal constructor(
                     internal val separatorColor: Int,
 
                     /**
-                     * The insets of the separator line between rows.
+                     * The start inset of the separator line between rows.
                      */
-                    internal val separatorInsetsDp: Float,
+                    internal val startSeparatorInsetDp: Float,
+
+                    /**
+                     * The end inset of the separator line between rows.
+                     */
+                    internal val endSeparatorInsetDp: Float,
 
                     /**
                      * Determines if the top separator is visible at the top of the Embedded Mobile Payment Element.
@@ -1014,7 +1019,8 @@ class PaymentSheet internal constructor(
                         context: Context,
                         separatorThicknessDp: Int,
                         separatorColor: Color,
-                        separatorInsetsDp: Int,
+                        startSeparatorInsetDp: Int,
+                        endSeparatorInsetDp: Int,
                         topSeparatorEnabled: Boolean,
                         bottomSeparatorEnabled: Boolean,
                         selectedColor: Color,
@@ -1023,7 +1029,8 @@ class PaymentSheet internal constructor(
                     ) : this(
                         separatorThicknessDp = context.getRawValueFromDimenResource(separatorThicknessDp),
                         separatorColor = separatorColor.toArgb(),
-                        separatorInsetsDp = context.getRawValueFromDimenResource(separatorInsetsDp),
+                        startSeparatorInsetDp = context.getRawValueFromDimenResource(startSeparatorInsetDp),
+                        endSeparatorInsetDp = context.getRawValueFromDimenResource(endSeparatorInsetDp),
                         topSeparatorEnabled = topSeparatorEnabled,
                         bottomSeparatorEnabled = bottomSeparatorEnabled,
                         selectedColor = selectedColor.toArgb(),
@@ -1038,7 +1045,8 @@ class PaymentSheet internal constructor(
                         val defaultLight = FlatWithRadio(
                             separatorThicknessDp = StripeThemeDefaults.flat.separatorThickness,
                             separatorColor = StripeThemeDefaults.colorsLight.componentBorder.toArgb(),
-                            separatorInsetsDp = StripeThemeDefaults.flat.separatorInsets,
+                            startSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
+                            endSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
                             topSeparatorEnabled = StripeThemeDefaults.flat.topSeparatorEnabled,
                             bottomSeparatorEnabled = StripeThemeDefaults.flat.bottomSeparatorEnabled,
                             selectedColor = StripeThemeDefaults.colorsLight.materialColors.primary.toArgb(),
@@ -1049,7 +1057,8 @@ class PaymentSheet internal constructor(
                         val defaultDark = FlatWithRadio(
                             separatorThicknessDp = StripeThemeDefaults.flat.separatorThickness,
                             separatorColor = StripeThemeDefaults.colorsDark.componentBorder.toArgb(),
-                            separatorInsetsDp = StripeThemeDefaults.flat.separatorInsets,
+                            startSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
+                            endSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
                             topSeparatorEnabled = StripeThemeDefaults.flat.topSeparatorEnabled,
                             bottomSeparatorEnabled = StripeThemeDefaults.flat.bottomSeparatorEnabled,
                             selectedColor = StripeThemeDefaults.colorsDark.materialColors.primary.toArgb(),
@@ -1075,9 +1084,14 @@ class PaymentSheet internal constructor(
                     internal val separatorColor: Int,
 
                     /**
-                     * The insets of the separator line between rows.
+                     * The start inset of the separator line between rows.
+                     */
+                    internal val startSeparatorInsetDp: Float,
+
+                    /**
+                     * The end inset of the separator line between rows.
                      */
-                    internal val separatorInsetsDp: Float,
+                    internal val endSeparatorInsetDp: Float,
 
                     /**
                      * Determines if the top separator is visible at the top of the Embedded Mobile Payment Element.
@@ -1108,7 +1122,8 @@ class PaymentSheet internal constructor(
                         context: Context,
                         separatorThicknessDp: Int,
                         separatorColor: Color,
-                        separatorInsetsDp: Int,
+                        startSeparatorInsetDp: Int,
+                        endSeparatorInsetDp: Int,
                         topSeparatorEnabled: Boolean,
                         bottomSeparatorEnabled: Boolean,
                         checkmarkColor: Color,
@@ -1117,7 +1132,8 @@ class PaymentSheet internal constructor(
                     ) : this(
                         separatorThicknessDp = context.getRawValueFromDimenResource(separatorThicknessDp),
                         separatorColor = separatorColor.toArgb(),
-                        separatorInsetsDp = context.getRawValueFromDimenResource(separatorInsetsDp),
+                        startSeparatorInsetDp = context.getRawValueFromDimenResource(startSeparatorInsetDp),
+                        endSeparatorInsetDp = context.getRawValueFromDimenResource(endSeparatorInsetDp),
                         topSeparatorEnabled = topSeparatorEnabled,
                         bottomSeparatorEnabled = bottomSeparatorEnabled,
                         checkmarkColor = checkmarkColor.toArgb(),
@@ -1132,7 +1148,8 @@ class PaymentSheet internal constructor(
                         val defaultLight = FlatWithCheckmark(
                             separatorThicknessDp = StripeThemeDefaults.flat.separatorThickness,
                             separatorColor = StripeThemeDefaults.colorsLight.componentBorder.toArgb(),
-                            separatorInsetsDp = StripeThemeDefaults.flat.separatorInsets,
+                            startSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
+                            endSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
                             topSeparatorEnabled = StripeThemeDefaults.flat.topSeparatorEnabled,
                             bottomSeparatorEnabled = StripeThemeDefaults.flat.bottomSeparatorEnabled,
                             checkmarkColor = StripeThemeDefaults.colorsLight.materialColors.primary.toArgb(),
@@ -1143,7 +1160,8 @@ class PaymentSheet internal constructor(
                         val defaultDark = FlatWithCheckmark(
                             separatorThicknessDp = StripeThemeDefaults.flat.separatorThickness,
                             separatorColor = StripeThemeDefaults.colorsDark.componentBorder.toArgb(),
-                            separatorInsetsDp = StripeThemeDefaults.flat.separatorInsets,
+                            startSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
+                            endSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
                             topSeparatorEnabled = StripeThemeDefaults.flat.topSeparatorEnabled,
                             bottomSeparatorEnabled = StripeThemeDefaults.flat.bottomSeparatorEnabled,
                             checkmarkColor = StripeThemeDefaults.colorsDark.materialColors.primary.toArgb(),

diff --git a/...c/main/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUI.kt b/...c/main/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUI.kt
@@ -143,7 +143,10 @@ private fun OptionalEmbeddedDivider(rowStyle: Embedded.RowStyle) {
         Divider(
             color = color,
             thickness = thickness,
-            modifier = Modifier.padding(horizontal = rowStyle.separatorInsets()),
+            modifier = Modifier.padding(
+                start = rowStyle.startSeparatorInset(),
+                end = rowStyle.endSeparatorInset()
+            ),
             startIndent = if (rowStyle.startSeparatorHasDefaultInset()) 32.dp else 0.dp
         )
     }
@@ -186,10 +189,19 @@ private fun Embedded.RowStyle.separatorColor(): Int {
 }
 
 @OptIn(ExperimentalEmbeddedPaymentElementApi::class)
-private fun Embedded.RowStyle.separatorInsets(): Dp {
+private fun Embedded.RowStyle.startSeparatorInset(): Dp {
     return when (this) {
         is Embedded.RowStyle.FloatingButton -> 0.dp
-        is Embedded.RowStyle.FlatWithRadio -> separatorInsetsDp.dp
-        is Embedded.RowStyle.FlatWithCheckmark -> separatorInsetsDp.dp
+        is Embedded.RowStyle.FlatWithRadio -> startSeparatorInsetDp.dp
+        is Embedded.RowStyle.FlatWithCheckmark -> startSeparatorInsetDp.dp
+    }
+}
+
+@OptIn(ExperimentalEmbeddedPaymentElementApi::class)
+private fun Embedded.RowStyle.endSeparatorInset(): Dp {
+    return when (this) {
+        is Embedded.RowStyle.FloatingButton -> 0.dp
+        is Embedded.RowStyle.FlatWithRadio -> endSeparatorInsetDp.dp
+        is Embedded.RowStyle.FlatWithCheckmark -> endSeparatorInsetDp.dp
     }
 }
diff --git a/...m/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUIScreenshotTest.kt b/...m/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUIScreenshotTest.kt
@@ -69,7 +69,8 @@ class PaymentMethodEmbeddedLayoutUIScreenshotTest {
                     type = Embedded.RowStyle.FlatWithCheckmark::class,
                     separatorThicknessDp = 5f,
                     separatorColor = Color.CYAN,
-                    separatorInsetsDp = 40f
+                    startSeparatorInset = 40f,
+                    endSeparatorInset = 40f,
                 )
             )
         }
@@ -158,7 +159,8 @@ class PaymentMethodEmbeddedLayoutUIScreenshotTest {
         type: KClass<T>,
         separatorThicknessDp: Float? = null,
         separatorColor: Int? = null,
-        separatorInsetsDp: Float? = null,
+        startSeparatorInset: Float? = null,
+        endSeparatorInset: Float? = null,
         topSeparatorEnabled: Boolean? = null,
         bottomSeparatorEnabled: Boolean? = null,
         selectedColor: Int? = null,
@@ -172,7 +174,8 @@ class PaymentMethodEmbeddedLayoutUIScreenshotTest {
             Embedded.RowStyle.FlatWithRadio::class -> Embedded.RowStyle.FlatWithRadio(
                 separatorThicknessDp = separatorThicknessDp ?: StripeThemeDefaults.flat.separatorThickness,
                 separatorColor = separatorColor ?: StripeThemeDefaults.colorsLight.componentBorder.toArgb(),
-                separatorInsetsDp = separatorInsetsDp ?: StripeThemeDefaults.flat.separatorInsets,
+                startSeparatorInsetDp = startSeparatorInset ?: StripeThemeDefaults.flat.separatorInsets,
+                endSeparatorInsetDp = endSeparatorInset ?: StripeThemeDefaults.flat.separatorInsets,
                 topSeparatorEnabled = topSeparatorEnabled ?: StripeThemeDefaults.flat.topSeparatorEnabled,
                 bottomSeparatorEnabled = bottomSeparatorEnabled ?: StripeThemeDefaults.flat.bottomSeparatorEnabled,
                 selectedColor = selectedColor ?: StripeThemeDefaults.colorsLight.materialColors.primary.toArgb(),
@@ -182,7 +185,8 @@ class PaymentMethodEmbeddedLayoutUIScreenshotTest {
             Embedded.RowStyle.FlatWithCheckmark::class -> Embedded.RowStyle.FlatWithCheckmark(
                 separatorThicknessDp = separatorThicknessDp ?: StripeThemeDefaults.flat.separatorThickness,
                 separatorColor = separatorColor ?: StripeThemeDefaults.colorsLight.componentBorder.toArgb(),
-                separatorInsetsDp = separatorInsetsDp ?: StripeThemeDefaults.flat.separatorInsets,
+                startSeparatorInsetDp = startSeparatorInset ?: StripeThemeDefaults.flat.separatorInsets,
+                endSeparatorInsetDp = endSeparatorInset ?: StripeThemeDefaults.flat.separatorInsets,
                 topSeparatorEnabled = topSeparatorEnabled ?: StripeThemeDefaults.flat.topSeparatorEnabled,
                 bottomSeparatorEnabled = bottomSeparatorEnabled ?: StripeThemeDefaults.flat.bottomSeparatorEnabled,
                 checkmarkColor = checkmarkColor ?: StripeThemeDefaults.colorsLight.materialColors.primary.toArgb(),

diff --git a/...stripe/android/paymentsheet/verticalmode/PaymentMethodRowCheckmarkButtonScreenshotTest.kt b/...stripe/android/paymentsheet/verticalmode/PaymentMethodRowCheckmarkButtonScreenshotTest.kt
@@ -169,7 +169,8 @@ internal class PaymentMethodRowCheckmarkButtonScreenshotTest {
         val style = FlatWithCheckmark(
             separatorThicknessDp = StripeThemeDefaults.flat.separatorThickness,
             separatorColor = StripeThemeDefaults.colorsLight.componentBorder.toArgb(),
-            separatorInsetsDp = StripeThemeDefaults.flat.separatorInsets,
+            startSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
+            endSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
             topSeparatorEnabled = StripeThemeDefaults.flat.topSeparatorEnabled,
             bottomSeparatorEnabled = StripeThemeDefaults.flat.bottomSeparatorEnabled,
             checkmarkColor = StripeThemeDefaults.colorsLight.materialColors.error.toArgb(),

diff --git a/...com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowRadioButtonScreenshotTest.kt b/...com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowRadioButtonScreenshotTest.kt
@@ -169,7 +169,8 @@ internal class PaymentMethodRowRadioButtonScreenshotTest {
         val style = FlatWithRadio(
             separatorThicknessDp = StripeThemeDefaults.flat.separatorThickness,
             separatorColor = StripeThemeDefaults.colorsLight.componentBorder.toArgb(),
-            separatorInsetsDp = StripeThemeDefaults.flat.separatorInsets,
+            startSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
+            endSeparatorInsetDp = StripeThemeDefaults.flat.separatorInsets,
             topSeparatorEnabled = StripeThemeDefaults.flat.topSeparatorEnabled,
             bottomSeparatorEnabled = StripeThemeDefaults.flat.bottomSeparatorEnabled,
             selectedColor = StripeThemeDefaults.colorsLight.materialColors.error.toArgb(),