feat(Icon): adding disabled prop to Icon

[bmdalex]

Icon (disabled prop)

This PR will introduce possibility to specify disabled icons
Based on react-old/pull/113 which is now closed

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 icons by manipulating color and opacity CSS styles

<Icon disabled color="red" name="users" size="big" />

renders

<i class="ui-icon"></i>

[codecov]

Codecov Report

Merging #12 into master will increase coverage by 0.03%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master      #12      +/-   ##
==========================================
+ Coverage   84.24%   84.28%   +0.03%     
==========================================
  Files          58       59       +1     
  Lines         787      789       +2     
  Branches      167      159       -8     
==========================================
+ Hits          663      665       +2     
  Misses        120      120              
  Partials        4        4

Impacted Files	Coverage Δ
src/components/Icon/iconRules.ts	90.9% <100%> (+0.43%)	⬆️
src/styles/customCSS.ts	100% <100%> (ø)
src/components/Icon/Icon.tsx	100% <100%> (ø)	⬆️

---

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 66f3d1b...0033f55. Read the comment docs.

[levithomason]

Let's also have a non-colored disabled icon here for completeness.

[bmdalex]

added

[levithomason]

Opacity is good as it appears disabled, however, it will still take user interaction. Let's set pointerEvents: 'none' to prevent user interaction.

Then, let's leave the color as the default. This helps it fit in on any background. Imagine disabling a red icon on a gray background. It would disappear if made gray.

[bmdalex]

added

{
  opacity: 0.45,
  cursor: 'not-allowed',
}

as per discussion we had in #14

[levithomason]

Address comments and merge 👍