Merge pull request #862 from kiwicom/861-add-new-inkdark-button-theme

PavelHolec · web-flow · commit f2d1cfdbb663 · 2024-11-20T12:46:15.000+01:00
861 add new inkdark button theme
diff --git a/Snapshots/iPhone/ButtonLinkTests/testButtonLinks.1.png b/Snapshots/iPhone/ButtonLinkTests/testButtonLinks.1.png
diff --git a/Snapshots/iPhone/ButtonTests/testButtons.1.png b/Snapshots/iPhone/ButtonTests/testButtons.1.png
diff --git 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
@@ -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
@@ -132,6 +132,9 @@ public struct Card<Title: View, Description: View, Content: View, Action: View>:
     @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
@@ -3,9 +3,11 @@ import SwiftUI
 /// Button style for Orbit ``ButtonLink`` component.
 public struct OrbitButtonLinkButtonStyle<LeadingIcon: View, TrailingIcon: View>: PrimitiveButtonStyle {
 
+    @Environment(\.backgroundShape) private var backgroundShape
     @Environment(\.buttonSize) private var buttonSize
     @Environment(\.idealSize) private var idealSize
     @Environment(\.status) private var status
+    @Environment(\.textColor) private var textColor
 
     private let type: ButtonLinkType
     @ViewBuilder private let icon: LeadingIcon
@@ -28,17 +30,18 @@ public struct OrbitButtonLinkButtonStyle<LeadingIcon: View, TrailingIcon: View>:
             disclosureIcon
         }
         .textFontWeight(.medium)
-        .textColor(textColor)
-        .backgroundStyle(.clear, active: backgroundActive)
+        .textColor(textColor ?? labelColor)
+        .backgroundStyle(backgroundShape?.inactive ?? .clear, active: backgroundShape?.active ?? backgroundActive)
         .buttonSize(resolvedButtonSize)
         .idealSize(horizontal: idealSizeHorizontal, vertical: idealSize.vertical)
     }
 
     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
         }
     }
 
@@ -52,62 +55,64 @@ public struct OrbitButtonLinkButtonStyle<LeadingIcon: View, TrailingIcon: View>:
             : (resolvedButtonSize == .compact || idealSize.horizontal == true)
     }
 
-    private var textColor: Color {
+    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
@@ -33,44 +33,47 @@ public struct OrbitButtonStyle<LeadingIcon: View, TrailingIcon: View>: 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<LeadingIcon: View, TrailingIcon: View>: 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
@@ -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
@@ -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)

Original file line number	Diff line number	Diff line change
`@@ -156,6 +156,7 @@ public enum ButtonType {`
`156`	`156`	`case secondary`
`157`	`157`	`case critical`
`158`	`158`	`case criticalSubtle`
	`159`	`+ case prominent`
`159`	`160`	`case status(Status?, isSubtle: Bool = false)`
`160`	`161`	`}`
`161`	`162`
`@@ -307,6 +308,7 @@ struct ButtonPreviews: PreviewProvider {`
`307`	`308`	`buttons(.secondary)`
`308`	`309`	`buttons(.critical)`
`309`	`310`	`buttons(.criticalSubtle)`
	`311`	`+ buttons(.prominent)`
`310`	`312`	`}`
`311`	`313`	`.padding(.medium)`
`312`	`314`	`}`
Original file line number	Diff line number	Diff line change
`@@ -151,6 +151,7 @@ public extension ButtonLink where Label == Text, LeadingIcon == Orbit.Icon, Trai`
`151`	`151`	`public enum ButtonLinkType: Equatable, Sendable {`
`152`	`152`	`case primary`
`153`	`153`	`case critical`
	`154`	`+ case prominent`
`154`	`155`	`case status(_ status: Status?)`
`155`	`156`	`}`
`156`	`157`
`@@ -223,10 +224,12 @@ struct ButtonLinkPreviews: PreviewProvider {`
`223`	`224`	`VStack(alignment: .leading, spacing: .large) {`
`224`	`225`	`ButtonLink("ButtonLink Primary", type: .primary, action: {})`
`225`	`226`	`ButtonLink("ButtonLink Critical", type: .critical, action: {})`
	`227`	`+ ButtonLink("ButtonLink Prominent", type: .prominent, action: {})`
