From f505a428c6c5755d11c4a919329e6a8df9ec077d Mon Sep 17 00:00:00 2001
From: Joanna Qu <55368679+joannaquu@users.noreply.github.com>
Date: Wed, 13 Dec 2023 11:05:24 -0800
Subject: [PATCH] Add ability to customize SideTabBar's background and
 separator color (#1943)

* add sidetabbar tokens

* fix whitespace
---
 .../Demos/SideTabBarDemoController.swift      |  8 ++++++++
 ios/FluentUI/Tab Bar/SideTabBar.swift         | 12 +++++------
 ios/FluentUI/Tab Bar/SideTabBarTokenSet.swift | 20 +++++++++++++++----
 ios/FluentUI/Tab Bar/TabBarTokenSet.swift     |  9 ++++-----
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift
index 0d189b3448..ee1ac82476 100644
--- 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
index 023ae2edb2..9c63e8ca80 100644
--- 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
index f5df1ee366..5e8a534f35 100644
--- a/ios/FluentUI/Tab Bar/SideTabBarTokenSet.swift	
+++ b/ios/FluentUI/Tab Bar/SideTabBarTokenSet.swift	
@@ -6,17 +6,23 @@
 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`.
@@ -24,6 +30,9 @@ 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
index f5c6dc2253..8629a57d57 100644
--- 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`.