Set segment pill button corner radius (#1963)

* set corner radius * move const to SegmentedControlTokenSet.swift
microsoft · Feb 3, 2024 · 12c93a3 · 12c93a3
1 parent 839b046
commit 12c93a3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/ios/FluentUI/SegmentedControl/SegmentPillButton.swift b/ios/FluentUI/SegmentedControl/SegmentPillButton.swift
@@ -40,6 +40,7 @@ class SegmentPillButton: UIButton {
                                                               bottom: verticalInset,
                                                               trailing: horizontalInset)
         configuration.background.backgroundColor = .clear
+        configuration.background.cornerRadius = SegmentedControlTokenSet.pillButtonCornerRadius
         configuration.baseForegroundColor = tokenSet[.restLabelColor].uiColor
         let titleTransformer = UIConfigurationTextAttributesTransformer { [weak self] incoming in
             var outgoing = incoming

diff --git a/ios/FluentUI/SegmentedControl/SegmentedControl.swift b/ios/FluentUI/SegmentedControl/SegmentedControl.swift
@@ -9,9 +9,6 @@ import UIKit
 @objc(MSFSegmentedControl)
 open class SegmentedControl: UIView, TokenizedControlInternal {
     private struct Constants {
-        static let selectionBarHeight: CGFloat = 1.5
-        static let pillContainerHorizontalInset: CGFloat = 16
-        static let pillButtonCornerRadius: CGFloat = 16
         static let iPadMinimumWidth: CGFloat = 375
     }
 
@@ -56,7 +53,7 @@ open class SegmentedControl: UIView, TokenizedControlInternal {
     }
 
     /// only used for pill style segment control. It is used to define the inset of the pillContainerView
-    @objc public var contentInset: NSDirectionalEdgeInsets = NSDirectionalEdgeInsets(top: 0, leading: Constants.pillContainerHorizontalInset, bottom: 0, trailing: Constants.pillContainerHorizontalInset) {
+    @objc public var contentInset: NSDirectionalEdgeInsets = NSDirectionalEdgeInsets(top: 0, leading: SegmentedControlTokenSet.pillContainerHorizontalInset, bottom: 0, trailing: SegmentedControlTokenSet.pillContainerHorizontalInset) {
         didSet {
             guard oldValue != contentInset else {
                 return
@@ -197,7 +194,7 @@ open class SegmentedControl: UIView, TokenizedControlInternal {
         super.init(frame: .zero)
         scrollView.delegate = self
 
-        stackView.layer.cornerRadius = Constants.pillButtonCornerRadius
+        stackView.layer.cornerRadius = SegmentedControlTokenSet.pillButtonCornerRadius
         pillContainerView.addSubview(stackView)
         selectionView.backgroundColor = .black
         pillContainerView.addSubview(selectionView)
@@ -585,7 +582,7 @@ open class SegmentedControl: UIView, TokenizedControlInternal {
         let button = buttons[selectedSegmentIndex]
 
         selectionView.frame = button.frame
-        selectionView.layer.cornerRadius = Constants.pillButtonCornerRadius
+        selectionView.layer.cornerRadius = SegmentedControlTokenSet.pillButtonCornerRadius
     }
 
     private func updateTokenizedValues() {

diff --git a/ios/FluentUI/SegmentedControl/SegmentedControlTokenSet.swift b/ios/FluentUI/SegmentedControl/SegmentedControlTokenSet.swift
@@ -212,6 +212,12 @@ public class SegmentedControlTokenSet: ControlTokenSet<SegmentedControlToken> {
     var style: () -> SegmentedControlStyle
 }
 
+// MARK: Constants
+extension SegmentedControlTokenSet {
+    static let pillButtonCornerRadius: CGFloat = 16
+    static let pillContainerHorizontalInset: CGFloat = 16
+}
+
 @objc(MSFSegmentedControlStyle)
 public enum SegmentedControlStyle: Int {
     /// Segments are shown as labels inside a pill for use with a neutral or white background. Selection is indicated by a thumb under the selected label.