Fix LinkButton shape (#10094)

* Fix LinkButton shape * Remove surface wrapping in DefaultLinkTheme * Test rounded corner background is correctly tinted * Update paymentsheet/src/test/java/com/stripe/android/link/ui/LinkButtonScreenshotTest.kt Co-authored-by: Jay Newstrom <[email protected]> * Restore missing tests * Update screenshot test ground truth --------- Co-authored-by: Jay Newstrom <[email protected]>
stripe · Feb 6, 2025 · 2095d93 · 2095d93
1 parent e4d987b
commit 2095d93
Show file tree

Hide file tree

Showing 47 changed files with 51 additions and 16 deletions.
diff --git a/...reenshot.TestPaymentSheetScreenshots_testPaymentSheetAlongsideSfuLinkSignUp.png b/...reenshot.TestPaymentSheetScreenshots_testPaymentSheetAlongsideSfuLinkSignUp.png
diff --git a/...reenshot.TestPaymentSheetScreenshots_testPaymentSheetInsteadOfSfuLinkSignUp.png b/...reenshot.TestPaymentSheetScreenshots_testPaymentSheetInsteadOfSfuLinkSignUp.png
diff --git a/paymentsheet/src/main/java/com/stripe/android/link/theme/Theme.kt b/paymentsheet/src/main/java/com/stripe/android/link/theme/Theme.kt
@@ -2,13 +2,10 @@ package com.stripe.android.link.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.graphics.RectangleShape
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.dp
 
 private val LocalColors = staticCompositionLocalOf { LinkThemeConfig.colors(false) }
@@ -21,7 +18,6 @@ internal val HorizontalPadding = 20.dp
 @Composable
 internal fun DefaultLinkTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
-    contentShape: Shape = RectangleShape,
     content: @Composable () -> Unit
 ) {
     val colors = LinkThemeConfig.colors(darkTheme)
@@ -32,11 +28,7 @@ internal fun DefaultLinkTheme(
             typography = Typography,
             shapes = MaterialTheme.shapes,
         ) {
-            Surface(
-                shape = contentShape
-            ) {
-                content()
-            }
+            content()
         }
     }
 }

diff --git a/paymentsheet/src/main/java/com/stripe/android/link/ui/LinkButton.kt b/paymentsheet/src/main/java/com/stripe/android/link/ui/LinkButton.kt
@@ -27,7 +27,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
@@ -109,11 +108,10 @@ internal fun LinkButton(
                 modifier = modifier
                     .fillMaxWidth()
                     .defaultMinSize(minHeight = 48.dp)
-                    .clip(LinkButtonShape)
                     .testTag(LinkButtonTestTag),
                 enabled = enabled,
-                elevation = ButtonDefaults.elevation(0.dp, 0.dp, 0.dp, 0.dp, 0.dp),
                 shape = LinkButtonShape,
+                elevation = ButtonDefaults.elevation(0.dp, 0.dp, 0.dp, 0.dp, 0.dp),
                 colors = ButtonDefaults.buttonColors(
                     backgroundColor = MaterialTheme.colors.primary,
                     disabledBackgroundColor = MaterialTheme.colors.primary

diff --git a/paymentsheet/src/main/java/com/stripe/android/link/ui/verification/VerificationDialog.kt b/paymentsheet/src/main/java/com/stripe/android/link/ui/verification/VerificationDialog.kt
@@ -2,6 +2,7 @@ package com.stripe.android.link.ui.verification
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -46,10 +47,10 @@ internal fun VerificationDialogBody(
                 viewModel.onBack()
             }
         ) {
-            DefaultLinkTheme(
-                contentShape = RoundedCornerShape(16.dp)
-            ) {
-                VerificationScreen(viewModel)
+            DefaultLinkTheme {
+                Surface(shape = RoundedCornerShape(16.dp)) {
+                    VerificationScreen(viewModel)
+                }
             }
         }
     }

diff --git a/paymentsheet/src/test/java/com/stripe/android/link/ui/LinkButtonScreenshotTest.kt b/paymentsheet/src/test/java/com/stripe/android/link/ui/LinkButtonScreenshotTest.kt
@@ -1,16 +1,43 @@
 package com.stripe.android.link.ui
 
+import android.graphics.Color
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.stripe.android.paymentsheet.PaymentSheet
+import com.stripe.android.paymentsheet.parseAppearance
 import com.stripe.android.screenshottesting.FontSize
 import com.stripe.android.screenshottesting.Locale
+import com.stripe.android.screenshottesting.PaparazziConfigOption
 import com.stripe.android.screenshottesting.PaparazziRule
 import com.stripe.android.screenshottesting.SystemAppearance
+import com.stripe.android.utils.screenshots.PaymentSheetAppearance.DefaultAppearance
 import org.junit.Rule
 import org.junit.Test
 
+private enum class LinkButtonAppearance(private val appearance: PaymentSheet.Appearance) : PaparazziConfigOption {
+
+    TestSurfaceBackgroundAppearance(
+        appearance = PaymentSheet.Appearance(
+            colorsLight = PaymentSheet.Colors.defaultLight.copy(
+                surface = Color.RED,
+            ),
+            colorsDark = PaymentSheet.Colors.defaultDark.copy(
+                surface = Color.RED,
+            ),
+        ),
+    );
+
+    override fun initialize() {
+        appearance.parseAppearance()
+    }
+
+    override fun reset() {
+        DefaultAppearance.appearance.parseAppearance()
+    }
+}
+
 internal class LinkButtonScreenshotTest {
     @get:Rule
     val paparazziRule = PaparazziRule(
@@ -31,6 +58,16 @@ internal class LinkButtonScreenshotTest {
             .fillMaxWidth(),
     )
 
+    @get:Rule
+    val surfacePaparazziRule = PaparazziRule(
+        SystemAppearance.entries,
+        LinkButtonAppearance.entries,
+        FontSize.entries,
+        boxModifier = Modifier
+            .padding(0.dp)
+            .fillMaxWidth(),
+    )
+
     @Test
     fun testNewUser() {
         paparazziRule.snapshot {
@@ -79,4 +116,11 @@ internal class LinkButtonScreenshotTest {
             LinkButton(email = "[email protected]", enabled = false, onClick = { })
         }
     }
+
+    @Test
+    fun testRoundedCornerSurfaceColor() {
+        surfacePaparazziRule.snapshot {
+            LinkButton(email = null, enabled = true, onClick = { })
+        }
+    }
 }
diff --git a/...ui_LinkButtonScreenshotTest_testExistingUserDisabled[DarkTheme,DefaultFont].png b/...ui_LinkButtonScreenshotTest_testExistingUserDisabled[DarkTheme,DefaultFont].png
diff --git a/...k.ui_LinkButtonScreenshotTest_testExistingUserDisabled[DarkTheme,LargeFont].png b/...k.ui_LinkButtonScreenshotTest_testExistingUserDisabled[DarkTheme,LargeFont].png
diff --git a/...i_LinkButtonScreenshotTest_testExistingUserDisabled[LightTheme,DefaultFont].png b/...i_LinkButtonScreenshotTest_testExistingUserDisabled[LightTheme,DefaultFont].png
diff --git a/....ui_LinkButtonScreenshotTest_testExistingUserDisabled[LightTheme,LargeFont].png b/....ui_LinkButtonScreenshotTest_testExistingUserDisabled[LightTheme,LargeFont].png
diff --git a/...ScreenshotTest_testExistingUserWithLongEmailDisabled[DarkTheme,DefaultFont].png b/...ScreenshotTest_testExistingUserWithLongEmailDisabled[DarkTheme,DefaultFont].png
diff --git a/...onScreenshotTest_testExistingUserWithLongEmailDisabled[DarkTheme,LargeFont].png b/...onScreenshotTest_testExistingUserWithLongEmailDisabled[DarkTheme,LargeFont].png
diff --git a/...creenshotTest_testExistingUserWithLongEmailDisabled[LightTheme,DefaultFont].png b/...creenshotTest_testExistingUserWithLongEmailDisabled[LightTheme,DefaultFont].png
diff --git a/...nScreenshotTest_testExistingUserWithLongEmailDisabled[LightTheme,LargeFont].png b/...nScreenshotTest_testExistingUserWithLongEmailDisabled[LightTheme,LargeFont].png
diff --git a/...nkButtonScreenshotTest_testExistingUserWithLongEmail[DarkTheme,DefaultFont].png b/...nkButtonScreenshotTest_testExistingUserWithLongEmail[DarkTheme,DefaultFont].png
diff --git a/...LinkButtonScreenshotTest_testExistingUserWithLongEmail[DarkTheme,LargeFont].png b/...LinkButtonScreenshotTest_testExistingUserWithLongEmail[DarkTheme,LargeFont].png
diff --git a/...kButtonScreenshotTest_testExistingUserWithLongEmail[LightTheme,DefaultFont].png b/...kButtonScreenshotTest_testExistingUserWithLongEmail[LightTheme,DefaultFont].png
diff --git a/...inkButtonScreenshotTest_testExistingUserWithLongEmail[LightTheme,LargeFont].png b/...inkButtonScreenshotTest_testExistingUserWithLongEmail[LightTheme,LargeFont].png
diff --git a/...id.link.ui_LinkButtonScreenshotTest_testExistingUser[DarkTheme,DefaultFont].png b/...id.link.ui_LinkButtonScreenshotTest_testExistingUser[DarkTheme,DefaultFont].png
diff --git a/...roid.link.ui_LinkButtonScreenshotTest_testExistingUser[DarkTheme,LargeFont].png b/...roid.link.ui_LinkButtonScreenshotTest_testExistingUser[DarkTheme,LargeFont].png
diff --git a/...d.link.ui_LinkButtonScreenshotTest_testExistingUser[LightTheme,DefaultFont].png b/...d.link.ui_LinkButtonScreenshotTest_testExistingUser[LightTheme,DefaultFont].png
diff --git a/...oid.link.ui_LinkButtonScreenshotTest_testExistingUser[LightTheme,LargeFont].png b/...oid.link.ui_LinkButtonScreenshotTest_testExistingUser[LightTheme,LargeFont].png
diff --git a/...link.ui_LinkButtonScreenshotTest_testNewUserDisabled[DarkTheme,DefaultFont].png b/...link.ui_LinkButtonScreenshotTest_testNewUserDisabled[DarkTheme,DefaultFont].png
diff --git a/...d.link.ui_LinkButtonScreenshotTest_testNewUserDisabled[DarkTheme,LargeFont].png b/...d.link.ui_LinkButtonScreenshotTest_testNewUserDisabled[DarkTheme,LargeFont].png
diff --git a/...ink.ui_LinkButtonScreenshotTest_testNewUserDisabled[LightTheme,DefaultFont].png b/...ink.ui_LinkButtonScreenshotTest_testNewUserDisabled[LightTheme,DefaultFont].png
diff --git a/....link.ui_LinkButtonScreenshotTest_testNewUserDisabled[LightTheme,LargeFont].png b/....link.ui_LinkButtonScreenshotTest_testNewUserDisabled[LightTheme,LargeFont].png
diff --git a/...ScreenshotTest_testNewUserInDifferentLocales[DarkTheme,DefaultFont,Finland].png b/...ScreenshotTest_testNewUserInDifferentLocales[DarkTheme,DefaultFont,Finland].png
diff --git a/...nScreenshotTest_testNewUserInDifferentLocales[DarkTheme,DefaultFont,France].png b/...nScreenshotTest_testNewUserInDifferentLocales[DarkTheme,DefaultFont,France].png
diff --git a/...nshotTest_testNewUserInDifferentLocales[DarkTheme,DefaultFont,UnitedStates].png b/...nshotTest_testNewUserInDifferentLocales[DarkTheme,DefaultFont,UnitedStates].png
diff --git a/...onScreenshotTest_testNewUserInDifferentLocales[DarkTheme,LargeFont,Finland].png b/...onScreenshotTest_testNewUserInDifferentLocales[DarkTheme,LargeFont,Finland].png
diff --git a/...tonScreenshotTest_testNewUserInDifferentLocales[DarkTheme,LargeFont,France].png b/...tonScreenshotTest_testNewUserInDifferentLocales[DarkTheme,LargeFont,France].png
diff --git a/...eenshotTest_testNewUserInDifferentLocales[DarkTheme,LargeFont,UnitedStates].png b/...eenshotTest_testNewUserInDifferentLocales[DarkTheme,LargeFont,UnitedStates].png
diff --git a/...creenshotTest_testNewUserInDifferentLocales[LightTheme,DefaultFont,Finland].png b/...creenshotTest_testNewUserInDifferentLocales[LightTheme,DefaultFont,Finland].png
diff --git a/...ScreenshotTest_testNewUserInDifferentLocales[LightTheme,DefaultFont,France].png b/...ScreenshotTest_testNewUserInDifferentLocales[LightTheme,DefaultFont,France].png
diff --git a/...shotTest_testNewUserInDifferentLocales[LightTheme,DefaultFont,UnitedStates].png b/...shotTest_testNewUserInDifferentLocales[LightTheme,DefaultFont,UnitedStates].png
diff --git a/...nScreenshotTest_testNewUserInDifferentLocales[LightTheme,LargeFont,Finland].png b/...nScreenshotTest_testNewUserInDifferentLocales[LightTheme,LargeFont,Finland].png
diff --git a/...onScreenshotTest_testNewUserInDifferentLocales[LightTheme,LargeFont,France].png b/...onScreenshotTest_testNewUserInDifferentLocales[LightTheme,LargeFont,France].png
diff --git a/...enshotTest_testNewUserInDifferentLocales[LightTheme,LargeFont,UnitedStates].png b/...enshotTest_testNewUserInDifferentLocales[LightTheme,LargeFont,UnitedStates].png
diff --git a/...android.link.ui_LinkButtonScreenshotTest_testNewUser[DarkTheme,DefaultFont].png b/...android.link.ui_LinkButtonScreenshotTest_testNewUser[DarkTheme,DefaultFont].png
diff --git a/...e.android.link.ui_LinkButtonScreenshotTest_testNewUser[DarkTheme,LargeFont].png b/...e.android.link.ui_LinkButtonScreenshotTest_testNewUser[DarkTheme,LargeFont].png
diff --git a/...ndroid.link.ui_LinkButtonScreenshotTest_testNewUser[LightTheme,DefaultFont].png b/...ndroid.link.ui_LinkButtonScreenshotTest_testNewUser[LightTheme,DefaultFont].png
diff --git a/....android.link.ui_LinkButtonScreenshotTest_testNewUser[LightTheme,LargeFont].png b/....android.link.ui_LinkButtonScreenshotTest_testNewUser[LightTheme,LargeFont].png
diff --git a/...edCornerSurfaceColor[DarkTheme,TestSurfaceBackgroundAppearance,DefaultFont].png b/...edCornerSurfaceColor[DarkTheme,TestSurfaceBackgroundAppearance,DefaultFont].png
diff --git a/...ndedCornerSurfaceColor[DarkTheme,TestSurfaceBackgroundAppearance,LargeFont].png b/...ndedCornerSurfaceColor[DarkTheme,TestSurfaceBackgroundAppearance,LargeFont].png
diff --git a/...dCornerSurfaceColor[LightTheme,TestSurfaceBackgroundAppearance,DefaultFont].png b/...dCornerSurfaceColor[LightTheme,TestSurfaceBackgroundAppearance,DefaultFont].png
diff --git a/...dedCornerSurfaceColor[LightTheme,TestSurfaceBackgroundAppearance,LargeFont].png b/...dedCornerSurfaceColor[LightTheme,TestSurfaceBackgroundAppearance,LargeFont].png
diff --git a/...entSheetScreenVerticalModeScreenshotTest_displaysVerticalModeListWithLink[].png b/...entSheetScreenVerticalModeScreenshotTest_displaysVerticalModeListWithLink[].png