feat(react-button): Loading state for button

[SantoshPisini]

Previous Behavior

There is no action state for the button.

New Behavior

Introduced ButtonActionState with none, inprogress & complete' values.

none is the default action state.

The icon slot of the button is used to get a custom icon on a non-default action state.

When a non-default state is used and no icon is set, a default Spinner component and CheckMarkIcon are set.

Button's onClick is intercepted to allow the event only when the button action is not none.

Related Issue(s)

https://github.com/microsoft/fluentui/issues/29724

Known Issue

To set high contrast for the icon, when the primary appearance of the button is selected.

https://github.com/microsoft/fluentui/assets/39261271/f600c503-9ea1-4fdd-9962-dcbbfa7d710c

[SantoshPisini]

@microsoft-github-policy-service agree

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5ff540e4e7829cd0817f250c9cef3839d2064fad:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[marcosmoura]

@SantoshPisini Overall, great first contribution. :)

[SantoshPisini]

@marcosmoura & @khmakoto Please review!

[SantoshPisini]

@marcosmoura @khmakoto Please review!!

[SantoshPisini]

@khmakoto @marcosmoura Please review!

[pradeept95]

This feature is very useful. +1

[microsoft-github-policy-service[bot]]

This pull request has been automatically marked as stale because it was marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 5 days of this comment. Thank you for your contributions to Fluent UI!