[READY FOR REVIEW] feat(Button): adding disabled prop to Button

[bmdalex]

Button(disabled prop)

This PR will introduce possibility to specify disabled buttons

• Based on react-old/pull/114 which is now closed
• This PR depends on the changes introduced in [READY FOR REVIEW] feat(button): added icon support #13 so it contains these as well; [READY FOR REVIEW] feat(button): added icon support #13 should be merge first and then this branch should be rebased

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

API Proposal

disabled

disabled property will disable buttons by manipulating opacity CSS style, borders, colors, hover styles and preventing clicking

Know issue: Icons are not disabled because disabled property was not added to icons at the time of creating this PR. I created a PR for that #113
Icon buttons will become disabled out of the box after merging that one

<Button disabled content="Click me" />

will render

<button class="ui-button" disabled="">
  <span>Click me</span>
</button>

[codecov]

Codecov Report

Merging #14 into master will decrease coverage by 0.03%.
The diff coverage is 85.71%.

@@            Coverage Diff             @@
##           master      #14      +/-   ##
==========================================
- Coverage   82.77%   82.73%   -0.04%     
==========================================
  Files          59       59              
  Lines         830      840      +10     
  Branches      186      180       -6     
==========================================
+ Hits          687      695       +8     
- Misses        139      141       +2     
  Partials        4        4

Impacted Files	Coverage Δ
src/components/Button/buttonVariables.ts	100% <ø> (ø)	⬆️
src/components/Button/buttonRules.ts	90.62% <100%> (+0.96%)	⬆️
src/components/Button/Button.tsx	80.55% <75%> (-2.21%)	⬇️

---

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 48d735a...86f23b2. Read the comment docs.

[levithomason]

• add disabled attribute to the button to disable interaction
• add opacity: 0.5 and cursor: not-allowed for styling
• ensure hover style is not applied
• ensure click handlers are not fired

The icon should not need to be styled individually here, I don't think...

[notandrew]

If we want the icon color to be the same as the text color, we can use 'currentColor' instead of the hard-coded value.

[bmdalex]

@notandrew
currentColor would be a hex number right now and we're not supporting that for Icon component yet. I think @kuzhelov has an ongoing PR for that; we'll address this afterwards
fyi @mnajdova

[bmdalex]

@mnajdova @kuzhelov READY FOR REVIEW :)

[mnajdova]

Good to be merged here.