[Fluent 2 Tokens] Merge main (#1384)

* Drop support for iOS 14 and remove availability checks (#1357) * Update FluentUI project * Update FluentUI xcconfig * Update FluentUI.Demo project * Update MicrosoftFluentUI.podspec * Clean up Button * Clean up CommandBarButton * Clean up CommandBarButtonGroupView * Clean up LargeContentViewerModifier * Clean up Drawer * Clean up NavigationBar * Clean up BadgeLabelButton * Clean up PillButton * Clean up PillButtonBar * Clean up SegmentedPillButton * Clean up SideTabBar * Clean up TabBarView * Clean up PillButton v2 * Clean up PillButton v3 * Revert "Update FluentUI project" This reverts commit 1c97631. * Update README.md * Update Package.swift * Make ShimmerLinesView inherit ShimmerView init (#1362) * Make ShimmerLinesView inherit ShimmerView init * move shimmer to fluent2 and add new api to demo * Bring fluent2-tokens Segmented Control to main (#1363) * Bring in fluent2-token control * Add token set to project * Update dependent controls * Add colored background for demo * Update demos * Update demo order * Fix whitespace error * Add demo to show notification bar from top (#1364) * Update PR Template to include binary change (#1368) * Fix PersonaListViewDemoController navigation bar transparency bug (#1372) * Change from DemoController to UIViewController * Revert "Change from DemoController to UIViewController" This reverts commit 3b3aeb0. * Fix bug * Remove retain cycles (#1374) * update xcode version to 14.1 for ci (#1371) (#1378) * Implement the Unread Dot for TabBar and SideTabBar (#1349) * Implementing the unread dot on TabBarView * Better naming for variables and events * Updating SideTabBar demo to show the unread dot * Pr feedback - reorganizing, renaming, better documentation * Updating variable names and locations to follow guidance * Added accessibility string for unread dot * Switching to using a badge label for the unread dot * Cleaning up commented out code * Simplifying logic, using a single view for both the badge and the unreadDot * PR cleanup * Add isViewLoaded check (#1379) * Revert "Drop support for iOS 14 and remove availability checks (#1357)" (#1383) * Revert "Drop support for iOS 14 and remove availability checks (#1357)" This reverts commit 4fad398. * Fix whitespace error * Resolving merge conflicts * Reverting Package.resolved to main * Whitespace in Package.resolved Co-authored-by: huwilkes <67026548+huwilkes@users.noreply.github.com> Co-authored-by: Jeanie Huynh <31874971+jeaniehuynh@users.noreply.github.com> Co-authored-by: Lamine Male <106181067+laminesm@users.noreply.github.com> Co-authored-by: Mike Schreiber <mischreiber@microsoft.com> Co-authored-by: Harrie Shin <hyshin@microsoft.com>
microsoft · Nov 21, 2022 · 9dd6669 · 9dd6669
1 parent b55dd4a
commit 9dd6669
Show file tree

Hide file tree

Showing 18 changed files with 222 additions and 85 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,6 +4,17 @@
 
 ### Description of changes
 
+Binary change:
+<!---
+Please fill in the below table using the size of the Demo app, as found in Finder, from 
+the latest state of the branch you are merging in to and the latest state of your changes.
+In order to get an accurate measurement for iOS, please build the Demo app using the
+Demo.Release scheme for "Any iOS Device (arm64)"
+--->
+| Before | After |
+|--------|-------|
+|        |       |
+
 (a summary of the changes made, often organized by file)
 
 ### Verification

diff --git a/ios/FluentUI.Demo/FluentUI.Demo.xcodeproj/project.pbxproj b/ios/FluentUI.Demo/FluentUI.Demo.xcodeproj/project.pbxproj
@@ -78,6 +78,7 @@
 		E6842996247C350700A29C40 /* DemoColorThemes.swift in Sources */ = {isa = PBXBuildFile; fileRef = E6842995247C350700A29C40 /* DemoColorThemes.swift */; };
 		EC02A5F9274EED9200E81B3E /* DividerDemoController_SwiftUI.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC02A5F8274EED9200E81B3E /* DividerDemoController_SwiftUI.swift */; };
 		EC24DBC628B97EB70026EF92 /* PopupMenuObjCDemoController.m in Sources */ = {isa = PBXBuildFile; fileRef = EC24DBC528B97EB70026EF92 /* PopupMenuObjCDemoController.m */; };
+		EC1C31752923032000CF052C /* ColoredPillBackgroundView.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC1C31742923032000CF052C /* ColoredPillBackgroundView.swift */; };
 		EC6A71EC273DE6DF0076A586 /* DividerDemoController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC6A71EB273DE6DF0076A586 /* DividerDemoController.swift */; };
 		ECCABFB227DFFA070037C70C /* ColoredPillBackgroundView.swift in Sources */ = {isa = PBXBuildFile; fileRef = ECCABFB127DFFA070037C70C /* ColoredPillBackgroundView.swift */; };
 		FC414E3725888BC300069E73 /* CommandBarDemoController.swift in Sources */ = {isa = PBXBuildFile; fileRef = FC414E3625888BC300069E73 /* CommandBarDemoController.swift */; };
