Add the Ability to Truncate Long Labels in the Command Bar (#2259)

* Made the CommandBar label truncate after they reach a specified length if the Command Bar is not long enough to scroll

* Fixed truncation issues

* Simplified logic to avoid trying to fill space before truncating. We now always truncate

* Provided obj c exposure

* Moved max button width to a token

* Removed the buttonWidth exposure from the CommandBar class

* Simplified constraints to use tokens

* Removed unwanted whitespace

Author: cbowdoin

Sources/FluentUI_iOS/Components/CommandBar/CommandBarButton.swift

@@ -54,6 +54,7 @@ class CommandBarButton: UIButton {
             buttonConfiguration.imagePadding = CommandBarTokenSet.buttonImagePadding
             buttonConfiguration.contentInsets = CommandBarTokenSet.buttonContentInsets
             buttonConfiguration.background.cornerRadius = tokenSet[.cornerRadius].float
+            buttonConfiguration.titleLineBreakMode = .byTruncatingMiddle
             configuration = buttonConfiguration
 
             let accessibilityDescription = item.accessibilityLabel
@@ -97,6 +98,11 @@ class CommandBarButton: UIButton {
             return
         }
 
+        let maxWidth: CGFloat = tokenSet[.maxButtonWidth].float
+        if maxWidth > 0 {
+            widthAnchor.constraint(lessThanOrEqualToConstant: maxWidth).isActive = true
+        }
+
         configuration?.title = item.title
         configuration?.image = item.iconImage
 

Sources/FluentUI_iOS/Components/CommandBar/CommandBarTokenSet.swift

@@ -50,6 +50,9 @@ public enum CommandBarToken: Int, TokenSetKey {
 
     /// The shadows used by the `CommandBar`.
     case shadow
+
+    /// The maximum width of each button in the CommandBar. When greater than 0, buttons will be constrained to this width and truncate text that exceeds it.
+    case maxButtonWidth
 }
 
 /// Design token set for the `CommandBar` control.
@@ -98,6 +101,9 @@ public class CommandBarTokenSet: ControlTokenSet<CommandBarToken> {
 
             case .shadow:
                 return .shadowInfo { theme.shadow(.shadow08) }
+
+            case .maxButtonWidth:
+                return .float { 0.0 }
             }
         }
     }