Skip to content

Add SwiftUI FluentPillButtonStyle#2188

Merged
laminesm merged 35 commits intomainfrom
user/laminesm/add-new-swiftui-pill-button
Aug 19, 2025
Merged

Add SwiftUI FluentPillButtonStyle#2188
laminesm merged 35 commits intomainfrom
user/laminesm/add-new-swiftui-pill-button

Conversation

@laminesm
Copy link
Copy Markdown
Contributor

@laminesm laminesm commented Jun 19, 2025 •
edited
Loading

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

laminesm added 22 commits June 10, 2025 09:40
@laminesm
implement pill button
2f42f2b
@laminesm
Add more configuration on the pill button style
ddfa4dc
@laminesm
Add icon token values
14a6b86
@laminesm
Add new values to the tokenset
75e53fd
@laminesm
Some cleanup
162c40a
@laminesm
Some updates
9b1d17f
@laminesm
Use environment fluent theme in demo
0a46df8
@laminesm
Cleanup demo and add large content viewer
751103d
@laminesm
Some cleanup
30f87e4
@laminesm
implement pill button
eb78724
@laminesm
Add more configuration on the pill button style
1fd40e7
@laminesm
Add icon token values
46ce212
@laminesm
Add new values to the tokenset
ff15e9d
@laminesm
Some cleanup
b525634
@laminesm
Some updates
be8c189
@laminesm
Use environment fluent theme in demo
340ba22
@laminesm
Cleanup demo and add large content viewer
2035f83
@laminesm
Some cleanup
d68e072
@laminesm
Merge branch 'laminemale/add-swiftui-pill-button' of https://github.c…
243d909 
…om/microsoft/fluentui-apple into laminemale/add-swiftui-pill-button
@laminesm
Had leading image to the view model
a58bf3f
@laminesm
Remove unnecessary demo pills
85fe04c
@laminesm
Remove unnecessary ViewBuilder
a49212c
@laminesm laminesm added API break This PR introduces a breaking API change New API This PR introduces new API labels Jun 20, 2025
@laminesm laminesm marked this pull request as ready for review June 20, 2025 23:12
@laminesm laminesm requested a review from a team as a code owner June 20, 2025 23:12
@laminesm laminesm changed the title [Draft] Add SwiftUI PillButton Add SwiftUI PillButton Jun 20, 2025
@laminesm laminesm changed the title Add SwiftUI PillButton Add SwiftUI PillButtonViewStyle Aug 18, 2025
@laminesm laminesm requested a review from joannaquu August 18, 2025 21:28
@laminesm laminesm changed the title Add SwiftUI PillButtonViewStyle Add SwiftUI FluentPillButtonStyle Aug 19, 2025
@laminesm laminesm enabled auto-merge (squash) August 19, 2025 00:39
@laminesm laminesm merged commit 3524689 into main Aug 19, 2025
12 of 13 checks passed
@laminesm laminesm deleted the user/laminesm/add-new-swiftui-pill-button branch August 19, 2025 06:45
@laminesm laminesm mentioned this pull request Aug 20, 2025
Merged
12 tasks
jonathanwangg pushed a commit that referenced this pull request Sep 16, 2025
@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 added a commit that referenced this pull request Sep 16, 2025
@jonathanwangg @laminesm
Add SwiftUI FluentPillButtonStyle (#2188) (#2206)
1b81b8f 
* 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

Co-authored-by: Lamine Male <106181067+laminesm@users.noreply.github.com>
@joannaquu joannaquu mentioned this pull request Oct 23, 2025
Merged
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mischreiber mischreiber mischreiber left review comments

@joannaquu joannaquu joannaquu approved these changes

@anandrajeswaran anandrajeswaran Awaiting requested review from anandrajeswaran

Assignees

@mischreiber mischreiber

@huwilkes huwilkes

Labels

API break This PR introduces a breaking API change New API This PR introduces new API

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@laminesm @mischreiber @anandrajeswaran @joannaquu @huwilkes