fluentui-apple icon indicating copy to clipboard operation
fluentui-apple copied to clipboard

Add SwiftUI PillButton

Open laminesm opened this issue 8 months ago • 0 comments

Platforms Impacted

  • [x] iOS
  • [x] 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:

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

laminesm avatar Jun 19 '25 20:06 laminesm