`226`	`228`	`}`
`227`	`229`	`VStack(alignment: .leading, spacing: .large) {`
`228`	`230`	`ButtonLink("ButtonLink Primary", icon: .accommodation, type: .primary, action: {})`
`229`	`231`	`ButtonLink("ButtonLink Critical", icon: .alertCircle, type: .critical, action: {})`
	`232`	`+ ButtonLink("ButtonLink Prominent", icon: .alertCircle, type: .prominent, action: {})`
`230`	`233`	`}`
`231`	`234`	`}`
`232`	`235`	`.buttonSize(.compact)`
Original file line number	Diff line number	Diff line change
`@@ -3,9 +3,11 @@ import SwiftUI`
`3`	`3`	/// Button style for Orbit ``ButtonLink`` component.
`4`	`4`	`public struct OrbitButtonLinkButtonStyle<LeadingIcon: View, TrailingIcon: View>: PrimitiveButtonStyle {`
`5`	`5`
	`6`	`+ @Environment(\.backgroundShape) private var backgroundShape`
`6`	`7`	`@Environment(\.buttonSize) private var buttonSize`
`7`	`8`	`@Environment(\.idealSize) private var idealSize`
`8`	`9`	`@Environment(\.status) private var status`
	`10`	`+ @Environment(\.textColor) private var textColor`
`9`	`11`
`10`	`12`	`private let type: ButtonLinkType`
`11`	`13`	`@ViewBuilder private let icon: LeadingIcon`
`@@ -28,17 +30,18 @@ public struct OrbitButtonLinkButtonStyle<LeadingIcon: View, TrailingIcon: View>:`
`28`	`30`	`disclosureIcon`
`29`	`31`	`}`
`30`	`32`	`.textFontWeight(.medium)`
`31`		`- .textColor(textColor)`
`32`		`- .backgroundStyle(.clear, active: backgroundActive)`
	`33`	`+ .textColor(textColor ?? labelColor)`
	`34`	`+ .backgroundStyle(backgroundShape?.inactive ?? .clear, active: backgroundShape?.active ?? backgroundActive)`
`33`	`35`	`.buttonSize(resolvedButtonSize)`
`34`	`36`	`.idealSize(horizontal: idealSizeHorizontal, vertical: idealSize.vertical)`
`35`	`37`	`}`
`36`	`38`
`37`	`39`	`private var backgroundActive: Color {`
`38`	`40`	`switch type {`
`39`		`- case .primary: return .productLightActive`
`40`		`- case .critical: return .redLightActive`
`41`		`- case .status(let status): return (status ?? self.status)?.lightActiveColor ?? .productLightActive`
	`41`	`+ case .primary: .productLightActive`
	`42`	`+ case .critical: .redLightActive`
	`43`	`+ case .prominent: .cloudLightActive`
	`44`	`+ case .status(let status): (status ?? self.status)?.lightActiveColor ?? .productLightActive`
`42`	`45`	`}`
`43`	`46`	`}`
`44`	`47`
`@@ -52,62 +55,64 @@ public struct OrbitButtonLinkButtonStyle<LeadingIcon: View, TrailingIcon: View>:`
`52`	`55`	`: (resolvedButtonSize == .compact \|\| idealSize.horizontal == true)`
`53`	`56`	`}`
`54`	`57`
`55`		`- private var textColor: Color {`
	`58`	`+ private var labelColor: Color {`
`56`	`59`	`switch type {`
`57`		`- case .primary: return .productNormal`
`58`		`- case .critical: return .redNormal`
`59`		`- case .status(let status): return (status ?? self.status)?.color ?? .productNormal`
	`60`	`+ case .primary: .productNormal`
	`61`	`+ case .critical: .redNormal`
	`62`	`+ case .prominent: .inkDark`
	`63`	`+ case .status(let status): (status ?? self.status)?.color ?? .productNormal`
`60`	`64`	`}`
`61`	`65`	`}`
`62`	`66`
`63`	`67`	`private var textActiveColor: Color {`
`64`	`68`	`switch type {`
`65`		`- case .primary: return .productDarkActive`
`66`		`- case .critical: return .redDarkActive`
`67`		`- case .status(let status): return (status ?? self.status)?.darkHoverColor ?? .productDarkActive`
	`69`	`+ case .primary: .productDarkActive`
	`70`	`+ case .critical: .redDarkActive`
	`71`	`+ case .prominent: .inkDarkActive`
	`72`	`+ case .status(let status): (status ?? self.status)?.darkHoverColor ?? .productDarkActive`