@@ -152,6 +153,7 @@
 		E6842973247B672000A29C40 /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = "<group>"; };
 		E6842995247C350700A29C40 /* DemoColorThemes.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DemoColorThemes.swift; sourceTree = "<group>"; };
 		EC02A5F8274EED9200E81B3E /* DividerDemoController_SwiftUI.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DividerDemoController_SwiftUI.swift; sourceTree = "<group>"; };
+		EC1C31742923032000CF052C /* ColoredPillBackgroundView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ColoredPillBackgroundView.swift; sourceTree = "<group>"; };
 		EC24DBC428B97E950026EF92 /* PopupMenuObjCDemoController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = PopupMenuObjCDemoController.h; sourceTree = "<group>"; };
 		EC24DBC528B97EB70026EF92 /* PopupMenuObjCDemoController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = PopupMenuObjCDemoController.m; sourceTree = "<group>"; };
 		EC6A71EB273DE6DF0076A586 /* DividerDemoController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DividerDemoController.swift; sourceTree = "<group>"; };
@@ -388,6 +390,7 @@
 				B4414793228F6FDF0040E88E /* OtherCellsSampleData.swift */,
 				B4EF66552295F729007FEAB0 /* TableViewHeaderFooterSampleData.swift */,
 				B4C39551227A4AC800539EC2 /* TableViewSampleData.swift */,
+				EC1C31742923032000CF052C /* ColoredPillBackgroundView.swift */,
 			);
 			name = Utilities;
 			sourceTree = "<group>";
@@ -563,6 +566,7 @@
 				92DD1E8D279F496300FDEE0F /* DemoAppearanceView.swift in Sources */,
 				53097D4027028AE500A6E4DC /* PersonaButtonCarouselDemoController.swift in Sources */,
 				C0938E4A235F733100256251 /* ShimmerLinesViewDemoController.swift in Sources */,
