From 86a020de40130b6d9c3ac28dc9df72bc2b780df8 Mon Sep 17 00:00:00 2001 From: Nick Porter Date: Sat, 21 Sep 2024 09:34:52 -0600 Subject: [PATCH 1/4] Update Appearance playground for embedded --- .../AppearancePlaygroundView.swift | 99 ++++++++++++++++++- .../PaymentSheet/PaymentSheetAppearance.swift | 2 +- 2 files changed, 99 insertions(+), 2 deletions(-) diff --git a/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift b/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift index 1b740357c9e..11b5b7623fe 100644 --- a/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift +++ b/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift @@ -6,7 +6,7 @@ // Copyright © 2022 stripe-ios. All rights reserved. // -@_spi(STP) import StripePaymentSheet +@_spi(STP) @_spi(EmbeddedPaymentMethodsViewBeta) import StripePaymentSheet import SwiftUI @available(iOS 14.0, *) @@ -39,6 +39,11 @@ struct AppearancePlaygroundView: View { get: { Color(self.appearance.colors.componentBorder) }, set: { self.appearance.colors.componentBorder = UIColor($0) } ) + + let componentBorderSelectedColorBinding = Binding( + get: { Color(self.appearance.colors.componentBorderSelected ?? self.appearance.colors.primary) }, + set: { self.appearance.colors.componentBorderSelected = UIColor($0) } + ) let componentDividerColorBinding = Binding( get: { Color(self.appearance.colors.componentDivider) }, @@ -211,6 +216,47 @@ struct AppearancePlaygroundView: View { self.appearance.primaryButton.shadow?.radius = $0 } ) + + let paymentOptionViewFlatSeparatorColorBinding = Binding( + get: { Color(self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor ?? appearance.colors.componentBorder) }, + set: { + if self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor == nil { + self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor = appearance.colors.componentBorder + } else { + self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor = UIColor($0) + } + } + ) + + let paymentOptionViewFlatRadioColorSelected = Binding( + get: { Color(self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorSelected ?? appearance.colors.primary) }, + set: { + self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorSelected = UIColor($0) + } + ) + + let paymentOptionViewFlatRadioColorUnselected = Binding( + get: { Color(self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorUnselected ?? appearance.colors.componentBorder) }, + set: { + self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorUnselected = UIColor($0) + } + ) + + let paymentOptionViewFlatLeftSeparatorInset = Binding( + get: { self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.left ?? 0}, + set: { + let prevInsets = self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset ?? .zero + self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset = UIEdgeInsets(top: 0, left: $0, bottom: 0, right: prevInsets.right) + } + ) + + let paymentOptionViewFlatRightSeparatorInset = Binding( + get: { self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.right ?? 0}, + set: { + let prevInsets = self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset ?? .zero + self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset = UIEdgeInsets(top: 0, left:prevInsets.left , bottom: 0, right: $0) + } + ) let regularFonts = ["AvenirNext-Regular", "PingFangHK-Regular", "ChalkboardSE-Light"] @@ -222,6 +268,7 @@ struct AppearancePlaygroundView: View { ColorPicker("background", selection: backgroundColorBinding) ColorPicker("componentBackground", selection: componentBackgroundColorBinding) ColorPicker("componentBorder", selection: componentBorderColorBinding) + ColorPicker("componentBorderSelected", selection: componentBorderSelectedColorBinding) ColorPicker("componentDivider", selection: componentDividerColorBinding) ColorPicker("text", selection: textColorBinding) ColorPicker("textSecondary", selection: textSecondaryColorBinding) @@ -237,6 +284,7 @@ struct AppearancePlaygroundView: View { Section(header: Text("Miscellaneous")) { Stepper(String(format: "cornerRadius: %.1f", appearance.cornerRadius), value: cornerRadiusBinding, in: 0...30) Stepper(String(format: "borderWidth: %.1f", appearance.borderWidth), value: borderWidthBinding, in: 0.0...2.0, step: 0.5) + Stepper(String(format: "borderWidthSelected: %.1f", appearance.borderWidthSelected ?? appearance.borderWidth * 1.5), value: borderWidthBinding, in: 0.0...2.0, step: 0.5) VStack { Text("componentShadow") ColorPicker("color", selection: componentShadowColorBinding) @@ -309,6 +357,55 @@ struct AppearancePlaygroundView: View { Text("Primary Button") } } + + Section(header: Text("PaymentOptionView")) { + DisclosureGroup { + Picker("Style", selection: $appearance.paymentOptionView.style) { + ForEach(PaymentSheet.Appearance.PaymentOptionView.Style.allCases, id: \.self) { + Text(String(describing:$0)) + } + } + + DisclosureGroup { + Stepper("additionalInsets: \(Int(appearance.paymentOptionView.paymentMethodRow.additionalInsets))", + value: $appearance.paymentOptionView.paymentMethodRow.additionalInsets, in: 0...40) + + DisclosureGroup { + Stepper("separatorThickness: \(Int(appearance.paymentOptionView.paymentMethodRow.flat.separatorThickness))", + value: $appearance.paymentOptionView.paymentMethodRow.flat.separatorThickness, in: 0...10) + ColorPicker("separatorColor", selection: paymentOptionViewFlatSeparatorColorBinding) + Stepper("leftSeparatorInset: \(Int(appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.left ?? 0))", + value: paymentOptionViewFlatLeftSeparatorInset, in: 0...20) + Stepper("rightSeparatorInset: \(Int(appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.right ?? 0))", + value: paymentOptionViewFlatRightSeparatorInset, in: 0...20) + Toggle("topSeparatorEnabled", isOn: $appearance.paymentOptionView.paymentMethodRow.flat.topSeparatorEnabled) + Toggle("bottomSeparatorEnabled", isOn: $appearance.paymentOptionView.paymentMethodRow.flat.bottomSeparatorEnabled) + + DisclosureGroup { + + } label: { + Text("Radio") + } + + } label: { + Text("Flat with radio") + } + + DisclosureGroup { + Stepper("Spacing: \(Int(appearance.paymentOptionView.paymentMethodRow.floating.spacing))", + value: $appearance.paymentOptionView.paymentMethodRow.floating.spacing, in: 0...40) + + } label: { + Text("Floating") + } + } label: { + Text("Row") + } + + } label: { + Text("PaymentOptionView") + } + } Button { appearance = PaymentSheet.Appearance() diff --git a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift index cf2ca08ec50..a7fb6f11473 100644 --- a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift +++ b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift @@ -238,7 +238,7 @@ public extension PaymentSheet { struct PaymentOptionView: Equatable { /// The display style options for the embedded payment element - public enum Style { + public enum Style: CaseIterable { /// A flat style with radio buttons case flatRadio /// A floating style From bfc82125ce210f6028f946989c156ea4bc95da3a Mon Sep 17 00:00:00 2001 From: Nick Porter Date: Thu, 26 Sep 2024 09:40:30 -0600 Subject: [PATCH 2/4] Update embedded API review based on API review --- .../Embedded/EmbeddedPaymentMethodsView.swift | 28 ++++---- .../PaymentSheet/Embedded/RadioButton.swift | 4 +- .../PaymentSheet/PaymentSheetAppearance.swift | 58 +++++++-------- .../Vertical Main Screen/RowButton.swift | 10 +-- .../Views/ShadowedRoundedRectangleView.swift | 4 +- ...eddedPaymentMethodsViewSnapshotTests.swift | 70 +++++++++---------- 6 files changed, 87 insertions(+), 87 deletions(-) diff --git a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentMethodsView.swift b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentMethodsView.swift index dc3930f1e8e..ddfea6a9675 100644 --- a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentMethodsView.swift +++ b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentMethodsView.swift @@ -17,7 +17,7 @@ import UIKit lazy var stackView: UIStackView = { let stackView = UIStackView() stackView.axis = .vertical - stackView.spacing = appearance.paymentOptionView.style == .floating ? appearance.paymentOptionView.paymentMethodRow.floating.spacing : 0 + stackView.spacing = appearance.embeddedPaymentElement.style == .floatingButton ? appearance.embeddedPaymentElement.row.floating.spacing : 0 return stackView }() @@ -40,7 +40,7 @@ import UIKit savedPaymentMethodAccessoryType: RowButton.RightAccessoryButton.AccessoryType?) { self.appearance = appearance super.init(frame: .zero) - let rowButtonAppearance = appearance.paymentOptionView.style.appearanceForStyle(appearance: appearance) + let rowButtonAppearance = appearance.embeddedPaymentElement.style.appearanceForStyle(appearance: appearance) if let savedPaymentMethod { let accessoryButton: RowButton.RightAccessoryButton? = { @@ -89,13 +89,13 @@ import UIKit didTap: handleRowSelection(selectedRowButton:))) } - if appearance.paymentOptionView.style != .floating { - stackView.addSeparators(color: appearance.paymentOptionView.paymentMethodRow.flat.separatorColor ?? appearance.colors.componentBorder, + if appearance.embeddedPaymentElement.style != .floatingButton { + stackView.addSeparators(color: appearance.embeddedPaymentElement.row.flat.separatorColor ?? appearance.colors.componentBorder, backgroundColor: appearance.colors.componentBackground, - thickness: appearance.paymentOptionView.paymentMethodRow.flat.separatorThickness, - inset: appearance.paymentOptionView.paymentMethodRow.flat.separatorInset ?? appearance.paymentOptionView.style.defaultInsets, - addTopSeparator: appearance.paymentOptionView.paymentMethodRow.flat.topSeparatorEnabled, - addBottomSeparator: appearance.paymentOptionView.paymentMethodRow.flat.bottomSeparatorEnabled) + thickness: appearance.embeddedPaymentElement.row.flat.separatorThickness, + inset: appearance.embeddedPaymentElement.row.flat.separatorInsets ?? appearance.embeddedPaymentElement.style.defaultInsets, + addTopSeparator: appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled, + addBottomSeparator: appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled) } addAndPinSubview(stackView) @@ -117,28 +117,28 @@ import UIKit } } -extension PaymentSheet.Appearance.PaymentOptionView.Style { +extension PaymentSheet.Appearance.EmbeddedPaymentElement.Style { var defaultInsets: UIEdgeInsets { switch self { - case .flatRadio: + case .flatWithRadio: return UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 0) - case .floating: + case .floatingButton: return .zero } } fileprivate func appearanceForStyle(appearance: PaymentSheet.Appearance) -> PaymentSheet.Appearance { switch self { - case .flatRadio: + case .flatWithRadio: // TODO(porter) See if there is a better way to do this, less sneaky var appearance = appearance appearance.borderWidth = 0.0 - appearance.colors.componentBorderSelected = .clear + appearance.colors.selectedComponentBorder = .clear appearance.cornerRadius = 0.0 appearance.shadow = .disabled return appearance - case .floating: + case .floatingButton: return appearance } } diff --git a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/RadioButton.swift b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/RadioButton.swift index 689fc5cc359..3ed19eb9462 100644 --- a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/RadioButton.swift +++ b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/RadioButton.swift @@ -24,11 +24,11 @@ class RadioButton: UIView { } private var selectedColor: CGColor { - appearance.paymentOptionView.paymentMethodRow.flat.radio.colorSelected?.cgColor ?? appearance.colors.primary.cgColor + appearance.embeddedPaymentElement.row.flat.radio.selectedColor?.cgColor ?? appearance.colors.primary.cgColor } private var unselectedColor: CGColor { - appearance.paymentOptionView.paymentMethodRow.flat.radio.colorUnselected?.cgColor ?? appearance.colors.componentBorder.cgColor + appearance.embeddedPaymentElement.row.flat.radio.unselectedColor?.cgColor ?? appearance.colors.componentBorder.cgColor } private let didTap: () -> Void diff --git a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift index e84d986646e..a378a370fff 100644 --- a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift +++ b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift @@ -39,14 +39,14 @@ public extension PaymentSheet { /// The border width used for selected buttons and tabs in PaymentSheet /// - Note: If `nil`, defaults to `borderWidth * 1.5` /// - Note: The behavior of this property is consistent with the behavior of border width on `CALayer` - @_spi(EmbeddedPaymentElementPrivateBeta) public var borderWidthSelected: CGFloat? + @_spi(EmbeddedPaymentElementPrivateBeta) public var selectedBorderWidth: CGFloat? /// The shadow used for inputs and tabs in PaymentSheet /// - Note: Set this to `.disabled` to disable shadows public var shadow: Shadow = Shadow() - /// Describes the appearance of the embeddable payment element - @_spi(EmbeddedPaymentElementPrivateBeta) public var paymentOptionView: PaymentOptionView = PaymentOptionView() + /// Describes the appearance of the Embedded Mobile Payment Element + @_spi(EmbeddedPaymentElementPrivateBeta) public var embeddedPaymentElement: EmbeddedPaymentElement = EmbeddedPaymentElement() // MARK: Fonts @@ -104,7 +104,7 @@ public extension PaymentSheet { /// The border color used for selected buttons and tabs in PaymentSheet /// - Note: If `nil`, defaults to `appearance.colors.primary` - @_spi(EmbeddedPaymentElementPrivateBeta) public var componentBorderSelected: UIColor? + @_spi(EmbeddedPaymentElementPrivateBeta) public var selectedComponentBorder: UIColor? /// The color of the divider lines used inside inputs, tabs, and other components public var componentDivider: UIColor = .systemGray3 @@ -234,54 +234,54 @@ public extension PaymentSheet { } @_spi(EmbeddedPaymentElementPrivateBeta) public extension PaymentSheet.Appearance { - /// Describes the appearance of the embedded payment element - struct PaymentOptionView: Equatable { + /// Describes the appearance of the Embedded Mobile Payment Element + @_spi(EmbeddedPaymentElementPrivateBeta) struct EmbeddedPaymentElement: Equatable { - /// The display style options for the embedded payment element + /// The display style options for the Embedded Mobile Payment Element public enum Style: CaseIterable { /// A flat style with radio buttons - case flatRadio - /// A floating style - case floating + case flatWithRadio + /// A floating button style + case floatingButton } - /// Creates a `PaymentSheet.Appearance.PaymentOptionView` with default values + /// Creates a `PaymentSheet.Appearance.EmbeddedPaymentElement` with default values public init() {} - /// Describes the appearance of the payment method row - public var paymentMethodRow: PaymentMethodRow = PaymentMethodRow() + /// Describes the appearance of the row in the Embedded Mobile Payment Element + public var row: Row = Row() - /// The display style of the embedded payment element - public var style: Style = .flatRadio + /// The display style of the Embedded Mobile Payment Element + public var style: Style = .flatWithRadio - /// Describes the appearance of the payment method row - public struct PaymentMethodRow: Equatable { + /// Describes the appearance of the row in the Embedded Mobile Payment Element + public struct Row: Equatable { /// Additional vertical insets applied to a payment method row - /// - Note: Increasing this value increases the height of the row + /// - Note: Increasing this value increases the height of each row public var additionalInsets: CGFloat = 4.0 /// Appearance settings for the flat style public var flat: Flat = Flat() - /// Appearance settings for the floating style + /// Appearance settings for the floating button style public var floating: Floating = Floating() - /// Describes the appearance of the flat style of the embedded payment element + /// Describes the appearance of the flat style of the Embedded Mobile Payment Element public struct Flat: Equatable { - /// The thickness of the separator line between payment method rows + /// The thickness of the separator line between rows public var separatorThickness: CGFloat = 1.0 - /// The color of the separator line between payment method rows + /// The color of the separator line between rows /// - Note: If `nil`, defaults to `appearance.colors.componentBorder` public var separatorColor: UIColor? - /// The insets of the separator line between payment method rows - public var separatorInset: UIEdgeInsets? + /// The insets of the separator line between rows + public var separatorInsets: UIEdgeInsets? - /// Determines if the top separator is visible at the top of the embedded payment element + /// Determines if the top separator is visible at the top of the Embedded Mobile Payment Element public var topSeparatorEnabled: Bool = true - /// Determines if the bottom separator is visible at the bottom of the embedded payment element + /// Determines if the bottom separator is visible at the bottom of the Embedded Mobile Payment Element public var bottomSeparatorEnabled: Bool = true /// Appearance settings for the radio button @@ -291,15 +291,15 @@ public extension PaymentSheet { public struct Radio: Equatable { /// The color of the radio button when selected /// - Note: If `nil`, defaults to `appearance.color.primaryColor` - public var colorSelected: UIColor? + public var selectedColor: UIColor? /// The color of the radio button when unselected /// - Note: If `nil`, defaults to `appearance.colors.componentBorder` - public var colorUnselected: UIColor? + public var unselectedColor: UIColor? } } - /// Describes the appearance of the floating style payment method row + /// Describes the appearance of the floating button style payment method row public struct Floating: Equatable { /// The spacing between payment method rows public var spacing: CGFloat = 12.0 diff --git a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Vertical Main Screen/RowButton.swift b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Vertical Main Screen/RowButton.swift index 270ad9367b0..74ed3a85a58 100644 --- a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Vertical Main Screen/RowButton.swift +++ b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Vertical Main Screen/RowButton.swift @@ -15,7 +15,7 @@ import UIKit class RowButton: UIView { private let shadowRoundedRect: ShadowedRoundedRectangle private lazy var radioButton: RadioButton? = { - guard isEmbedded, appearance.paymentOptionView.style == .flatRadio else { return nil } + guard isEmbedded, appearance.embeddedPaymentElement.style == .flatWithRadio else { return nil } return RadioButton(appearance: appearance) { [weak self] in guard let self else { return } self.didTap(self) @@ -115,16 +115,16 @@ class RowButton: UIView { imageView.leadingAnchor.constraint(equalTo: radioButton?.trailingAnchor ?? leadingAnchor, constant: 12), imageView.centerYAnchor.constraint(equalTo: centerYAnchor), - imageView.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: 10 + appearance.paymentOptionView.paymentMethodRow.additionalInsets), - imageView.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor, constant: -10 - appearance.paymentOptionView.paymentMethodRow.additionalInsets), + imageView.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: 10 + appearance.embeddedPaymentElement.row.additionalInsets), + imageView.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor, constant: -10 - appearance.embeddedPaymentElement.row.additionalInsets), imageView.heightAnchor.constraint(equalToConstant: 20), imageView.widthAnchor.constraint(equalToConstant: 24), labelsStackView.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: 12), labelsStackView.trailingAnchor.constraint(equalTo: rightAccessoryView?.leadingAnchor ?? trailingAnchor, constant: -12), labelsStackView.centerYAnchor.constraint(equalTo: centerYAnchor), - labelsStackView.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: appearance.paymentOptionView.paymentMethodRow.additionalInsets), - labelsStackView.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor, constant: -appearance.paymentOptionView.paymentMethodRow.additionalInsets), + labelsStackView.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: appearance.embeddedPaymentElement.row.additionalInsets), + labelsStackView.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor, constant: -appearance.embeddedPaymentElement.row.additionalInsets), imageViewBottomConstraint, imageViewTopConstraint, diff --git a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/ShadowedRoundedRectangleView.swift b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/ShadowedRoundedRectangleView.swift index ed6a005ee80..624c93a644a 100644 --- a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/ShadowedRoundedRectangleView.swift +++ b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/ShadowedRoundedRectangleView.swift @@ -49,14 +49,14 @@ class ShadowedRoundedRectangle: UIView { // Border if isSelected { - let selectedBorderWidth = appearance.borderWidthSelected ?? appearance.borderWidth + let selectedBorderWidth = appearance.selectedBorderWidth ?? appearance.borderWidth if selectedBorderWidth > 0 { layer.borderWidth = selectedBorderWidth * 1.5 } else { // Without a border, the customer can't tell this is selected and it looks bad layer.borderWidth = 1.5 } - layer.borderColor = appearance.colors.componentBorderSelected?.cgColor ?? appearance.colors.primary.cgColor + layer.borderColor = appearance.colors.selectedComponentBorder?.cgColor ?? appearance.colors.primary.cgColor } else { layer.borderWidth = appearance.borderWidth layer.borderColor = appearance.colors.componentBorder.cgColor diff --git a/StripePaymentSheet/StripePaymentSheetTests/PaymentSheet/EmbeddedPaymentMethodsViewSnapshotTests.swift b/StripePaymentSheet/StripePaymentSheetTests/PaymentSheet/EmbeddedPaymentMethodsViewSnapshotTests.swift index 9c6961012d4..e24955b9cd7 100644 --- a/StripePaymentSheet/StripePaymentSheetTests/PaymentSheet/EmbeddedPaymentMethodsViewSnapshotTests.swift +++ b/StripePaymentSheet/StripePaymentSheetTests/PaymentSheet/EmbeddedPaymentMethodsViewSnapshotTests.swift @@ -62,7 +62,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_flatRadio_rowHeight() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.additionalInsets = 20 + appearance.embeddedPaymentElement.row.additionalInsets = 20 let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp), .stripe(.klarna)], savedPaymentMethod: nil, @@ -73,16 +73,16 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { verify(embeddedView) // Assert height let defaultHeight = RowButton.calculateTallestHeight(appearance: .default) - let defaultInset = PaymentSheet.Appearance.default.paymentOptionView.paymentMethodRow.additionalInsets + let defaultInset = PaymentSheet.Appearance.default.embeddedPaymentElement.row.additionalInsets for case let rowButton as RowButton in embeddedView.stackView.arrangedSubviews { let newHeight = rowButton.frame.size.height - XCTAssertEqual((appearance.paymentOptionView.paymentMethodRow.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) + XCTAssertEqual((appearance.embeddedPaymentElement.row.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) } } func testEmbeddedPaymentMethodsView_flatRadio_rowHeightSingleLine() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.additionalInsets = 20 + appearance.embeddedPaymentElement.row.additionalInsets = 20 let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -95,16 +95,16 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { // Assert height let defaultHeight = RowButton.calculateTallestHeight(appearance: .default) - let defaultInset = PaymentSheet.Appearance.default.paymentOptionView.paymentMethodRow.additionalInsets + let defaultInset = PaymentSheet.Appearance.default.embeddedPaymentElement.row.additionalInsets for case let rowButton as RowButton in embeddedView.stackView.arrangedSubviews { let newHeight = rowButton.frame.size.height - XCTAssertEqual((appearance.paymentOptionView.paymentMethodRow.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) + XCTAssertEqual((appearance.embeddedPaymentElement.row.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) } } func testEmbeddedPaymentMethodsView_flatRadio_separatorThickness() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.flat.separatorThickness = 10 + appearance.embeddedPaymentElement.row.flat.separatorThickness = 10 let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -118,7 +118,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_flatRadio_separatorColor() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.flat.separatorColor = .red + appearance.embeddedPaymentElement.row.flat.separatorColor = .red let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -132,7 +132,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_flatRadio_separatorInset() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.flat.separatorInset = UIEdgeInsets(top: 0, left: 50, bottom: 0, right: 50) + appearance.embeddedPaymentElement.row.flat.separatorInsets = UIEdgeInsets(top: 0, left: 50, bottom: 0, right: 50) let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -146,7 +146,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_flatRadio_topSeparatorDisabled() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.flat.topSeparatorEnabled = false + appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -160,7 +160,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_flatRadio_bottomSeparatorDisabled() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.flat.bottomSeparatorEnabled = false + appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -174,7 +174,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_flatRadio_colorSelected() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.flat.radio.colorSelected = .red + appearance.embeddedPaymentElement.row.flat.radio.selectedColor = .red let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -193,7 +193,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_flatRadio_colorUnselected() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.paymentMethodRow.flat.radio.colorUnselected = .red + appearance.embeddedPaymentElement.row.flat.radio.unselectedColor = .red let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -253,7 +253,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -267,7 +267,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_savedPaymentMethod() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: STPPaymentMethod._testCard(), @@ -281,7 +281,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_noApplePay() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -295,7 +295,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_noLink() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -309,8 +309,8 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_rowHeight() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating - appearance.paymentOptionView.paymentMethodRow.additionalInsets = 20 + appearance.embeddedPaymentElement.style = .floatingButton + appearance.embeddedPaymentElement.row.additionalInsets = 20 let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp), .stripe(.afterpayClearpay)], savedPaymentMethod: nil, @@ -323,17 +323,17 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { // Assert height let defaultHeight = RowButton.calculateTallestHeight(appearance: .default) - let defaultInset = PaymentSheet.Appearance.default.paymentOptionView.paymentMethodRow.additionalInsets + let defaultInset = PaymentSheet.Appearance.default.embeddedPaymentElement.row.additionalInsets for case let rowButton as RowButton in embeddedView.stackView.arrangedSubviews { let newHeight = rowButton.frame.size.height - XCTAssertEqual((appearance.paymentOptionView.paymentMethodRow.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) + XCTAssertEqual((appearance.embeddedPaymentElement.row.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) } } func testEmbeddedPaymentMethodsView_floating_rowHeightSingleLine() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating - appearance.paymentOptionView.paymentMethodRow.additionalInsets = 20 + appearance.embeddedPaymentElement.style = .floatingButton + appearance.embeddedPaymentElement.row.additionalInsets = 20 let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -346,17 +346,17 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { // Assert height let defaultHeight = RowButton.calculateTallestHeight(appearance: .default) - let defaultInset = PaymentSheet.Appearance.default.paymentOptionView.paymentMethodRow.additionalInsets + let defaultInset = PaymentSheet.Appearance.default.embeddedPaymentElement.row.additionalInsets for case let rowButton as RowButton in embeddedView.stackView.arrangedSubviews { let newHeight = rowButton.frame.size.height - XCTAssertEqual((appearance.paymentOptionView.paymentMethodRow.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) + XCTAssertEqual((appearance.embeddedPaymentElement.row.additionalInsets - defaultInset) * 2, newHeight - defaultHeight) } } func testEmbeddedPaymentMethodsView_floating_spacing() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating - appearance.paymentOptionView.paymentMethodRow.floating.spacing = 30 + appearance.embeddedPaymentElement.style = .floatingButton + appearance.embeddedPaymentElement.row.floating.spacing = 30 let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -370,9 +370,9 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_selectedBorder() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView .style = .floating - appearance.borderWidthSelected = 5.0 - appearance.colors.componentBorderSelected = .red + appearance.embeddedPaymentElement .style = .floatingButton + appearance.selectedBorderWidth = 5.0 + appearance.colors.selectedComponentBorder = .red let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], savedPaymentMethod: nil, @@ -391,7 +391,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_borderWidth() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView .style = .floating + appearance.embeddedPaymentElement .style = .floatingButton appearance.borderWidth = 5.0 appearance.colors.primary = .red @@ -412,7 +412,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_componentBackgroundColor() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton appearance.colors.componentBackground = .purple let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], @@ -427,7 +427,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_cornerRadius() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton appearance.cornerRadius = 15 let embeddedView = EmbeddedPaymentMethodsView(paymentMethodTypes: [.stripe(.card), .stripe(.cashApp)], @@ -442,7 +442,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_smallFont() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton appearance.font.sizeScaleFactor = 0.5 appearance.font.base = UIFont(name: "AmericanTypewriter", size: 12)! @@ -458,7 +458,7 @@ class EmbeddedPaymentMethodsViewSnapshotTests: STPSnapshotTestCase { func testEmbeddedPaymentMethodsView_floating_largeFont() { var appearance: PaymentSheet.Appearance = .default - appearance.paymentOptionView.style = .floating + appearance.embeddedPaymentElement.style = .floatingButton appearance.font.sizeScaleFactor = 1.5 appearance.font.base = UIFont(name: "AmericanTypewriter", size: 12)! From 41377a18415f7e224ad75a00be02e5b316b9c658 Mon Sep 17 00:00:00 2001 From: Nick Porter Date: Thu, 26 Sep 2024 09:40:54 -0600 Subject: [PATCH 3/4] Add embedded appearance API to playground --- .../AppearancePlaygroundView.swift | 121 +++++++++--------- 1 file changed, 61 insertions(+), 60 deletions(-) diff --git a/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift b/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift index 11b5b7623fe..8a9e12d79e8 100644 --- a/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift +++ b/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift @@ -6,7 +6,7 @@ // Copyright © 2022 stripe-ios. All rights reserved. // -@_spi(STP) @_spi(EmbeddedPaymentMethodsViewBeta) import StripePaymentSheet +@_spi(STP) @_spi(EmbeddedPaymentElementPrivateBeta) import StripePaymentSheet import SwiftUI @available(iOS 14.0, *) @@ -39,10 +39,10 @@ struct AppearancePlaygroundView: View { get: { Color(self.appearance.colors.componentBorder) }, set: { self.appearance.colors.componentBorder = UIColor($0) } ) - - let componentBorderSelectedColorBinding = Binding( - get: { Color(self.appearance.colors.componentBorderSelected ?? self.appearance.colors.primary) }, - set: { self.appearance.colors.componentBorderSelected = UIColor($0) } + + let selectedComponentBorderColorBinding = Binding( + get: { Color(self.appearance.colors.selectedComponentBorder ?? self.appearance.colors.primary) }, + set: { self.appearance.colors.selectedComponentBorder = UIColor($0) } ) let componentDividerColorBinding = Binding( @@ -216,45 +216,45 @@ struct AppearancePlaygroundView: View { self.appearance.primaryButton.shadow?.radius = $0 } ) - - let paymentOptionViewFlatSeparatorColorBinding = Binding( - get: { Color(self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor ?? appearance.colors.componentBorder) }, + + let embeddedPaymentElementFlatSeparatorColorBinding = Binding( + get: { Color(self.appearance.embeddedPaymentElement.row.flat.separatorColor ?? appearance.colors.componentBorder) }, set: { - if self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor == nil { - self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor = appearance.colors.componentBorder + if self.appearance.embeddedPaymentElement.row.flat.separatorColor == nil { + self.appearance.embeddedPaymentElement.row.flat.separatorColor = appearance.colors.componentBorder } else { - self.appearance.paymentOptionView.paymentMethodRow.flat.separatorColor = UIColor($0) + self.appearance.embeddedPaymentElement.row.flat.separatorColor = UIColor($0) } } ) - - let paymentOptionViewFlatRadioColorSelected = Binding( - get: { Color(self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorSelected ?? appearance.colors.primary) }, + + let embeddedPaymentElementFlatRadioColorSelected = Binding( + get: { Color(self.appearance.embeddedPaymentElement.row.flat.radio.selectedColor ?? appearance.colors.primary) }, set: { - self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorSelected = UIColor($0) + self.appearance.embeddedPaymentElement.row.flat.radio.selectedColor = UIColor($0) } ) - - let paymentOptionViewFlatRadioColorUnselected = Binding( - get: { Color(self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorUnselected ?? appearance.colors.componentBorder) }, + + let embeddedPaymentElementFlatRadioColorUnselected = Binding( + get: { Color(self.appearance.embeddedPaymentElement.row.flat.radio.unselectedColor ?? appearance.colors.componentBorder) }, set: { - self.appearance.paymentOptionView.paymentMethodRow.flat.radio.colorUnselected = UIColor($0) + self.appearance.embeddedPaymentElement.row.flat.radio.unselectedColor = UIColor($0) } ) - - let paymentOptionViewFlatLeftSeparatorInset = Binding( - get: { self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.left ?? 0}, + + let embeddedPaymentElementFlatLeftSeparatorInset = Binding( + get: { self.appearance.embeddedPaymentElement.row.flat.separatorInsets?.left ?? 0 }, set: { - let prevInsets = self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset ?? .zero - self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset = UIEdgeInsets(top: 0, left: $0, bottom: 0, right: prevInsets.right) + let prevInsets = self.appearance.embeddedPaymentElement.row.flat.separatorInsets ?? .zero + self.appearance.embeddedPaymentElement.row.flat.separatorInsets = UIEdgeInsets(top: 0, left: $0, bottom: 0, right: prevInsets.right) } ) - - let paymentOptionViewFlatRightSeparatorInset = Binding( - get: { self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.right ?? 0}, + + let embeddedPaymentElementFlatRightSeparatorInset = Binding( + get: { self.appearance.embeddedPaymentElement.row.flat.separatorInsets?.right ?? 0 }, set: { - let prevInsets = self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset ?? .zero - self.appearance.paymentOptionView.paymentMethodRow.flat.separatorInset = UIEdgeInsets(top: 0, left:prevInsets.left , bottom: 0, right: $0) + let prevInsets = self.appearance.embeddedPaymentElement.row.flat.separatorInsets ?? .zero + self.appearance.embeddedPaymentElement.row.flat.separatorInsets = UIEdgeInsets(top: 0, left: prevInsets.left, bottom: 0, right: $0) } ) @@ -268,7 +268,7 @@ struct AppearancePlaygroundView: View { ColorPicker("background", selection: backgroundColorBinding) ColorPicker("componentBackground", selection: componentBackgroundColorBinding) ColorPicker("componentBorder", selection: componentBorderColorBinding) - ColorPicker("componentBorderSelected", selection: componentBorderSelectedColorBinding) + ColorPicker("selectedComponentBorder", selection: selectedComponentBorderColorBinding) ColorPicker("componentDivider", selection: componentDividerColorBinding) ColorPicker("text", selection: textColorBinding) ColorPicker("textSecondary", selection: textSecondaryColorBinding) @@ -284,7 +284,7 @@ struct AppearancePlaygroundView: View { Section(header: Text("Miscellaneous")) { Stepper(String(format: "cornerRadius: %.1f", appearance.cornerRadius), value: cornerRadiusBinding, in: 0...30) Stepper(String(format: "borderWidth: %.1f", appearance.borderWidth), value: borderWidthBinding, in: 0.0...2.0, step: 0.5) - Stepper(String(format: "borderWidthSelected: %.1f", appearance.borderWidthSelected ?? appearance.borderWidth * 1.5), value: borderWidthBinding, in: 0.0...2.0, step: 0.5) + Stepper(String(format: "selectedBorderWidth: %.1f", appearance.selectedBorderWidth ?? appearance.borderWidth * 1.5), value: borderWidthBinding, in: 0.0...2.0, step: 0.5) VStack { Text("componentShadow") ColorPicker("color", selection: componentShadowColorBinding) @@ -357,53 +357,54 @@ struct AppearancePlaygroundView: View { Text("Primary Button") } } - - Section(header: Text("PaymentOptionView")) { + + Section(header: Text("EmbeddedPaymentElement")) { DisclosureGroup { - Picker("Style", selection: $appearance.paymentOptionView.style) { - ForEach(PaymentSheet.Appearance.PaymentOptionView.Style.allCases, id: \.self) { - Text(String(describing:$0)) + Picker("Style", selection: $appearance.embeddedPaymentElement.style) { + ForEach(PaymentSheet.Appearance.EmbeddedPaymentElement.Style.allCases, id: \.self) { + Text(String(describing: $0)) } } - + DisclosureGroup { - Stepper("additionalInsets: \(Int(appearance.paymentOptionView.paymentMethodRow.additionalInsets))", - value: $appearance.paymentOptionView.paymentMethodRow.additionalInsets, in: 0...40) - + Stepper("additionalInsets: \(Int(appearance.embeddedPaymentElement.row.additionalInsets))", + value: $appearance.embeddedPaymentElement.row.additionalInsets, in: 0...40) + DisclosureGroup { - Stepper("separatorThickness: \(Int(appearance.paymentOptionView.paymentMethodRow.flat.separatorThickness))", - value: $appearance.paymentOptionView.paymentMethodRow.flat.separatorThickness, in: 0...10) - ColorPicker("separatorColor", selection: paymentOptionViewFlatSeparatorColorBinding) - Stepper("leftSeparatorInset: \(Int(appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.left ?? 0))", - value: paymentOptionViewFlatLeftSeparatorInset, in: 0...20) - Stepper("rightSeparatorInset: \(Int(appearance.paymentOptionView.paymentMethodRow.flat.separatorInset?.right ?? 0))", - value: paymentOptionViewFlatRightSeparatorInset, in: 0...20) - Toggle("topSeparatorEnabled", isOn: $appearance.paymentOptionView.paymentMethodRow.flat.topSeparatorEnabled) - Toggle("bottomSeparatorEnabled", isOn: $appearance.paymentOptionView.paymentMethodRow.flat.bottomSeparatorEnabled) - + Stepper("separatorThickness: \(Int(appearance.embeddedPaymentElement.row.flat.separatorThickness))", + value: $appearance.embeddedPaymentElement.row.flat.separatorThickness, in: 0...10) + ColorPicker("separatorColor", selection: embeddedPaymentElementFlatSeparatorColorBinding) + Stepper("leftSeparatorInset: \(Int(appearance.embeddedPaymentElement.row.flat.separatorInsets?.left ?? 0))", + value: embeddedPaymentElementFlatLeftSeparatorInset, in: 0...20) + Stepper("rightSeparatorInset: \(Int(appearance.embeddedPaymentElement.row.flat.separatorInsets?.right ?? 0))", + value: embeddedPaymentElementFlatRightSeparatorInset, in: 0...20) + Toggle("topSeparatorEnabled", isOn: $appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled) + Toggle("bottomSeparatorEnabled", isOn: $appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled) + DisclosureGroup { - + ColorPicker("selectedColor", selection: embeddedPaymentElementFlatRadioColorSelected) + ColorPicker("unselectedColor", selection: embeddedPaymentElementFlatRadioColorUnselected) } label: { Text("Radio") } - + } label: { - Text("Flat with radio") + Text("FlatWithRadio") } - + DisclosureGroup { - Stepper("Spacing: \(Int(appearance.paymentOptionView.paymentMethodRow.floating.spacing))", - value: $appearance.paymentOptionView.paymentMethodRow.floating.spacing, in: 0...40) - + Stepper("Spacing: \(Int(appearance.embeddedPaymentElement.row.floating.spacing))", + value: $appearance.embeddedPaymentElement.row.floating.spacing, in: 0...40) + } label: { - Text("Floating") + Text("FloatingButton") } } label: { Text("Row") } - + } label: { - Text("PaymentOptionView") + Text("EmbeddedPaymentElement") } } From c7444540a83aa6c5570dbd7506a08dc220efbbe2 Mon Sep 17 00:00:00 2001 From: Nick Porter Date: Fri, 27 Sep 2024 09:30:26 -0600 Subject: [PATCH 4/4] PR feedback --- .../PaymentSheet Example/AppearancePlaygroundView.swift | 9 +++++++-- .../Source/PaymentSheet/PaymentSheetAppearance.swift | 1 + 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift b/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift index 8a9e12d79e8..e3b97a964a5 100644 --- a/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift +++ b/Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift @@ -6,7 +6,7 @@ // Copyright © 2022 stripe-ios. All rights reserved. // -@_spi(STP) @_spi(EmbeddedPaymentElementPrivateBeta) import StripePaymentSheet +@_spi(EmbeddedPaymentElementPrivateBeta) import StripePaymentSheet import SwiftUI @available(iOS 14.0, *) @@ -89,6 +89,11 @@ struct AppearancePlaygroundView: View { get: { self.appearance.borderWidth }, set: { self.appearance.borderWidth = $0 } ) + + let selectedBorderWidthBinding = Binding( + get: { appearance.selectedBorderWidth ?? appearance.borderWidth * 1.5 }, + set: { self.appearance.selectedBorderWidth = $0 } + ) let componentShadowColorBinding = Binding( get: { Color(self.appearance.shadow.color) }, @@ -284,7 +289,7 @@ struct AppearancePlaygroundView: View { Section(header: Text("Miscellaneous")) { Stepper(String(format: "cornerRadius: %.1f", appearance.cornerRadius), value: cornerRadiusBinding, in: 0...30) Stepper(String(format: "borderWidth: %.1f", appearance.borderWidth), value: borderWidthBinding, in: 0.0...2.0, step: 0.5) - Stepper(String(format: "selectedBorderWidth: %.1f", appearance.selectedBorderWidth ?? appearance.borderWidth * 1.5), value: borderWidthBinding, in: 0.0...2.0, step: 0.5) + Stepper(String(format: "selectedBorderWidth: %.1f", appearance.selectedBorderWidth ?? appearance.borderWidth * 1.5), value: selectedBorderWidthBinding, in: 0.0...2.0, step: 0.5) VStack { Text("componentShadow") ColorPicker("color", selection: componentShadowColorBinding) diff --git a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift index a378a370fff..42c75d32f69 100644 --- a/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift +++ b/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift @@ -276,6 +276,7 @@ public extension PaymentSheet { public var separatorColor: UIColor? /// The insets of the separator line between rows + /// - Note: If `nil`, defaults to `UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 0)` for style of `flatWithRadio` and to `UIEdgeInsets.zero` for style of `floatingButton`. public var separatorInsets: UIEdgeInsets? /// Determines if the top separator is visible at the top of the Embedded Mobile Payment Element