Skip to content

[cherry-pick][main_0.34] Add SwiftUI FluentPillButtonStyle (#2188)#2206

Merged
jonathanwangg merged 1 commit intomain_0.34from
user/wangjonathan/pill_button_style
Sep 16, 2025
Merged

[cherry-pick][main_0.34] Add SwiftUI FluentPillButtonStyle (#2188)#2206
jonathanwangg merged 1 commit intomain_0.34from
user/wangjonathan/pill_button_style

Conversation

@jonathanwangg
Copy link
Copy Markdown
Contributor

@jonathanwangg jonathanwangg commented Sep 16, 2025 •
edited by microsoft-github-policy-service bot
Loading

Cherry-pick of 3524689 into main_0.34

Original notes as follows:

Platforms Impacted

  • iOS
  • visionOS
  • macOS

Description of changes

This PR implements a new SwiftUI PillButtonView.

  • The new SwiftUI pill button adds support for a leading image icon as defined in the Fluent 2 designs.
  • The PillButtonView uses the existing PillButtonTokenSet and adds the necessary tokens for the leading icon and the unread dot offset values.
  • The new pill button uses a PillButtonViewStyle which is used to configure the button based on its style and tokens.
  • The PillButtonView is initialized with a PillButtonViewModel which is the observable class used to track the unread dot and leading image states.

Binary change

TBD

Verification

  • Visual verification on iPhone and Vision Pro.
  • Used the accessibility inspector to VoiceOver, accessibility labels and traits.
Visual Verification

iPhone

Standard Unread dot Icon Icon + unread dot
pb_standard pb_unread_dot pb_icon pb_unread_dot_icon
pb_standard_dark pb_unread_dot_dark pb_icon_dark pb_ct_unread_dot_icon_dark
pb_ct_standard pb_ct_unread_dot pb_ct_icon pb_ct_unread_dot_icon
pb_wt_standard pb_wt_unread_dot pb_wt_icon pb_wt_unread_dot_icon
Action Large text Focus ring
pb_tap_action pb_large_text pb_focus_ring

Vision Pro

Standard Unread dot Icon Icon + unread dot
v_standard v_unread_dot v_icon v_unread_dot_icon
v_standard_dark v_unread_dot_dark v_icon_dark v_unread_dot_icon_dark

Pull request checklist

This PR has considered:

  • Light and Dark appearances
  • iOS supported versions (all major versions greater than or equal current target deployment version)
  • VoiceOver and Keyboard Accessibility
  • Internationalization and Right to Left layouts
  • Different resolutions (1x, 2x, 3x)
  • Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
  • iPad Pointer interaction
  • SwiftUI consumption (validation or new demo scenarios needed)
  • Objective-C exposure (provide it only if needed)
Microsoft Reviewers: Open in CodeFlow
Microsoft Reviewers: Open in CodeFlow

@laminesm
Add SwiftUI FluentPillButtonStyle (#2188)
cba3288 
* implement pill button

* Add more configuration on the pill button style

* Add icon token values

* Add new values to the tokenset

* Some cleanup

* Some updates

* Use environment fluent theme in demo

* Cleanup demo and add large content viewer

* Some cleanup

* implement pill button

* Add more configuration on the pill button style

* Add icon token values

* Add new values to the tokenset

* Some cleanup

* Some updates

* Use environment fluent theme in demo

* Cleanup demo and add large content viewer

* Some cleanup

* Had leading image to the view model

* Remove unnecessary demo pills

* Remove unnecessary ViewBuilder

* Clean up comments

* Address comments

* No need to remove trait

* Move label styling to PillButtonViewStyle

* Only keep pill button style

* Fix documentation

* More documentation

* Update UIKit pill button unread dot position

* Rename style to FluentPillButtonStyle

* Rename file
@jonathanwangg jonathanwangg changed the base branch from main to main_0.34 September 16, 2025 17:12
@jonathanwangg jonathanwangg marked this pull request as ready for review September 16, 2025 17:13
@jonathanwangg jonathanwangg requested a review from a team as a code owner September 16, 2025 17:13
@joannaquu joannaquu closed this Sep 16, 2025
@joannaquu joannaquu reopened this Sep 16, 2025
@jonathanwangg jonathanwangg merged commit 1b81b8f into main_0.34 Sep 16, 2025
10 checks passed
@jonathanwangg jonathanwangg deleted the user/wangjonathan/pill_button_style branch September 16, 2025 22:14
@jonathanwangg jonathanwangg mentioned this pull request Sep 16, 2025
Merged
12 tasks
@jonathanwangg jonathanwangg added the Version Update This PR bumps ups the version of repo label Sep 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@joannaquu joannaquu joannaquu approved these changes

Assignees

No one assigned

Labels

Version Update This PR bumps ups the version of repo

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@jonathanwangg @joannaquu @laminesm