feat(Button): add loading prop

[mnajdova]

We need to allow user to define loading state of the Buttons. This is a common thing already defined in many UI libraries, like:

• Semantic UI React (loading prop) - https://react.semantic-ui.com/elements/button/#states-loading
• Ant design (loading prop) - https://ant.design/components/button/#components-button-demo-loading
• Vuetify (loading prop) - https://vuetifyjs.com/en/components/buttons#button
• Evergreen (isLoading prop) - https://evergreen.segment.com/components/button/
• Atlaskit (loading prop) - https://atlaskit.atlassian.com/packages/core/button

Usually, the way it is implemented is, either with showing the loader indicator before the content of the button, or replacing the content of the button with loader:

In Teams theme, we need the first behavior - showing the loader indicator before the content (instead of the icon).

Proposed API

For showing the loading indicator, we may add loading prop in the Button component, that will show the indicator before the content.

Furthermore, if we want to allow the users to customize this, we may add loaderPosition: 'start' | 'end' | 'center', which will position the loader before, after the content, or replace it if center is provided. Not sure if we want to add this right-away, but it's just an idea of how we may extend the API in the future.

Alternative API

As we already have the icon slot, we may reuse that slot for rendering the Loader component if the loading prop is introduced. Some open questions here are, whether we want to change the component rendered there, in means of instead of Icon.create(...), should we have Loader.create(...) and this applies then, do we want to reuse the icon slot for the Loader's props as well, or introduce additional slot here...

In the styles, conditionally we may apply different margins if the loading prop is provided, but at least the anatomy of the component will be clear.

Blockers

Currently this is blocked by the Loader component, as we don't have two variations for the loader that we may use for default and primary Button. The issues is tracked here: #1663

[codecov]

Codecov Report

Merging #1662 into master will decrease coverage by 0.02%.
The diff coverage is 60%.

@@            Coverage Diff             @@
##           master    #1662      +/-   ##
==========================================
- Coverage   71.28%   71.25%   -0.03%     
==========================================
  Files         852      852              
  Lines        7045     7049       +4     
  Branches     2008     2033      +25     
==========================================
+ Hits         5022     5023       +1     
- Misses       2017     2020       +3     
  Partials        6        6

Impacted Files	Coverage Δ
.../themes/teams/components/Button/buttonVariables.ts	0% <ø> (ø)	⬆️
...src/themes/teams/components/Button/buttonStyles.ts	3.22% <0%> (-0.23%)	⬇️
packages/react/src/components/Button/Button.tsx	77.77% <85.71%> (-2.23%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 071c5d4...616bfe7. Read the comment docs.

[codecov]

Codecov Report

Merging #1662 into master will decrease coverage by 0.12%.
The diff coverage is 17.64%.

@@            Coverage Diff             @@
##           master    #1662      +/-   ##
==========================================
- Coverage   69.89%   69.76%   -0.13%     
==========================================
  Files         867      867              
  Lines        7338     7353      +15     
  Branches     2147     2158      +11     
==========================================
+ Hits         5129     5130       +1     
- Misses       2201     2215      +14     
  Partials        8        8

Impacted Files	Coverage Δ
.../themes/teams/components/Button/buttonVariables.ts	0% <ø> (ø)	⬆️
...src/themes/teams/components/Button/buttonStyles.ts	2.38% <0%> (-0.85%)	⬇️
packages/react/src/components/Loader/Loader.tsx	100% <100%> (ø)	⬆️
packages/react/src/components/Button/Button.tsx	72.41% <40%> (-7.59%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1381d65...028619c. Read the comment docs.