Extend FluentButtonToggleStyle to support overrideTokens(_:) (microso…

…ft#1996) * Extend FluentButtonToggleStyle to support overrideTokens(_:) and add functionality to the SwiftUI button demo.
nodes11 · Apr 24, 2024 · de8bfa5 · de8bfa5
1 parent 281aaee
commit de8bfa5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController_SwiftUI.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController_SwiftUI.swift
@@ -82,6 +82,7 @@ struct ButtonDemoView: View {
     @State var size: ControlSize = .large
     @State var style: FluentUI.ButtonStyle = .accent
     @State var showToggle: Bool = false
+    @State var showThemeOverrides: Bool = false
 
     @Environment(\.fluentTheme) var fluentTheme: FluentTheme
 
@@ -106,7 +107,7 @@ struct ButtonDemoView: View {
         }, label: {
             buttonLabel
         })
-        .buttonStyle(FluentButtonStyle(style: buttonStyle))
+        .buttonStyle(fluentButtonStyle(style: buttonStyle))
         .controlSize(controlSize)
         .disabled(isDisabled)
         .fixedSize()
@@ -121,7 +122,7 @@ struct ButtonDemoView: View {
         Toggle(isOn: $isToggleOn, label: {
             buttonLabel
         })
-        .toggleStyle(FluentButtonToggleStyle())
+        .toggleStyle(fluentButtonToggleStyle())
         .controlSize(controlSize)
         .disabled(isDisabled)
         .fixedSize()
@@ -162,6 +163,8 @@ struct ButtonDemoView: View {
                         Text("\(buttonSize.description)").tag(buttonSize)
                     }
                 }
+
+                FluentUIDemoToggle(titleKey: "Show theme overrides", isOn: $showThemeOverrides)
             }
 
             Section("More") {
@@ -188,6 +191,26 @@ struct ButtonDemoView: View {
             }
         }
     }
+
+    private func fluentButtonStyle(style: FluentUI.ButtonStyle) -> FluentButtonStyle {
+        var buttonStyle = FluentButtonStyle(style: style)
+        if showThemeOverrides {
+            buttonStyle.overrideTokens(tokenOverrides)
+        }
+        return buttonStyle
+    }
+
+    private func fluentButtonToggleStyle() -> FluentButtonToggleStyle {
+        var buttonToggleStyle = FluentButtonToggleStyle()
+        if showThemeOverrides {
+            buttonToggleStyle.overrideTokens(tokenOverrides)
+        }
+        return buttonToggleStyle
+    }
+
+    private var tokenOverrides: [ButtonToken: ControlTokenValue] = [
+        .backgroundPressedColor: .uiColor { .red }
+    ]
 }
 
 private extension ControlSize {

diff --git a/ios/FluentUI/Button/FluentButtonToggleStyle.swift b/ios/FluentUI/Button/FluentButtonToggleStyle.swift
@@ -33,17 +33,38 @@ public struct FluentButtonToggleStyle: ToggleStyle {
     }
 
     private var buttonTokens: [ButtonToken: ControlTokenValue] {
-        [
+        var tokens: [ButtonToken: ControlTokenValue] = [
             .cornerRadius: .float { GlobalTokens.corner(.radius40) }
         ]
+
+        if let tokenOverrides = tokenOverrides {
+            tokens = tokens.merging(tokenOverrides) { (_, new) in new }
+        }
+
+        return tokens
     }
 
     private var buttonOnTokens: [ButtonToken: ControlTokenValue] {
         let backgroundColor = fluentTheme.color(.brandBackgroundTint)
-        return buttonTokens.merging([
+        var tokens: [ButtonToken: ControlTokenValue] = buttonTokens.merging([
             .backgroundColor: .uiColor { backgroundColor },
             .backgroundPressedColor: .uiColor { backgroundColor },
             .backgroundFocusedColor: .uiColor { backgroundColor }
         ]) { (_, new) in new }
+
+        if let tokenOverrides = tokenOverrides {
+            tokens = tokens.merging(tokenOverrides) { (_, new) in new }
+        }
+
+        return tokens
+    }
+
+    private var tokenOverrides: [ButtonToken: ControlTokenValue]?
+}
+
+public extension FluentButtonToggleStyle {
+    /// Provide override values for various `ButtonToken` values.
+    mutating func overrideTokens(_ overrides: [ButtonToken: ControlTokenValue]) {
+        tokenOverrides = overrides
     }
 }