+				EC1C31752923032000CF052C /* ColoredPillBackgroundView.swift in Sources */,
 				80AECC0C2630F1BB005AF2F3 /* BottomCommandingDemoController.swift in Sources */,
 				C038992E2359307D00265026 /* TableViewCellShimmerDemoController.swift in Sources */,
 				53097D3D27028AD800A6E4DC /* NavigationControllerDemoController.swift in Sources */,

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/NotificationViewDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/NotificationViewDemoController.swift
@@ -20,6 +20,7 @@ class NotificationViewDemoController: DemoController {
         case persistentBarWithCancel
         case primaryToastWithStrikethroughAttribute
         case neutralBarWithFontAttribute
+        case neutralBarFromTop
         case neutralToastWithOverriddenTokens
         case neutralToastWithGradientBackground
         case warningToastWithFlexibleWidth
@@ -50,6 +51,8 @@ class NotificationViewDemoController: DemoController {
                 return "Primary Toast with Strikethrough Attribute"
             case .neutralBarWithFontAttribute:
                 return "Neutral Bar with Font Attribute"
+            case .neutralBarFromTop:
+                return "Neutral Bar Presented from Top"
             case .neutralToastWithOverriddenTokens:
                 return "Neutral Toast With Overridden Tokens"
             case .neutralToastWithGradientBackground:
@@ -200,6 +203,15 @@ class NotificationViewDemoController: DemoController {
                 notification.hide()
             }
             return notification
+        case .neutralBarFromTop:
+            let notification = MSFNotification(style: .neutralBar)
+            notification.state.message = "This is a bar presented from the top."
+            notification.state.showFromBottom = false
+            notification.state.actionButtonAction = { [weak self] in
+                self?.showMessage("`Dismiss` tapped")
+                notification.hide()
+            }
+            return notification
         case .neutralToastWithOverriddenTokens:
             let notification = MSFNotification(style: .neutralToast)
             notification.state.message = "The image color and spacing between the elements of this notification have been customized with override tokens."

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/PersonaListViewDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/PersonaListViewDemoController.swift
@@ -57,6 +57,7 @@ class PersonaListViewDemoController: DemoController {
             alert.addAction(action)
             self.present(alert, animated: true)
         }
+        scrollingContainer.removeFromSuperview()
         view.addSubview(personaListView)
         personaListView.frame = view.bounds
         personaListView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/PillButtonBarDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/PillButtonBarDemoController.swift
@@ -103,6 +103,7 @@ class PillButtonBarDemoController: DemoController {
                 return .brand
             }
         }()
+
         let backgroundView = ColoredPillBackgroundView(style: backgroundStyle)
         backgroundView.addSubview(bar)
         let margins = UIEdgeInsets(top: 16.0, left: 0, bottom: 16.0, right: 0.0)

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/ShimmerLinesViewDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/ShimmerLinesViewDemoController.swift
@@ -69,6 +69,15 @@ class ShimmerViewDemoController: DemoController {
         container.addArrangedSubview(ShimmerLinesView())
         container.addArrangedSubview(dividers[1])
 
+        container.addArrangedSubview(shimmerViewLabel("The middle lines of ShimmerLinesView are always at 100% width"))
+        container.addArrangedSubview(dividers[0])
+        let shimmerLinesView = ShimmerLinesView(containerView: nil,
+                                                excludedViews: [],
+                                                animationSynchronizer: nil)
+        shimmerLinesView.lineCount = 6
+        container.addArrangedSubview(shimmerLinesView)
+        container.addArrangedSubview(dividers[1])
+
         container.addArrangedSubview(shimmerViewLabel("ShimmerView shimmers all the top level subviews of its container view"))
         container.addArrangedSubview(dividers[2])
         container.addArrangedSubview(shimmeringContentView(false))

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift
@@ -91,6 +91,9 @@ class SideTabBarDemoController: DemoController {
             TabBarItem(title: "Open", image: UIImage(named: "Open_28")!, selectedImage: UIImage(named: "Open_Selected_28")!)
         ]
 
+        // Set the Open item to be unread
+        sideTabBar.topItems[2].isUnreadDotVisible = true
+
         var premiumImage = UIImage(named: "ic_fluent_premium_24_regular")!
         if let window = view.window {
             let primaryColor = Colors.primary(for: window)

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/TabBarViewDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/TabBarViewDemoController.swift
@@ -93,7 +93,9 @@ class TabBarViewDemoController: DemoController {
 
     private func setupTabBarView() {
         // remove the old tab bar View
+        var isOpenFileUnread = true
         if let oldTabBarView = tabBarView {
+            isOpenFileUnread = oldTabBarView.items[2].isUnreadDotVisible
             if let constraints = tabBarViewConstraints {
                 NSLayoutConstraint.deactivate(constraints)
             }
@@ -119,6 +121,9 @@ class TabBarViewDemoController: DemoController {
             ]
         }
 
+        // If the open file item has been clicked, maintain that state through to the new item
+        updatedTabBarView.items[2].isUnreadDotVisible = isOpenFileUnread
+
         updatedTabBarView.translatesAutoresizingMaskIntoConstraints = false
         view.addSubview(updatedTabBarView)
 

diff --git a/ios/FluentUI.xcodeproj/project.pbxproj b/ios/FluentUI.xcodeproj/project.pbxproj
@@ -220,6 +220,7 @@
 		EC24DBC828BD95980026EF92 /* PopupMenuTokenSet.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC24DBC728BD95980026EF92 /* PopupMenuTokenSet.swift */; };
 		EC24DBCA28BD99860026EF92 /* PopupMenuItemTokenSet.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC24DBC928BD99860026EF92 /* PopupMenuItemTokenSet.swift */; };
 		EC27B8662807A63C00A40B9A /* ResizingHandleTokenSet.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC27B8652807A63C00A40B9A /* ResizingHandleTokenSet.swift */; };
+		EC1C31732923022E00CF052C /* SegmentedControlTokenSet.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC1C31722923022E00CF052C /* SegmentedControlTokenSet.swift */; };
 		EC5982D827BF348700FD048D /* MSFAvatar.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC5982D727BF348700FD048D /* MSFAvatar.swift */; };
 		EC5982DA27C703EE00FD048D /* CircleCutout.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC5982D927C703ED00FD048D /* CircleCutout.swift */; };
 		EC5982DC27CEC02100FD048D /* DrawerTokenSet.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC5982DB27CEC02100FD048D /* DrawerTokenSet.swift */; };
