Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set segment pill button corner radius #1963

Merged
merged 3 commits into from
Feb 3, 2024
Merged

Set segment pill button corner radius #1963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8da5bb9
set corner radius
joannaquu Feb 1, 2024
e09b7e3
move const to SegmentedControlTokenSet.swift
joannaquu Feb 2, 2024
f002d7c
Merge branch 'main' into joannaqu/segment-pill
joannaquu Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ios/FluentUI/SegmentedControl/SegmentPillButton.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 3 additions & 6 deletions ios/FluentUI/SegmentedControl/SegmentedControl.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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() {
Expand Down
6 changes: 6 additions & 0 deletions ios/FluentUI/SegmentedControl/SegmentedControlTokenSet.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading