🎨 Fix bug when shadow is nil and double apply of shadow (#1004)

* Fix bug when shadow is nil and double apply of shadow

* Hide shadow when using `StackViewWithSeparator`

* Add shadow snapshots

* update snapshots

* resolve snapshot merge conflicts

Example/PaymentSheet Example/PaymentSheetUITest/PaymentSheetSnapshotTests.swift

@@ -74,6 +74,27 @@ class PaymentSheetSnapshotTests: FBSnapshotTestCase {
         verify(paymentSheet.bottomSheetViewController.view!)
     }
 
+    func testPaymentSheetNilShadows() {
+        var appearance = PaymentSheet.Appearance()
+        appearance.shadow = nil
+        appearance.borderWidth = 0.0
+        let requestExpectation = XCTestExpectation(description: "request expectation")
+        preparePaymentSheet(requestExpectation: requestExpectation, apperance: appearance)
+        wait(for: [requestExpectation], timeout: 20.0)
+        presentPaymentSheet(darkMode: false, preferredContentSizeCategory: .extraExtraLarge)
+        verify(paymentSheet.bottomSheetViewController.view!)
+    }
+
+    func testPaymentSheetShadow() {
+        var appearance = PaymentSheet.Appearance()
+        appearance.shadow = PaymentSheet.Appearance.Shadow(color: .systemRed, opacity: 0.5, offset: CGSize(width: 0, height: 2), radius: 0.5)
+        let requestExpectation = XCTestExpectation(description: "request expectation")
+        preparePaymentSheet(requestExpectation: requestExpectation, apperance: appearance)
+        wait(for: [requestExpectation], timeout: 20.0)
+        presentPaymentSheet(darkMode: false, preferredContentSizeCategory: .extraExtraLarge)
+        verify(paymentSheet.bottomSheetViewController.view!)
+    }
+
     func testPaymentSheetCustom() {
         let requestExpectation = XCTestExpectation(description: "request expectation")
         preparePaymentSheet(requestExpectation: requestExpectation, customer: "snapshot")
@@ -106,6 +127,27 @@ class PaymentSheetSnapshotTests: FBSnapshotTestCase {
         verify(paymentSheet.bottomSheetViewController.view!)
     }
 
+    func testPaymentSheetCustomNilShadows() {
+        var appearance = PaymentSheet.Appearance()
+        appearance.shadow = nil
+        appearance.borderWidth = 0.0
+        let requestExpectation = XCTestExpectation(description: "request expectation")
+        preparePaymentSheet(requestExpectation: requestExpectation, customer: "snapshot", apperance: appearance)
+        wait(for: [requestExpectation], timeout: 20.0)
+        presentPaymentSheet(darkMode: false)
+        verify(paymentSheet.bottomSheetViewController.view!)
+    }
+
+    func testPaymentSheetCustomShadow() {
+        var appearance = PaymentSheet.Appearance()
+        appearance.shadow = PaymentSheet.Appearance.Shadow(color: .systemRed, opacity: 0.5, offset: CGSize(width: 0, height: 2), radius: 0.5)
+        let requestExpectation = XCTestExpectation(description: "request expectation")
+        preparePaymentSheet(requestExpectation: requestExpectation, customer: "snapshot", apperance: appearance)
+        wait(for: [requestExpectation], timeout: 20.0)
+        presentPaymentSheet(darkMode: false)
+        verify(paymentSheet.bottomSheetViewController.view!)
+    }
+
     func testPaymentSheetWithLinkDarkMode() {
         let requestExpectation = XCTestExpectation(description: "request expectation")
         preparePaymentSheet(requestExpectation: requestExpectation, automaticPaymentMethods: false, useLink: true)

Stripe/PaymentMethodTypeCollectionView.swift

@@ -192,7 +192,6 @@ extension PaymentMethodTypeCollectionView {
                 label.rightAnchor.constraint(equalTo: shadowRoundedRectangle.rightAnchor, constant: -5),
             ])
 
-            contentView.layer.applyShadow(theme: appearance.asElementsTheme)
             contentView.layer.cornerRadius = appearance.cornerRadius
             clipsToBounds = false
             layer.masksToBounds = false
@@ -238,12 +237,10 @@ extension PaymentMethodTypeCollectionView {
         // MARK: - Private Methods
         private func update() {
             contentView.layer.cornerRadius = appearance.cornerRadius
-            shadowRoundedRectangle.layer.cornerRadius = appearance.cornerRadius
-            shadowRoundedRectangle.roundedRectangle.layer.cornerRadius = appearance.cornerRadius
+            shadowRoundedRectangle.appearance = appearance
             label.text = paymentMethodType.displayName
 
             label.font = appearance.scaledFont(for: appearance.font.base.medium, style: .footnote, maximumPointSize: 20)
-            shadowRoundedRectangle.roundedRectangle.backgroundColor = appearance.colors.componentBackground
             var image = paymentMethodType.makeImage(forDarkBackground: appearance.colors.componentBackground.contrastingColor == .white)
 
             // tint icon primary color for a few PMs should be tinted the appearance primary color when selected
@@ -256,11 +253,7 @@ extension PaymentMethodTypeCollectionView {
             paymentMethodLogoWidthConstraint.constant = paymentMethodLogoSize.height / image.size.height * image.size.width
             setNeedsLayout()
 
-
-            // Set shadow
-            contentView.layer.applyShadow(theme: appearance.asElementsTheme)
-            shadowRoundedRectangle.shouldDisplayShadow = true
-
+
             if isSelected {
                 // Set text color
                 label.textColor = appearance.colors.primary

Stripe/ShadowedRoundedRectangleView.swift

@@ -17,6 +17,9 @@ class ShadowedRoundedRectangle: UIView {
     var appearance: PaymentSheet.Appearance {
         didSet {
             layer.applyShadow(theme: appearance.asElementsTheme)
+            layer.cornerRadius = appearance.cornerRadius
+            roundedRectangle.layer.cornerRadius = appearance.cornerRadius
+            roundedRectangle.backgroundColor = appearance.colors.componentBackground
         }
     }
 

StripeUICore/StripeUICore/Source/Categories/CALayer+StripeUICore.swift

@@ -11,7 +11,10 @@ import UIKit
 @_spi(STP) public extension CALayer {
 
     func applyShadow(theme: ElementsUITheme) {
-        guard let shadow = theme.shadow else { return }
+        guard let shadow = theme.shadow else {
+            shadowOpacity = 0
+            return
+        }
 
         shadowColor = shadow.color.cgColor
         shadowOpacity = Float(shadow.opacity)

StripeUICore/StripeUICore/Source/Elements/Form/FormView.swift

@@ -27,6 +27,7 @@ import UIKit
             stack.borderColor = ElementsUITheme.current.colors.border
             stack.borderCornerRadius = ElementsUITheme.current.cornerRadius
             stack.spacing = ElementsUITheme.current.borderWidth
+            stack.hideShadow = true
             stack.layer.applyShadow(theme: ElementsUITheme.current)
             stack.axis = .vertical
             stack.distribution = .equalSpacing

StripeUICore/StripeUICore/Source/Elements/Section/SectionContainerView.swift

@@ -205,5 +205,6 @@ private func buildStackView(views: [UIView]) -> StackViewWithSeparator {
     stackView.borderCornerRadius = ElementsUITheme.current.cornerRadius
     stackView.customBackgroundColor = ElementsUITheme.current.colors.background
     stackView.drawBorder = true
+    stackView.hideShadow = true // Shadow is handled by `SectionContainerView`
     return stackView
 }