Support CommandBarButton with icon and label (#2117)

microsoft · Jan 16, 2025 · 2b34d62 · 2b34d62
1 parent d4b9283
commit 2b34d62
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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)
 }