Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update embedded appearance API and add to playground #4062

Merged
merged 5 commits into from
Sep 27, 2024
Merged

Update embedded appearance API and add to playground #4062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
86a020d
Update Appearance playground for embedded
porter-stripe Sep 21, 2024
c0e6d6d
Merge branch 'master' into porter/embedded-appearance-playground
porter-stripe Sep 26, 2024
bfc8212
Update embedded API review based on API review
porter-stripe Sep 26, 2024
41377a1
Add embedded appearance API to playground
porter-stripe Sep 26, 2024
c744454
PR feedback
porter-stripe Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 104 additions & 1 deletion Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// Copyright © 2022 stripe-ios. All rights reserved.
//

@_spi(STP) import StripePaymentSheet
@_spi(EmbeddedPaymentElementPrivateBeta) import StripePaymentSheet
import SwiftUI

@available(iOS 14.0, *)
Expand Down Expand Up @@ -40,6 +40,11 @@ struct AppearancePlaygroundView: View {
set: { self.appearance.colors.componentBorder = 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(
get: { Color(self.appearance.colors.componentDivider) },
set: { self.appearance.colors.componentDivider = UIColor($0) }
Expand Down Expand Up @@ -84,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) },
Expand Down Expand Up @@ -212,6 +222,47 @@ struct AppearancePlaygroundView: View {
}
)

let embeddedPaymentElementFlatSeparatorColorBinding = Binding(
get: { Color(self.appearance.embeddedPaymentElement.row.flat.separatorColor ?? appearance.colors.componentBorder) },
set: {
if self.appearance.embeddedPaymentElement.row.flat.separatorColor == nil {
self.appearance.embeddedPaymentElement.row.flat.separatorColor = appearance.colors.componentBorder
} else {
self.appearance.embeddedPaymentElement.row.flat.separatorColor = UIColor($0)
}
}
)

let embeddedPaymentElementFlatRadioColorSelected = Binding(
get: { Color(self.appearance.embeddedPaymentElement.row.flat.radio.selectedColor ?? appearance.colors.primary) },
set: {
self.appearance.embeddedPaymentElement.row.flat.radio.selectedColor = UIColor($0)
}
)

let embeddedPaymentElementFlatRadioColorUnselected = Binding(
get: { Color(self.appearance.embeddedPaymentElement.row.flat.radio.unselectedColor ?? appearance.colors.componentBorder) },
set: {
self.appearance.embeddedPaymentElement.row.flat.radio.unselectedColor = UIColor($0)
}
)

let embeddedPaymentElementFlatLeftSeparatorInset = Binding(
get: { self.appearance.embeddedPaymentElement.row.flat.separatorInsets?.left ?? 0 },
set: {
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 embeddedPaymentElementFlatRightSeparatorInset = Binding(
get: { self.appearance.embeddedPaymentElement.row.flat.separatorInsets?.right ?? 0 },
set: {
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)
}
)

let regularFonts = ["AvenirNext-Regular", "PingFangHK-Regular", "ChalkboardSE-Light"]

NavigationView {
Expand All @@ -222,6 +273,7 @@ struct AppearancePlaygroundView: View {
ColorPicker("background", selection: backgroundColorBinding)
ColorPicker("componentBackground", selection: componentBackgroundColorBinding)
ColorPicker("componentBorder", selection: componentBorderColorBinding)
ColorPicker("selectedComponentBorder", selection: selectedComponentBorderColorBinding)
ColorPicker("componentDivider", selection: componentDividerColorBinding)
ColorPicker("text", selection: textColorBinding)
ColorPicker("textSecondary", selection: textSecondaryColorBinding)
Expand All @@ -237,6 +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: selectedBorderWidthBinding, in: 0.0...2.0, step: 0.5)
VStack {
Text("componentShadow")
ColorPicker("color", selection: componentShadowColorBinding)
Expand Down Expand Up @@ -310,6 +363,56 @@ struct AppearancePlaygroundView: View {
}
}

Section(header: Text("EmbeddedPaymentElement")) {
DisclosureGroup {
Picker("Style", selection: $appearance.embeddedPaymentElement.style) {
ForEach(PaymentSheet.Appearance.EmbeddedPaymentElement.Style.allCases, id: \.self) {
Text(String(describing: $0))
}
}

DisclosureGroup {
Stepper("additionalInsets: \(Int(appearance.embeddedPaymentElement.row.additionalInsets))",
value: $appearance.embeddedPaymentElement.row.additionalInsets, in: 0...40)

DisclosureGroup {
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("FlatWithRadio")
}

DisclosureGroup {
Stepper("Spacing: \(Int(appearance.embeddedPaymentElement.row.floating.spacing))",
value: $appearance.embeddedPaymentElement.row.floating.spacing, in: 0...40)

} label: {
Text("FloatingButton")
}
} label: {
Text("Row")
}

} label: {
Text("EmbeddedPaymentElement")
}
}

Button {
appearance = PaymentSheet.Appearance()
doneAction(appearance)
Expand Down
28 changes: 14 additions & 14 deletions ...entSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentMethodsView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}()

Expand All @@ -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? = {
Expand Down Expand Up @@ -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)
Expand All @@ -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
}
}
Expand Down
4 changes: 2 additions & 2 deletions StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/RadioButton.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
61 changes: 31 additions & 30 deletions StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -234,54 +234,55 @@ 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
public enum Style {
/// 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
/// - 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 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
Expand All @@ -291,15 +292,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
Expand Down
Loading
Loading