feat(Alert): add actions

CHANGELOG.md

@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Rename `action` slot to `dismissAction` in `Alert` component @layershifter ([#1823](https://github.com/stardust-ui/react/pull/1823))
+- To make `dismissAction` slot visible in `Alert` component `dismissible` prop is required now @layershifter ([#1823](https://github.com/stardust-ui/react/pull/1823))
+
 ### Fixes
 - Update text `Button` styles for Teams Theme to match [redlines] @codepretty ([#1719](https://github.com/stardust-ui/react/pull/1719))
 - Fix `Menu` and `MenuItem` styles to match [redlines] @bcalvery ([#1712](https://github.com/stardust-ui/react/pull/1712))
@@ -39,6 +43,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `checkable` and `checkableIndicator` to the `Dropdown` and `DropdownItem` components @mnajdova ([#1738](https://github.com/stardust-ui/react/pull/1738))
 - Add unified ramp of category colors and category color schemes: `foreground`, `foreground1`, `background` to the Teams themes @natashamayurshah ([#1711](https://github.com/stardust-ui/react/pull/1711))
 - Upgrade `FocusTrapZone` to the latest version from `fabric-ui` @sophieH29 ([#1790](https://github.com/stardust-ui/react/pull/1790))
+- Add `visible` prop to `Alert` @layershifter ([#1823](https://github.com/stardust-ui/react/pull/1823))
+- Add `actions` slot to `Alert` @layershifter ([#1823](https://github.com/stardust-ui/react/pull/1823))
 
 ### Documentation
 - Restore docs for `Ref` component @layershifter ([#1777](https://github.com/stardust-ui/react/pull/1777))

docs/src/examples/components/Alert/Slots/AlertExampleActions.shorthand.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleDismissAction = () => (
+  <Alert
+    actions={[{ content: 'Privacy policy', primary: true }, 'Settings']}
+    content="Get all the best inventions in your e-mail every day. Sign up now!"
+    dismissible
+  />
+)
+
+export default AlertExampleDismissAction

docs/src/examples/components/Alert/Slots/AlertExampleDismissAction.shorthand.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleDismissAction = () => (
+  <Alert content="This is a closable alert" dismissible dismissAction="Close" />
+)
+
+export default AlertExampleDismissAction

docs/src/examples/components/Alert/Slots/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Slots = () => (
+  <ExampleSection title="Slots">
+    <ComponentExample
+      title="Dismiss Action"
+      description="An Alert can provide the user with an action."
+      examplePath="components/Alert/Slots/AlertExampleDismissAction"
+    />
+    <ComponentExample
+      title="Actions"
+      description="An Alert can contain action buttons."
+      examplePath="components/Alert/Slots/AlertExampleActions"
+    />
+  </ExampleSection>
+)
+
+export default Slots

docs/src/examples/components/Alert/State/AlertExampleVisible.shorthand.tsx

@@ -0,0 +1,11 @@
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+import { Alert } from '@stardust-ui/react'
+import * as React from 'react'
+
+const AlertExampleDismissible = () => {
+  const [visible] = useBooleanKnob({ name: 'visible', initialValue: true })
+
+  return <Alert content="You can always see me." visible={visible} />
+}
+
+export default AlertExampleDismissible

docs/src/examples/components/Alert/State/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const State = () => (
+  <ExampleSection title="State">
+    <ComponentExample
+      title="Visible"
+      description="An alert can be set to visible to force itself to be shown."
+      examplePath="components/Alert/State/AlertExampleVisible"
+    />
+  </ExampleSection>
+)
+
+export default State

docs/src/examples/components/Alert/Types/AlertExampleDismissible.shorthand.tsx

@@ -0,0 +1,18 @@
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+import { Alert } from '@stardust-ui/react'
+import * as React from 'react'
+
+const AlertExampleDismissible = () => {
+  const [visible, setVisible] = useBooleanKnob({ name: 'visible', initialValue: true })
+
+  return (
+    <Alert
+      content="This is a special notification which you can dismiss if you're bored with it."
+      dismissible
+      onDismiss={() => setVisible(false)}
+      visible={visible}
+    />
+  )
+}
+
+export default AlertExampleDismissible

docs/src/examples/components/Alert/Types/index.tsx

@@ -10,6 +10,11 @@ const Types = () => (
       description="A default Alert."
       examplePath="components/Alert/Types/AlertExample"
     />
+    <ComponentExample
+      title="Dismissible"
+      description="A message that the user can choose to hide."
+      examplePath="components/Alert/Types/AlertExampleDismissible"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/Alert/Variations/AlertExampleOofs.shorthand.tsx

@@ -2,13 +2,7 @@ import * as React from 'react'
 import { Alert } from '@stardust-ui/react'
 
 const AlertExampleOof = () => (
-  <Alert
-    variables={{ oof: true }}
-    action={{
-      icon: 'close',
-    }}
-    content="This is an oof alert"
-  />
+  <Alert content="This is an oof alert" dismissible variables={{ oof: true }} />
 )
 
 export default AlertExampleOof

docs/src/examples/components/Alert/Variations/AlertExampleOofs.tsx

@@ -2,12 +2,7 @@ import * as React from 'react'
 import { Alert } from '@stardust-ui/react'
 
 const AlertExampleOof = () => (
-  <Alert
-    variables={{ oof: true }}
-    action={{
-      icon: 'close',
-    }}
-  >
+  <Alert dismissible variables={{ oof: true }}>
     This is an oof alert
   </Alert>
 )

docs/src/examples/components/Alert/Variations/AlertExampleUrgent.shorthand.tsx

@@ -2,13 +2,7 @@ import * as React from 'react'
 import { Alert } from '@stardust-ui/react'
 
 const AlertExampleUrgent = () => (
-  <Alert
-    variables={{ urgent: true }}
-    action={{
-      icon: 'close',
-    }}
-    content="This is an urgent alert"
-  />
+  <Alert content="This is an urgent alert" dismissible variables={{ urgent: true }} />
 )
 
 export default AlertExampleUrgent

docs/src/examples/components/Alert/Variations/AlertExampleUrgent.tsx

@@ -2,12 +2,7 @@ import * as React from 'react'
 import { Alert } from '@stardust-ui/react'
 
 const AlertExampleUrgent = () => (
-  <Alert
-    variables={{ urgent: true }}
-    action={{
-      icon: 'close',
-    }}
-  >
+  <Alert dismissible variables={{ urgent: true }}>
     This is an urgent alert
   </Alert>
 )

docs/src/examples/components/Alert/Variations/commonScreenerSteps.ts

@@ -1,6 +1,6 @@
 import { Alert } from '@stardust-ui/react'
 
-const alertActionButton = `.${Alert.slotClassNames.action}`
+const alertActionButton = `.${Alert.slotClassNames.dismissAction}`
 
 const getFocusScreenerSteps = (): ScreenerSteps => [
   (builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses the action button'),

docs/src/examples/components/Alert/Variations/index.tsx

@@ -39,11 +39,6 @@ const Variations = () => (
       description="An Alert can be can be formatted to attach itself to other content."
       examplePath="components/Alert/Variations/AlertExampleAttached"
     />
-    <ComponentExample
-      title="Action"
-      description="An Alert can provide the user with an action. Click on the icon to see the effect."
-      examplePath="components/Alert/Variations/AlertExampleAction"
-    />
   </ExampleSection>
 )
 

docs/src/examples/components/Alert/index.tsx

@@ -2,12 +2,16 @@ import * as React from 'react'
 
 import Rtl from './Rtl'
 import Types from './Types'
+import Slots from './Slots'
+import State from './State'
 import Variations from './Variations'
 
 const AlertExamples = () => (
   <>
     <Types />
     <Variations />
+    <State />
+    <Slots />
     <Rtl />
   </>
 )