From 2b34d62f3d3d7463b2ad818b002f99a1493447ff Mon Sep 17 00:00:00 2001
From: Joanna Qu <55368679+joannaquu@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:29:26 -0800
Subject: [PATCH] Support CommandBarButton with icon and label (#2117)

---
 .../Components/Command Bar/CommandBarButton.swift   | 13 ++++---------
 .../Components/Command Bar/CommandBarItem.swift     |  2 +-
 .../Components/Command Bar/CommandBarTokenSet.swift |  3 +++
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/Sources/FluentUI_iOS/Components/Command Bar/CommandBarButton.swift b/Sources/FluentUI_iOS/Components/Command Bar/CommandBarButton.swift
index c412e44333..dc2690cc9d 100644
--- a/Sources/FluentUI_iOS/Components/Command Bar/CommandBarButton.swift	
+++ b/Sources/FluentUI_iOS/Components/Command Bar/CommandBarButton.swift	
@@ -48,7 +48,9 @@ class CommandBarButton: UIButton {
             isAccessibilityElement = false
         } else {
             var buttonConfiguration = UIButton.Configuration.plain()
+            buttonConfiguration.title = item.title
             buttonConfiguration.image = item.iconImage
+            buttonConfiguration.imagePadding = CommandBarTokenSet.buttonImagePadding
             buttonConfiguration.contentInsets = CommandBarTokenSet.buttonContentInsets
             buttonConfiguration.background.cornerRadius = 0
             configuration = buttonConfiguration
@@ -87,14 +89,6 @@ class CommandBarButton: UIButton {
             return
         }
 
-        // always update icon and title as we only display one; we may alterenate between them, and the icon may also change
-        let iconImage = item.iconImage
-        let title = item.title
-        let accessibilityDescription = item.accessibilityLabel
-
-        configuration?.image = iconImage
-        configuration?.title = iconImage != nil ? nil : title
-
         if let font = item.titleFont {
             let attributeContainer = AttributeContainer([NSAttributedString.Key.font: font])
             configuration?.attributedTitle?.setAttributes(attributeContainer)
@@ -105,7 +99,8 @@ class CommandBarButton: UIButton {
 
         titleLabel?.isEnabled = isEnabled
 
-        accessibilityLabel = (accessibilityDescription != nil) ? accessibilityDescription : title
+        let accessibilityDescription = item.accessibilityLabel
+        accessibilityLabel = (accessibilityDescription != nil) ? accessibilityDescription : item.title
         accessibilityHint = item.accessibilityHint
         accessibilityValue = item.accessibilityValue
         accessibilityIdentifier = item.accessibilityIdentifier
diff --git a/Sources/FluentUI_iOS/Components/Command Bar/CommandBarItem.swift b/Sources/FluentUI_iOS/Components/Command Bar/CommandBarItem.swift
index c0ca6a34cf..07786d9c03 100644
--- a/Sources/FluentUI_iOS/Components/Command Bar/CommandBarItem.swift	
+++ b/Sources/FluentUI_iOS/Components/Command Bar/CommandBarItem.swift	
@@ -88,7 +88,7 @@ open class CommandBarItem: NSObject {
         }
     }
 
-    /// Title for the item. Only valid when `iconImage` is `nil`.
+    /// Title for the item.
     @objc public var title: String? {
         didSet {
             if title != oldValue {
diff --git a/Sources/FluentUI_iOS/Components/Command Bar/CommandBarTokenSet.swift b/Sources/FluentUI_iOS/Components/Command Bar/CommandBarTokenSet.swift
index 34d9da7dbe..70116e3c90 100644
--- a/Sources/FluentUI_iOS/Components/Command Bar/CommandBarTokenSet.swift	
+++ b/Sources/FluentUI_iOS/Components/Command Bar/CommandBarTokenSet.swift	
@@ -117,4 +117,7 @@ extension CommandBarTokenSet {
                                                        leading: 10.0,
                                                        bottom: 8.0,
                                                        trailing: 10.0)
+
+    /// The padding between the Command Bar Button image and title.
+    static let buttonImagePadding: CGFloat = GlobalTokens.spacing(.size60)
 }