`68`	`73`	`}`
`69`	`74`	`}`
`70`	`75`
`71`	`76`	`private var resolvedStatus: Status {`
`72`	`77`	`switch type {`
`73`		`- case .status(let status): return status ?? self.status ?? .info`
`74`		`- default: return .info`
	`78`	`+ case .status(let status): status ?? self.status ?? .info`
	`79`	`+ default: .info`
`75`	`80`	`}`
`76`	`81`	`}`
`77`	`82`
`78`	`83`	`private var hapticFeedback: HapticsProvider.HapticFeedbackType {`
`79`	`84`	`switch type {`
`80`		`- case .primary: return .light(1)`
`81`		`- case .critical: return .notification(.error)`
`82`		`- case .status: return resolvedStatus.defaultHapticFeedback`
	`85`	`+ case .primary, .prominent: .light(1)`
	`86`	`+ case .critical: .notification(.error)`
	`87`	`+ case .status: resolvedStatus.defaultHapticFeedback`
`83`	`88`	`}`
`84`	`89`	`}`
`85`	`90`
`86`	`91`	`private var horizontalPadding: CGFloat {`
`87`	`92`	`switch resolvedButtonSize {`
`88`		`- case .regular: return .small`
`89`		`- case .compact: return 0`
	`93`	`+ case .regular: .small`
	`94`	`+ case .compact: 0`
`90`	`95`	`}`
`91`	`96`	`}`
`92`	`97`
`93`	`98`	`private var verticalPadding: CGFloat {`
`94`	`99`	`switch resolvedButtonSize {`
`95`		`- case .regular: return .small // = 44 height @ normal size`
`96`		`- case .compact: return 6 // = 32 height @ normal size`
	`100`	`+ case .regular: .small // = 44 height @ normal size`
	`101`	`+ case .compact: 6 // = 32 height @ normal size`
`97`	`102`	`}`
`98`	`103`	`}`
`99`	`104`
`100`	`105`	`private var horizontalBackgroundPadding: CGFloat {`
`101`	`106`	`switch resolvedButtonSize {`
`102`		`- case .regular: return 0`
`103`		`- case .compact: return .xSmall`
	`107`	`+ case .regular: 0`
	`108`	`+ case .compact: .xSmall`
`104`	`109`	`}`
`105`	`110`	`}`
`106`	`111`
`107`	`112`	`private var verticalBackgroundPadding: CGFloat {`
`108`	`113`	`switch resolvedButtonSize {`
`109`		`- case .regular: return 0`
`110`		`- case .compact: return .xxxSmall`
	`114`	`+ case .regular: 0`
	`115`	`+ case .compact: .xxxSmall`
`111`	`116`	`}`
`112`	`117`	`}`
`113`	`118`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ struct StorybookButton {`
`10`	`10`	`buttons(.secondary)`
`11`	`11`	`buttons(.critical)`
`12`	`12`	`buttons(.criticalSubtle)`
	`13`	`+ buttons(.prominent)`
`13`	`14`	`}`
`14`	`15`	`.previewDisplayName()`
`15`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,10 +8,12 @@ struct StorybookButtonLink {`
`8`	`8`	`VStack(alignment: .leading, spacing: .large) {`
`9`	`9`	`ButtonLink("ButtonLink Primary", type: .primary, action: {})`
`10`	`10`	`ButtonLink("ButtonLink Critical", type: .critical, action: {})`
	`11`	`+ ButtonLink("ButtonLink Prominent", type: .prominent, action: {})`
`11`	`12`	`}`
`12`	`13`	`VStack(alignment: .leading, spacing: .large) {`
`13`	`14`	`ButtonLink("ButtonLink Primary", icon: .accommodation, type: .primary, action: {})`
`14`	`15`	`ButtonLink("ButtonLink Critical", icon: .alertCircle, type: .critical, action: {})`
	`16`	`+ ButtonLink("ButtonLink Prominent", icon: .alertCircle, type: .prominent, action: {})`
`15`	`17`	`}`
`16`	`18`	`}`
`17`	`19`	`.buttonSize(.compact)`