Add ability to customize SideTabBar's background and separator color (#…

…1943) * add sidetabbar tokens * fix whitespace
microsoft · Dec 13, 2023 · f505a42 · f505a42
1 parent 8fd3718
commit f505a42
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift
@@ -359,6 +359,10 @@ extension SideTabBarDemoController: DemoAppearanceDelegate {
 
     private var perControlOverrideSideTabBarItemTokens: [SideTabBarTokenSet.Tokens: ControlTokenValue] {
         return [
+            .backgroundColor: .uiColor {
+                return UIColor(light: GlobalTokens.sharedColor(.grape, .tint10),
+                               dark: GlobalTokens.sharedColor(.grape, .tint40))
+            },
             .tabBarItemTitleLabelFontPortrait: .uiFont {
                 return UIFont(descriptor: .init(name: "Papyrus", size: 20.0), size: 20.0)
             },
@@ -376,6 +380,10 @@ extension SideTabBarDemoController: DemoAppearanceDelegate {
                                lightHighContrast: GlobalTokens.sharedColor(.teal, .tint40),
                                dark: GlobalTokens.sharedColor(.pumpkin, .tint40),
                                darkHighContrast: GlobalTokens.sharedColor(.burgundy, .tint40))
+            },
+            .separatorColor: .uiColor {
+                return UIColor(light: GlobalTokens.sharedColor(.hotPink, .tint10),
+                               dark: GlobalTokens.sharedColor(.hotPink, .tint40))
             }
         ]
     }

diff --git a/ios/FluentUI/Tab Bar/SideTabBar.swift b/ios/FluentUI/Tab Bar/SideTabBar.swift
@@ -129,6 +129,8 @@ open class SideTabBar: UIView, TokenizedControlInternal {
         addSubview(topStackView)
         addSubview(bottomStackView)
 
+        updateAppearance()
+
         addInteraction(UILargeContentViewerInteraction())
 
         accessibilityTraits = .tabBar
@@ -160,13 +162,7 @@ open class SideTabBar: UIView, TokenizedControlInternal {
 
     private var layoutConstraints: [NSLayoutConstraint] = []
     private let borderLine = Separator(orientation: .vertical)
-
-    private let backgroundView: UIVisualEffectView = {
-        var style = UIBlurEffect.Style.regular
-        style = .systemChromeMaterial
-
-        return UIVisualEffectView(effect: UIBlurEffect(style: style))
-    }()
+    private let backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .systemChromeMaterial))
 
     private lazy var topStackView: UIStackView = {
         return SideTabBar.createStackView(spacing: SideTabBarTokenSet.tabBarItemSpacing)
@@ -345,8 +341,10 @@ open class SideTabBar: UIView, TokenizedControlInternal {
     public var tokenSet: SideTabBarTokenSet = .init()
 
     private func updateAppearance() {
+        backgroundColor = tokenSet[.backgroundColor].uiColor
         updateSideTabBarTokensForSection(in: .top)
         updateSideTabBarTokensForSection(in: .bottom)
+        borderLine.tokenSet[.color] = tokenSet[.separatorColor]
     }
 
     private func updateSideTabBarTokensForSection(in section: Section) {

diff --git a/ios/FluentUI/Tab Bar/SideTabBarTokenSet.swift b/ios/FluentUI/Tab Bar/SideTabBarTokenSet.swift
@@ -6,24 +6,33 @@
 import UIKit
 
 public enum SideTabBarToken: Int, TokenSetKey {
-    /// Optionally overrides the default background color of the  of the `TabBarItem` when selected.
+    /// Optionally overrides the default background color of the `SideTabBar`.
+    case backgroundColor
+
+    /// Optionally overrides the default background color of the `TabBarItem` when selected.
     case tabBarItemSelectedColor
 
-    /// Optionally overrides the default background color of the  of the `TabBarItem` when not selected.
+    /// Optionally overrides the default background color of the `TabBarItem` when not selected.
     case tabBarItemUnselectedColor
 
-    /// Optionally overrides the default font info for the title label of the `TabBarItem`when in portrait view.
+    /// Optionally overrides the default font info for the title label `TabBarItem`when in portrait view.
     case tabBarItemTitleLabelFontPortrait
 
-    /// Optionally overrides the default font info for the title label of the `TabBarItem`when in landscape view.
+    /// Optionally overrides the default font info for the title label `TabBarItem`when in landscape view.
     case tabBarItemTitleLabelFontLandscape
+
+    /// Optionally overrides the default color of the separator.
+    case separatorColor
 }
 
 /// Design token set for the `TabBar`.
 public class SideTabBarTokenSet: ControlTokenSet<SideTabBarToken> {
     init() {
         super.init { token, theme in
             switch token {
+            case .backgroundColor:
+                return .uiColor { .clear }
+
             case .tabBarItemSelectedColor:
                 return .uiColor {
                     assertionFailure("TabBarItem tokens are placeholders and should not be read.")
@@ -47,6 +56,9 @@ public class SideTabBarTokenSet: ControlTokenSet<SideTabBarToken> {
                     assertionFailure("TabBarItem tokens are placeholders and should not be read.")
                     return theme.typography(.body1)
                 }
+
+            case .separatorColor:
+                return .uiColor { theme.color(.stroke2) }
             }
         }
     }

diff --git a/ios/FluentUI/Tab Bar/TabBarTokenSet.swift b/ios/FluentUI/Tab Bar/TabBarTokenSet.swift
@@ -6,10 +6,10 @@
 import UIKit
 
 public enum TabBarToken: Int, TokenSetKey {
-    /// Defines the background color of the  of the `TabBarItem` when selected.
+    /// Defines the background color of the `TabBarItem` when selected.
     case tabBarItemSelectedColor
 
-    /// Defines the background color of the  of the `TabBarItem` when not selected.
+    /// Defines the background color of the `TabBarItem` when not selected.
     case tabBarItemUnselectedColor
 
     /// Font info for the title label when in portrait view.
@@ -18,9 +18,8 @@ public enum TabBarToken: Int, TokenSetKey {
     /// Font info for the title label when in landscape view.
     case tabBarItemTitleLabelFontLandscape
 
-        /// Defines the color of the top separator.
-        case separatorColor
-
+    /// Defines the color of the top separator.
+    case separatorColor
 }
 
 /// Design token set for the `TabBar`.