From 20b4670533853f668be8d98e59a529ba5bfd537f Mon Sep 17 00:00:00 2001 From: tjclawson-stripe <163896025+tjclawson-stripe@users.noreply.github.com> Date: Mon, 13 Jan 2025 18:22:50 -0500 Subject: [PATCH] Add startSeparatorInsetDp and endSeparatorInsetDp to Embedded Appearance (#9896) * Add startSeparatorInsetDp and endSeparatorInsetDp to Embedded Appearance --- .../AppearanceBottomSheetDialogFragment.kt | 13 +++++- .../EmbeddedAppearanceSettingsDefinition.kt | 9 ++-- .../android/paymentsheet/PaymentSheet.kt | 42 +++++++++++++------ .../PaymentMethodEmbeddedLayoutUI.kt | 20 +++++++-- ...entMethodEmbeddedLayoutUIScreenshotTest.kt | 12 ++++-- ...tMethodRowCheckmarkButtonScreenshotTest.kt | 3 +- ...ymentMethodRowRadioButtonScreenshotTest.kt | 3 +- 7 files changed, 75 insertions(+), 27 deletions(-) diff --git a/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/activity/AppearanceBottomSheetDialogFragment.kt b/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/activity/AppearanceBottomSheetDialogFragment.kt index abaafb1379a..b7a3e96a6c7 100644 --- a/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/activity/AppearanceBottomSheetDialogFragment.kt +++ b/paymentsheet-example/src/main/java/com/stripe/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/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/settings/EmbeddedAppearanceSettingsDefinition.kt b/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/settings/EmbeddedAppearanceSettingsDefinition.kt index da319c4530a..aba2445978a 100644 --- a/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/settings/EmbeddedAppearanceSettingsDefinition.kt +++ b/paymentsheet-example/src/main/java/com/stripe/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 index b32b5492ce9..960a5059fb0 100644 --- 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/paymentsheet/src/main/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUI.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUI.kt index 6f57fef23a1..077840012eb 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUI.kt +++ b/paymentsheet/src/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/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUIScreenshotTest.kt b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUIScreenshotTest.kt index 8ba635d251f..7c7cd6bc269 100644 --- a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodEmbeddedLayoutUIScreenshotTest.kt +++ b/paymentsheet/src/test/java/com/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, 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/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowCheckmarkButtonScreenshotTest.kt b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowCheckmarkButtonScreenshotTest.kt index d3cddff8c16..06c2e2740aa 100644 --- a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowCheckmarkButtonScreenshotTest.kt +++ b/paymentsheet/src/test/java/com/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/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowRadioButtonScreenshotTest.kt b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowRadioButtonScreenshotTest.kt index 4aae0149dbe..91655b11fe3 100644 --- a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/verticalmode/PaymentMethodRowRadioButtonScreenshotTest.kt +++ b/paymentsheet/src/test/java/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(),