Tokenize button Android/iOS

[ayush547]

Platforms Impacted

• iOS
• macOS
• win32 (Office)
• windows
• android

Description of changes

• Added paddingStart and paddingEnd to LayoutTokens.

• Completed FAB component support for text styling and appearances.

• Expanded Button appearance options to support 'Accent' and 'Outline' as required by mobile endpoints.
  Button existed in FURN with 3 possible “appearance” values -

  Default (No appearance value passed as prop) –
  
  Primary –
  
  Subtle –
  

  While the designer guidelines for Button appearance on mobile is as follows –
  Accent –
  
  Outline –
  
  Subtle –
  

  Since props are shared across platform, consumers could pass appearances that are not implemented for the specific platforms, to get around this the following mapping is done based on similarity between the options -

  Accent -> Primary on All platforms
  Default (No appearance passed) -> Primary on Mobile
  Outline -> Default on Non-Mobile platforms
  (Colors in the snapshots for the buttons were updated because of default mapping to primary now)

• Updated FAB 'icon' prop to a required prop. Jest snapshot tests were accordingly updated.

• 'iconOnly' prop was added to all required samples to apply intended styling.

• Added Android token values for Button and FAB.

• Updated spec files for Button and FAB.

iOS Changes -

• Appearance Mapping & FAB completion carries over to iOS as well
• Tester App changes and Spec updates is left for when token value are updated for iOS

Verification

Dark	Light

Pull request checklist

This PR has considered (when applicable):

• Automated Tests
• Documentation and examples
• Keyboard Accessibility
• Voiceover
• Internationalization and Right-to-left Layouts

[rurikoaraki]

This is a large PR. In the future, to make this easier to review and to minimize disruption if a change needs to be backed out, I suggest keeping your changes smaller. For example, you could split the Button and FAB changes into separate PRs, or the support for inner borders as its own PR.

[rurikoaraki]

Curious if this change is meant to span both Android and iOS?

@lyzhan7 and @Saadnajmi FYI

[ayush547]

Curious if this change is meant to span both Android and iOS?

@lyzhan7 and @Saadnajmi FYI

Button and FAB for iOS and Android have similar requirements. Have made all the changes with the intent that it carries over to iOS as well

[ankraj12]

I would suggest following Fluent android guidelines in tester for android. We can find a way to best handle what's not supported, but from what works it should be as what is recommended for android.

[Saadnajmi]

Curious if this change is meant to span both Android and iOS?
@lyzhan7 and @Saadnajmi FYI

Button and FAB for iOS and Android have similar requirements. Have made all the changes with the intent that it carries over to iOS as well

I asked my coworkers who work on FluentUI Apple (aka, native iOS). Indeed, we are not aware of spec differences between the iOS and Android Fluent 2 buttons, so most of this should carry over. I imagine that's not an explicit goal of this PR, but good to know!

[lyzhan7]

Can we update the PR description "Platforms Impacted" to indicate that this affects iOS as well? And the title as well. Also looks like the PR still refers to "ascent" instead of "accent"

I can help test this on iOS and can send screenshots of what your PR looks like on iOS. Some of the changes seem android specific (i.e. a lot of new .android files) - it might be helpful to have a list of the expected changes for iOS, since it seems like iOS had a different starting point from Android

[ayush547]

Can we update the PR description "Platforms Impacted" to indicate that this affects iOS as well? And the title as well. Also looks like the PR still refers to "ascent" instead of "accent"

I can help test this on iOS and can send screenshots of what your PR looks like on iOS. Some of the changes seem android specific (i.e. a lot of new .android files) - it might be helpful to have a list of the expected changes for iOS, since it seems like iOS had a different starting point from Android

Have updated the PR description.
Have not touched the tester app/specs for iOS, though all the code present in the .android files can be used directly for tester app on iOS without any changes.

[ankraj12]

Feedback over mappings.