diff --git a/Sources/Orbit/Components/Button.swift b/Sources/Orbit/Components/Button.swift index 09d68dabc92..565c74fbd26 100644 --- a/Sources/Orbit/Components/Button.swift +++ b/Sources/Orbit/Components/Button.swift @@ -156,6 +156,7 @@ public enum ButtonType { case secondary case critical case criticalSubtle + case prominent case status(Status?, isSubtle: Bool = false) } @@ -307,6 +308,7 @@ struct ButtonPreviews: PreviewProvider { buttons(.secondary) buttons(.critical) buttons(.criticalSubtle) + buttons(.prominent) } .padding(.medium) } diff --git a/Sources/Orbit/Components/ButtonLink.swift b/Sources/Orbit/Components/ButtonLink.swift index 05ccb3f709a..9c7068c97c3 100644 --- a/Sources/Orbit/Components/ButtonLink.swift +++ b/Sources/Orbit/Components/ButtonLink.swift @@ -151,6 +151,7 @@ public extension ButtonLink where Label == Text, LeadingIcon == Orbit.Icon, Trai public enum ButtonLinkType: Equatable, Sendable { case primary case critical + case prominent case status(_ status: Status?) } @@ -223,10 +224,12 @@ struct ButtonLinkPreviews: PreviewProvider { VStack(alignment: .leading, spacing: .large) { ButtonLink("ButtonLink Primary", type: .primary, action: {}) ButtonLink("ButtonLink Critical", type: .critical, action: {}) + ButtonLink("ButtonLink Prominent", type: .prominent, action: {}) } VStack(alignment: .leading, spacing: .large) { ButtonLink("ButtonLink Primary", icon: .accommodation, type: .primary, action: {}) ButtonLink("ButtonLink Critical", icon: .alertCircle, type: .critical, action: {}) + ButtonLink("ButtonLink Prominent", icon: .alertCircle, type: .prominent, action: {}) } } .buttonSize(.compact) diff --git a/Sources/Orbit/Components/Card.swift b/Sources/Orbit/Components/Card.swift index 7bcfa51d756..a964197c955 100644 --- a/Sources/Orbit/Components/Card.swift +++ b/Sources/Orbit/Components/Card.swift @@ -132,6 +132,9 @@ public struct Card: @ViewBuilder private var topTrailingAction: some View { action .buttonSize(.compact) + // Remove any text or background overrides + .environment(\.backgroundShape, nil) + .textColor(nil) // Prevent the default ButtonLink from vertically expanding the header .padding(.vertical, -.xSmall) .accessibility(.cardAction) diff --git a/Sources/Orbit/Support/ButtonStyles/OrbitButtonLinkButtonStyle.swift b/Sources/Orbit/Support/ButtonStyles/OrbitButtonLinkButtonStyle.swift index d4a1ff9fd87..16782422e7f 100644 --- a/Sources/Orbit/Support/ButtonStyles/OrbitButtonLinkButtonStyle.swift +++ b/Sources/Orbit/Support/ButtonStyles/OrbitButtonLinkButtonStyle.swift @@ -38,9 +38,10 @@ public struct OrbitButtonLinkButtonStyle: private var backgroundActive: Color { switch type { - case .primary: return .productLightActive - case .critical: return .redLightActive - case .status(let status): return (status ?? self.status)?.lightActiveColor ?? .productLightActive + case .primary: .productLightActive + case .critical: .redLightActive + case .prominent: .cloudLightActive + case .status(let status): (status ?? self.status)?.lightActiveColor ?? .productLightActive } } @@ -56,60 +57,62 @@ public struct OrbitButtonLinkButtonStyle: private var labelColor: Color { switch type { - case .primary: return .productNormal - case .critical: return .redNormal - case .status(let status): return (status ?? self.status)?.color ?? .productNormal + case .primary: .productNormal + case .critical: .redNormal + case .prominent: .inkDark + case .status(let status): (status ?? self.status)?.color ?? .productNormal } } private var textActiveColor: Color { switch type { - case .primary: return .productDarkActive - case .critical: return .redDarkActive - case .status(let status): return (status ?? self.status)?.darkHoverColor ?? .productDarkActive + case .primary: .productDarkActive + case .critical: .redDarkActive + case .prominent: .inkDarkActive + case .status(let status): (status ?? self.status)?.darkHoverColor ?? .productDarkActive } } private var resolvedStatus: Status { switch type { - case .status(let status): return status ?? self.status ?? .info - default: return .info + case .status(let status): status ?? self.status ?? .info + default: .info } } private var hapticFeedback: HapticsProvider.HapticFeedbackType { switch type { - case .primary: return .light(1) - case .critical: return .notification(.error) - case .status: return resolvedStatus.defaultHapticFeedback + case .primary, .prominent: .light(1) + case .critical: .notification(.error) + case .status: resolvedStatus.defaultHapticFeedback } } private var horizontalPadding: CGFloat { switch resolvedButtonSize { - case .regular: return .small - case .compact: return 0 + case .regular: .small + case .compact: 0 } } private var verticalPadding: CGFloat { switch resolvedButtonSize { - case .regular: return .small // = 44 height @ normal size - case .compact: return 6 // = 32 height @ normal size + case .regular: .small // = 44 height @ normal size + case .compact: 6 // = 32 height @ normal size } } private var horizontalBackgroundPadding: CGFloat { switch resolvedButtonSize { - case .regular: return 0 - case .compact: return .xSmall + case .regular: 0 + case .compact: .xSmall } } private var verticalBackgroundPadding: CGFloat { switch resolvedButtonSize { - case .regular: return 0 - case .compact: return .xxxSmall + case .regular: 0 + case .compact: .xxxSmall } } diff --git a/Sources/Orbit/Support/ButtonStyles/OrbitButtonStyle.swift b/Sources/Orbit/Support/ButtonStyles/OrbitButtonStyle.swift index 617a3c42477..0ca71a1c641 100644 --- a/Sources/Orbit/Support/ButtonStyles/OrbitButtonStyle.swift +++ b/Sources/Orbit/Support/ButtonStyles/OrbitButtonStyle.swift @@ -33,44 +33,47 @@ public struct OrbitButtonStyle: Primitive private var background: Color { switch type { - case .primary: return .productNormal - case .primarySubtle: return .productLight - case .secondary: return .cloudNormal - case .critical: return .redNormal - case .criticalSubtle: return .redLight - case .status(let status, false): return (status ?? self.status)?.color ?? .productNormal - case .status(let status, true): return (status ?? self.status)?.lightHoverColor ?? .productLight + case .primary: .productNormal + case .primarySubtle: .productLight + case .secondary: .cloudNormal + case .critical: .redNormal + case .criticalSubtle: .redLight + case .prominent: .inkDark + case .status(let status, false): (status ?? self.status)?.color ?? .productNormal + case .status(let status, true): (status ?? self.status)?.lightHoverColor ?? .productLight } } private var backgroundActive: Color { switch type { - case .primary: return .productNormalActive - case .primarySubtle: return .productLightActive - case .secondary: return .cloudNormalActive - case .critical: return .redNormalActive - case .criticalSubtle: return .redLightActive - case .status(let status, false): return (status ?? self.status)?.activeColor ?? .productNormalActive - case .status(let status, true): return (status ?? self.status)?.lightActiveColor ?? .productLightActive + case .primary: .productNormalActive + case .primarySubtle: .productLightActive + case .secondary: .cloudNormalActive + case .critical: .redNormalActive + case .criticalSubtle: .redLightActive + case .prominent: .inkDarkActive + case .status(let status, false): (status ?? self.status)?.activeColor ?? .productNormalActive + case .status(let status, true): (status ?? self.status)?.lightActiveColor ?? .productLightActive } } private var labelColor: Color { switch type { - case .primary: return .whiteNormal - case .primarySubtle: return .productDark - case .secondary: return .inkDark - case .critical: return .whiteNormal - case .criticalSubtle: return .redDark - case .status(_, false): return .whiteNormal - case .status(let status, true): return (status ?? self.status)?.darkHoverColor ?? .whiteNormal + case .primary: .whiteNormal + case .primarySubtle: .productDark + case .secondary: .inkDark + case .critical: .whiteNormal + case .criticalSubtle: .redDark + case .prominent: .whiteNormal + case .status(_, false): .whiteNormal + case .status(let status, true): (status ?? self.status)?.darkHoverColor ?? .whiteNormal } } private var resolvedStatus: Status { switch type { - case .status(let status, _): return status ?? self.status ?? .info - default: return .info + case .status(let status, _): status ?? self.status ?? .info + default: .info } } @@ -80,24 +83,24 @@ public struct OrbitButtonStyle: Primitive private var hapticFeedback: HapticsProvider.HapticFeedbackType { switch type { - case .primary: return .light(1) - case .primarySubtle, .secondary: return .light(0.5) - case .critical, .criticalSubtle: return .notification(.error) - case .status: return resolvedStatus.defaultHapticFeedback + case .primary, .prominent: .light(1) + case .primarySubtle, .secondary: .light(0.5) + case .critical, .criticalSubtle: .notification(.error) + case .status: resolvedStatus.defaultHapticFeedback } } private var textSize: Text.Size { switch resolvedButtonSize { - case .regular: return .normal - case .compact: return .small + case .regular: .normal + case .compact: .small } } private var padding: CGFloat { switch resolvedButtonSize { - case .regular: return .small // = 44 height @ normal size - case .compact: return .xSmall // = 32 height @ normal size + case .regular: .small // = 44 height @ normal size + case .compact: .xSmall // = 32 height @ normal size } } diff --git a/Sources/OrbitStorybook/Detail/Items/StorybookButton.swift b/Sources/OrbitStorybook/Detail/Items/StorybookButton.swift index 25c802aad3f..f7400d08f33 100644 --- a/Sources/OrbitStorybook/Detail/Items/StorybookButton.swift +++ b/Sources/OrbitStorybook/Detail/Items/StorybookButton.swift @@ -10,6 +10,7 @@ struct StorybookButton { buttons(.secondary) buttons(.critical) buttons(.criticalSubtle) + buttons(.prominent) } .previewDisplayName() } diff --git a/Sources/OrbitStorybook/Detail/Items/StorybookButtonLink.swift b/Sources/OrbitStorybook/Detail/Items/StorybookButtonLink.swift index a468f5ca07f..0ed9d9aa429 100644 --- a/Sources/OrbitStorybook/Detail/Items/StorybookButtonLink.swift +++ b/Sources/OrbitStorybook/Detail/Items/StorybookButtonLink.swift @@ -8,10 +8,12 @@ struct StorybookButtonLink { VStack(alignment: .leading, spacing: .large) { ButtonLink("ButtonLink Primary", type: .primary, action: {}) ButtonLink("ButtonLink Critical", type: .critical, action: {}) + ButtonLink("ButtonLink Prominent", type: .prominent, action: {}) } VStack(alignment: .leading, spacing: .large) { ButtonLink("ButtonLink Primary", icon: .accommodation, type: .primary, action: {}) ButtonLink("ButtonLink Critical", icon: .alertCircle, type: .critical, action: {}) + ButtonLink("ButtonLink Prominent", icon: .alertCircle, type: .prominent, action: {}) } } .buttonSize(.compact)