feat(Alert): add actions

[layershifter]

BREAKING CHANGES

• action slot was renamed to dismissAction
• to show dismissAction, you need to use dismissible prop

Before

<Alert action={{ icon: 'close', onClick: this.handleClick('Remove') }} />

After

<Alert dismissible onDismiss={this.handleClick} />

---

Add visible prop

It provides a better experience when Alert is used with dismissible prop as because it allows to use Alert in autocontrolled mode.

const [visible] = React.useState(true)

<Alert
  dismissible
  onDismiss={() => setVisible(false)}
  visible={visible}
/>

action slot was renamed to dismissAction

The most common thing that all Alert-like components have it's a dismiss action that hides the component. It's the main action that I found with these components, so it's usage should be simplified.

Bootstrap | dismissible

SUIR/SUI | onDismiss, Dismissable

Fabric UI | dismissButton

AntDesign | closable

Lightning DS | close button

Backpack | Dismissable

AtlasKit | Dismiss

Add actions slot

To have multiple action buttons is also quite common and this is a different that have dismissable.

AtlasKit | actions

Fabric UI | actions

[codecov]

Codecov Report

Merging #1823 into master will decrease coverage by 0.03%.
The diff coverage is 43.75%.

@@            Coverage Diff             @@
##           master    #1823      +/-   ##
==========================================
- Coverage   69.56%   69.52%   -0.04%     
==========================================
  Files         875      875              
  Lines        7596     7607      +11     
  Branches     2219     2222       +3     
==========================================
+ Hits         5284     5289       +5     
- Misses       2304     2310       +6     
  Partials        8        8

Impacted Files	Coverage Δ
...rc/themes/teams/components/Alert/alertVariables.ts	0% <ø> (ø)	⬆️
...t/src/themes/teams/components/Alert/alertStyles.ts	7.14% <0%> (-0.55%)	⬇️
...eams-high-contrast/components/Alert/alertStyles.ts	33.33% <0%> (ø)	⬆️
...test/specs/commonTests/implementsShorthandProp.tsx	100% <100%> (ø)	⬆️
packages/react/src/components/Alert/Alert.tsx	80% <60%> (-20%)	⬇️

---

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 cba28aa...78b343b. Read the comment docs.

[levithomason]

What about the cases where the dismiss is not an icon X, but it is in the actions?

Seems most implementations use a separate concept for close and actions as you've proposed, so let's move forward. However, we will need guidance and perhaps a Usage example for the case where the dismiss button is in the actions as above.