@@ -430,6 +431,7 @@
 		EC24DBC728BD95980026EF92 /* PopupMenuTokenSet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PopupMenuTokenSet.swift; sourceTree = "<group>"; };
 		EC24DBC928BD99860026EF92 /* PopupMenuItemTokenSet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PopupMenuItemTokenSet.swift; sourceTree = "<group>"; };
 		EC27B8652807A63C00A40B9A /* ResizingHandleTokenSet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ResizingHandleTokenSet.swift; sourceTree = "<group>"; };
+		EC1C31722923022E00CF052C /* SegmentedControlTokenSet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SegmentedControlTokenSet.swift; sourceTree = "<group>"; };
 		EC5982D727BF348700FD048D /* MSFAvatar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MSFAvatar.swift; sourceTree = "<group>"; };
 		EC5982D927C703ED00FD048D /* CircleCutout.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleCutout.swift; sourceTree = "<group>"; };
 		EC5982DB27CEC02100FD048D /* DrawerTokenSet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DrawerTokenSet.swift; sourceTree = "<group>"; };
@@ -1189,6 +1191,7 @@
 				EC5982DD27D2EA6100FD048D /* SegmentedControlTokenSet.swift */,
 				C708B04B260A8696007190FA /* SegmentItem.swift */,
 				C708B055260A86FA007190FA /* SegmentPillButton.swift */,
+				EC1C31722923022E00CF052C /* SegmentedControlTokenSet.swift */,
 			);
 			path = SegmentedControl;
 			sourceTree = "<group>";
@@ -1735,6 +1738,7 @@
 				5328D97326FBA3D700F3723B /* IndeterminateProgressBarModifiers.swift in Sources */,
 				923DB9D7274CB66D00D8E58A /* ControlHostingView.swift in Sources */,
 				5314E03B25F00E3D0099271A /* BadgeStringExtractor.swift in Sources */,
+				EC1C31732923022E00CF052C /* SegmentedControlTokenSet.swift in Sources */,
 				5314E19825F019650099271A /* SideTabBar.swift in Sources */,
 				5314E10A25F014600099271A /* Obscurable.swift in Sources */,
 				4B14B18F28F8DBE40099D52A /* TooltipTokenSet.swift in Sources */,

diff --git a/ios/FluentUI/Resources/Localization/en.lproj/Localizable.strings b/ios/FluentUI/Resources/Localization/en.lproj/Localizable.strings
@@ -122,6 +122,9 @@
 /* Format string for tab bar item accessbility labels. Format: "<Title>, <BadgeValue> items". Example: "Home, 5 items" */
 "Accessibility.TabBarItemView.LabelFormat" = "%@, %@ items";
 
