[fluent2 tokens] Add scrolling and faded edges to the SegmentedControl (

#1354)

* Increase number of items in demo

* Add stackView to SegmentedControl

* Clean up now redundant layout logic

* Move autoresizing mask settings to inits and remove an outdated comment

* Change distribution for unequal segments to proportionally

* Start scrolling

* Resize on rotate

* Broken new constraints

* Fix new constraints

* Remove scroll indicators

* Unset priority on horizontal constraints

* Add static white layers

* Dynamic white gradients

* Switch to gradient mask

* Spilt equal segments and fixed width

* Fix layout lag

* Remove old fade layers

* Update hierarchy comment

* Fix large text regression

* Remove backgroundView

* Remove CATransaction

* Update demo

* Change scrollView to let

* Change gradientMaskLayer to let

* Remove gradientMask view

* Make view hierarchy dynamic

* Update to scroll to selected button

ios/FluentUI.Demo/FluentUI.Demo/Demos/SegmentedControlDemoController.swift

@@ -11,7 +11,13 @@ class SegmentedControlDemoController: DemoController {
         SegmentItem(title: "First"),
         SegmentItem(title: "Second", image: UIImage(named: "Placeholder_20")),
         SegmentItem(title: "Third", isUnread: true),
-        SegmentItem(title: "Fourth")
+        SegmentItem(title: "Fourth"),
+        SegmentItem(title: "Fifth"),
+        SegmentItem(title: "Sixth"),
+        SegmentItem(title: "Seventh"),
+        SegmentItem(title: "Eigth"),
+        SegmentItem(title: "Ninth"),
+        SegmentItem(title: "Tenth")
     ]
 
     var controlLabels = [SegmentedControl: Label]() {
@@ -28,40 +34,51 @@ class SegmentedControlDemoController: DemoController {
         container.layoutMargins.right = 0
 
         addTitle(text: "Primary Pill")
-
+        addDescription(text: "fixed width, equal buttons", textAlignment: .center)
         addPillControl(items: Array(segmentItems.prefix(3)),
                        style: .primaryPill)
         container.addArrangedSubview(UIView())
 
-        addTitle(text: "Primary Pill with unequal buttons")
+        addTitle(text: "Primary Pill")
+        addDescription(text: "not fixed width, unequal buttons", textAlignment: .center)
+        addPillControl(items: Array(segmentItems.prefix(10)),
+                       style: .primaryPill,
+                       equalSegments: false,
+                       isFixedWidth: false)
+        container.addArrangedSubview(UIView())
 
+        addTitle(text: "Primary Pill")
+        addDescription(text: "not fixed width, unequal buttons", textAlignment: .center)
         addPillControl(items: Array(segmentItems.prefix(2)),
                        style: .primaryPill,
-                       equalSegments: false)
+                       equalSegments: false,
+                       isFixedWidth: false)
         container.addArrangedSubview(UIView())
 
         addTitle(text: "Disabled Primary Pill")
-
+        addDescription(text: "fixed width, equal buttons", textAlignment: .center)
         addPillControl(items: Array(segmentItems.prefix(2)),
                        style: .primaryPill,
                        enabled: false)
         container.addArrangedSubview(UIView())
 
         addTitle(text: "On Brand Pill")
-
-        addPillControl(items: Array(segmentItems.prefix(4)),
-                       style: .onBrandPill)
+        addDescription(text: "not fixed width, equal buttons", textAlignment: .center)
+        addPillControl(items: Array(segmentItems.prefix(10)),
+                       style: .onBrandPill,
+                       equalSegments: true,
+                       isFixedWidth: false)
         container.addArrangedSubview(UIView())
 
-        addTitle(text: "On Brand Pill with unequal buttons")
-
+        addTitle(text: "On Brand Pill")
+        addDescription(text: "not fixed width, equal buttons", textAlignment: .center)
         addPillControl(items: Array(segmentItems.prefix(2)),
                        style: .onBrandPill,
-                       equalSegments: false)
+                       isFixedWidth: false)
         container.addArrangedSubview(UIView())
 
         addTitle(text: "Disabled On Brand Pill")
-
+        addDescription(text: "fixed width, equal buttons", textAlignment: .center)
         addPillControl(items: Array(segmentItems.prefix(2)),
                        style: .onBrandPill,
                        enabled: false)
@@ -71,9 +88,10 @@ class SegmentedControlDemoController: DemoController {
         controlLabels[control]?.text = "\"\(segmentItems[control.selectedSegmentIndex].title)\" segment is selected"
     }
 
-    func addPillControl(items: [SegmentItem], style: SegmentedControlStyle, equalSegments: Bool = true, enabled: Bool = true) {
+    func addPillControl(items: [SegmentItem], style: SegmentedControlStyle, equalSegments: Bool = true, enabled: Bool = true, isFixedWidth: Bool = true) {
         let pillControl = SegmentedControl(items: items, style: style)
         pillControl.shouldSetEqualWidthForSegments = equalSegments
+        pillControl.isFixedWidth = isFixedWidth
         pillControl.isEnabled = enabled
         pillControl.onSelectAction = { [weak self] (_, _) in
             guard let strongSelf = self else {
@@ -106,6 +124,17 @@ class SegmentedControlDemoController: DemoController {
         if equalSegments {
             constraints.append(pillControl.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor))
         }
+        if isFixedWidth {
+            constraints.append(contentsOf: [
+                backgroundView.leadingAnchor.constraint(lessThanOrEqualTo: pillControl.leadingAnchor),
+                backgroundView.trailingAnchor.constraint(greaterThanOrEqualTo: pillControl.trailingAnchor)
+            ])
+        } else {
+            constraints.append(contentsOf: [
+                backgroundView.leadingAnchor.constraint(equalTo: pillControl.leadingAnchor),
+                backgroundView.trailingAnchor.constraint(equalTo: pillControl.trailingAnchor)
+            ])
+        }
 
         NSLayoutConstraint.activate(constraints)
 

ios/FluentUI/SegmentedControl/SegmentPillButton.swift

@@ -40,6 +40,12 @@ class SegmentPillButton: UIButton {
                                                                   bottom: verticalInset,
                                                                   trailing: horizontalInset)
             configuration.background.backgroundColor = .clear
+            let titleTransformer = UIConfigurationTextAttributesTransformer { incoming in
+                var outgoing = incoming
+                outgoing.font = UIFont.fluent(self.tokenSet[.font].fontInfo, shouldScale: false)
+                return outgoing
+            }
+            configuration.titleTextAttributesTransformer = titleTransformer
             self.configuration = configuration
         } else {
             self.contentEdgeInsets = UIEdgeInsets(top: verticalInset,