+/* Accessibility hint for TabBarItem in TabBarItemView. Indicates whether the item is unread or not. Format: "<Title>, unread". Example: "Files, unread" */
+"Accessibility.TabBarItemView.UnreadFormat" = "%@, unread";
+
 /* Format string for badge label button accessibility label. Format: "<Item Accessibility>, <Badge Label Accessibility>". Example: "Notifications, 5 new notifications" */
 "Accessibility.BadgeLabelButton.LabelFormat" = "%@, %@";
 

diff --git a/ios/FluentUI/SegmentedControl/SegmentedControl.swift b/ios/FluentUI/SegmentedControl/SegmentedControl.swift
@@ -415,7 +415,9 @@ open class SegmentedControl: UIView, TokenizedControlInternal {
     }
 
     public typealias TokenSetKeyType = SegmentedControlTokenSet.Tokens
-    lazy public var tokenSet: SegmentedControlTokenSet = .init(style: { self.style })
+    lazy public var tokenSet: SegmentedControlTokenSet = .init(style: { [weak self] in
+        return self?.style ?? .primaryPill
+    })
     var tokenSetSink: AnyCancellable?
 
     var selectionChangeAnimationDuration: TimeInterval { return 0.2 }

diff --git a/ios/FluentUI/Shimmer/ShimmerLinesView.swift b/ios/FluentUI/Shimmer/ShimmerLinesView.swift
@@ -11,23 +11,35 @@ import UIKit
 @objc(MSFShimmerLinesView)
 open class ShimmerLinesView: ShimmerView {
 
+    /// Number of lines that will shimmer in this view. Use 0 if the number of lines should fill the available space.
+    @objc open var lineCount: Int = 3 {
+        didSet {
+            setNeedsLayout()
+        }
+    }
+    /// The percent the first line (if 2+ lines) should fill the available horizontal space
+    @objc open var firstLineFillPercent: CGFloat = 0.94 {
+        didSet {
+            setNeedsLayout()
+        }
+    }
+
+    /// The percent the last line should fill the available horizontal space.
+    @objc open var lastLineFillPercent: CGFloat = 0.6 {
+        didSet {
+            setNeedsLayout()
+        }
+    }
+
     open override func layoutSubviews() {
         super.layoutSubviews()
 
         var currentTop: CGFloat = 0
         for (index, linelayer) in viewCoverLayers.enumerated() {
             let fillPercent: CGFloat = {
                 if index == 0 && viewCoverLayers.count > 2 {
-                    guard let firstLineFillPercent = firstLineFillPercent else {
-                        return 1
-                    }
-
                     return firstLineFillPercent
                 } else if index == viewCoverLayers.count - 1 {
-                    guard let lastLineFillPercent = lastLineFillPercent else {
-                        return 1
-                    }
-
                     return lastLineFillPercent
                 } else {
                     return 1
@@ -57,34 +69,6 @@ open class ShimmerLinesView: ShimmerView {
         return CGSize(width: UIView.noIntrinsicMetric, height: sizeThatFits(CGSize(width: frame.width, height: .infinity)).height)
     }
 
-    /// Creates the ShimmerLinesView.
-    /// - Parameters:
-    ///   - lineCount: Number of lines that will shimmer in this view. Use 0 if the number of lines should fill the available space.
-    @objc public init(lineCount: Int) {
-        self.lineCount = lineCount
-
-        super.init()
-    }
-
-    /// Creates the ShimmerLinesView.
-    /// - Parameters:
-    ///   - lineCount: Number of lines that will shimmer in this view. Use 0 if the number of lines should fill the available space.
-    ///   - firstLineFillPercent: The percent the first line (if 2+ lines) should fill the available horizontal space.
-    ///   - lastLineFillPercent: The percent the last line should fill the available horizontal space.
-    @objc public convenience init(lineCount: Int = 3,
-                                  firstLineFillPercent: CGFloat = 0.94,
-                                  lastLineFillPercent: CGFloat = 0.6) {
-        self.init(lineCount: lineCount)
-
-        self.firstLineFillPercent = firstLineFillPercent
-        self.lastLineFillPercent = lastLineFillPercent
-    }
-
-    @available(*, unavailable)
-    required public init?(coder: NSCoder) {
-        preconditionFailure("init(coder:) has not been implemented")
-    }
-
     override func updateViewCoverLayers() {
         var newLineLayers = [CALayer]()
         let desiredLineCount = lineCount(for: frame.height)
@@ -114,8 +98,4 @@ open class ShimmerLinesView: ShimmerView {
             return lineCount
         }
     }
-
-    private var lineCount: Int
-    private var firstLineFillPercent: CGFloat?
-    private var lastLineFillPercent: CGFloat?
 }
diff --git a/ios/FluentUI/Shimmer/ShimmerView.swift b/ios/FluentUI/Shimmer/ShimmerView.swift
@@ -75,7 +75,9 @@ open class ShimmerView: UIView, TokenizedControlInternal {
 
     // MARK: - TokenizedControl
     public typealias TokenSetKeyType = ShimmerTokenSet.Tokens
-    public lazy var tokenSet: ShimmerTokenSet = .init(style: { self.style })
+    public lazy var tokenSet: ShimmerTokenSet = .init(style: { [weak self] in
+        return self?.style ?? .concealing
+    })
 
     var tokenSetSink: AnyCancellable?
 

diff --git a/ios/FluentUI/Tab Bar/TabBarItem.swift b/ios/FluentUI/Tab Bar/TabBarItem.swift
@@ -19,6 +19,17 @@ open class TabBarItem: NSObject {
         }
     }
 
+    /// This value will determine whether or not to show the mark that represents the "unread" state.
+    /// If the badgeValue is set, the unreadDot will not be visible.
+    /// The default value of this property is false.
+    @objc public var isUnreadDotVisible: Bool = false {
+       didSet {
+           if oldValue != isUnreadDotVisible {
+               NotificationCenter.default.post(name: TabBarItem.isUnreadValueDidChangeNotification, object: self)
+           }
+       }
+   }
+
     /// Convenience method to set the badge value to a number.
     /// If the number is zero, the badge value will be hidden.
     @objc public func setBadgeNumber(_ number: UInt) {
@@ -90,6 +101,9 @@ open class TabBarItem: NSObject {
     /// Notification sent when the tab bar item's badge value changes.
     static let badgeValueDidChangeNotification = NSNotification.Name(rawValue: "TabBarItemBadgeValueDidChangeNotification")
 
+    /// Notification sent when item's `isUnread` value changes.
+    static let isUnreadValueDidChangeNotification = NSNotification.Name(rawValue: "TabBarItemisUnreadValueDidChangeNotification")
+
     let image: UIImage
     let selectedImage: UIImage?
     let landscapeImage: UIImage?

diff --git a/ios/FluentUI/Tab Bar/TabBarItemTokenSet.swift b/ios/FluentUI/Tab Bar/TabBarItemTokenSet.swift
@@ -59,6 +59,18 @@ class TabBarItemTokenSet: ControlTokenSet<TabBarItemTokenSet.Tokens> {
         /// The radii of the four corners of the `BadgeLabel`
         case badgeCornerRadii
 
+        /// The X offset of the unread dot in portrait mode
+        case unreadDotPortraitOffsetX
+
+        /// The X offset of the unread dot
+        case unreadDotOffsetX
+
+        /// The Y offset of the unread dot
+        case unreadDotOffsetY
+
+        /// The size of the unread dot
+        case unreadDotSize
+
         /// Font info for the title label when in portrait view
         case titleLabelFontPortrait
 
@@ -127,6 +139,18 @@ class TabBarItemTokenSet: ControlTokenSet<TabBarItemTokenSet.Tokens> {
             case .badgeCornerRadii:
                 return .float { 10.0 }
 
+            case .unreadDotPortraitOffsetX:
+                return .float { 6.0 }
+
+            case .unreadDotOffsetX:
+                return .float { 4.0 }
+
+            case .unreadDotOffsetY:
+                return .float { 20.0 }
+
+            case .unreadDotSize:
+                return .float { 8.0 }
+
             case .titleLabelFontPortrait:
                 return .fontInfo { return .init(size: 10, weight: .medium) }