diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index b53c7ddbb95..d186f28879c 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -16,412 +16,245 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; ## Examples ### Types -```js +```ts import React from 'react'; import { Alert } from '@patternfly/react-core'; -class AlertTypes extends React.Component { - render() { - return ( - - - - - - - - ); - } -} + + + + + + + ``` ### Variations -```js +```ts import React from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; -class AlertVariations extends React.Component { - render() { - return ( + + alert('Clicked the close button')} />} + actionLinks={ - alert('Clicked the close button')} />} - actionLinks={ - - alert('Clicked on View details')}>View details - alert('Clicked on Ignore')}>Ignore - - } - > -

Success alert description. This should tell the user more information about the alert.

- - alert('Clicked the close button')} />}> -

- Success alert description. This should tell the user more information about the alert.{' '} - This is a link. -

- - alert('Clicked the close button')} />} - actionLinks={ - - alert('Clicked on View details')}>View details - alert('Clicked on Ignore')}>Ignore - - } - /> - alert('Clicked the close button')} />} /> - - + alert('Clicked on View details')}>View details + alert('Clicked on Ignore')}>Ignore - ); - } -} + } + > +

Success alert description. This should tell the user more information about the alert.

+ + alert('Clicked the close button')} />}> +

+ Success alert description. This should tell the user more information about the alert.{' '} + This is a link. +

+ + alert('Clicked the close button')} />} + actionLinks={ + + alert('Clicked on View details')}>View details + alert('Clicked on Ignore')}>Ignore + + } + /> + alert('Clicked the close button')} />} /> + + + ``` ### Inline types -```js +```ts import React from 'react'; import { Alert } from '@patternfly/react-core'; -class InlineAlert extends React.Component { - render() { - return ( - - - - - - - - ); - } -} + + + + + + + ``` ### Inline variations -```js +```ts import React from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; -class InlineAlertVariations extends React.Component { - render() { - return ( + + alert('Clicked the close button')} />} + actionLinks={ - alert('Clicked the close button')} />} - actionLinks={ - - alert('Clicked on View details')}>View details - alert('Clicked on Ignore')}>Ignore - - } - > -

Success alert description. This should tell the user more information about the alert.

- - alert('Clicked the close button')} />}> -

- Success alert description. This should tell the user more information about the alert.{' '} - This is a link. -

- - alert('Clicked the close button')} />} - actionLinks={ - - alert('Clicked on View details')}>View details - alert('Clicked on Ignore')}>Ignore - - } - /> - alert('Clicked the close button')} />} - /> - + alert('Clicked on View details')}>View details + alert('Clicked on Ignore')}>Ignore - ); - } -} + } + > +

Success alert description. This should tell the user more information about the alert.

+ + alert('Clicked the close button')} />}> +

+ Success alert description. This should tell the user more information about the alert.{' '} + This is a link. +

+ + alert('Clicked the close button')} />} + actionLinks={ + + alert('Clicked on View details')}>View details + alert('Clicked on Ignore')}>Ignore + + } + /> + alert('Clicked the close button')} />} + /> + + ``` ### Inline plain types -```js +```ts import React from 'react'; import { Alert } from '@patternfly/react-core'; -class InlinePlainAlert extends React.Component { - render() { - return ( - - - - - - - - ); - } -} + + + + + + + ``` ### Inline plain variations It is not recommended to use an inline plain alert with actionClose nor actionLinks. -```js +```ts import React from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; -class InlinePlainAlertVariations extends React.Component { - render() { - return ( - -

Success alert description. This should tell the user more information about the alert.

- - ); - } -} + +

Success alert description. This should tell the user more information about the alert.

+ ``` ### Expandable It is not recommended to use an expandable alert within a toast Alert group. In such a case, the Alert could timeout before users would have time to interact and view the entire Alert. -```js +```ts import React from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; -class ExpandableAlert extends React.Component { - render() { - return ( + + alert('Clicked the close button')} />} + actionLinks={ - alert('Clicked the close button')} />} - actionLinks={ - - alert('Clicked on View details')}>View details - alert('Clicked on Ignore')}>Ignore - - } - > -

Success alert description. This should tell the user more information about the alert.

- - alert('Clicked the close button')} />} - actionLinks={ - - alert('Clicked on View details')}>View details - alert('Clicked on Ignore')}>Ignore - - } - > -

Success alert description. This should tell the user more information about the alert.

- + alert('Clicked on View details')}>View details + alert('Clicked on Ignore')}>Ignore - ); - } -} + } + > +

Success alert description. This should tell the user more information about the alert.

+ + alert('Clicked the close button')} />} + actionLinks={ + + alert('Clicked on View details')}>View details + alert('Clicked on Ignore')}>Ignore + + } + > +

Success alert description. This should tell the user more information about the alert.

+ + ``` ### Static live region alert -```js +```ts import React from 'react'; import { Alert, AlertActionCloseButton } from '@patternfly/react-core'; -class StaticLiveRegionAlert extends React.Component { - render() { - return ( - - alert('Clicked the close button')} />} - > - This alert uses the recommended isLiveRegion prop to automatically set ARIA attributes and CSS classes. - - alert('Clicked the close button')} />} - > - You can alternatively omit the isLiveRegion prop to specify ARIA attributes and CSS manually on - the containing element. - - - ); - } -} + + alert('Clicked the close button')} />} + > + This alert uses the recommended isLiveRegion prop to automatically set ARIA attributes and CSS classes. + + alert('Clicked the close button')} />} + > + You can alternatively omit the isLiveRegion prop to specify ARIA attributes and CSS manually on + the containing element. + + ``` ### Dynamic live region alert Alerts asynchronously appended into dynamic AlertGroups with isLiveRegion will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced. -```js -import React from 'react'; -import { Alert, AlertGroup, InputGroup } from '@patternfly/react-core'; - -class DynamicLiveRegionAlert extends React.Component { - constructor() { - super(); - this.state = { - alerts: [] - }; - } - - render() { - const addAlert = alertProps => { - this.setState({ alerts: [...this.state.alerts, alertProps] }); - }; - const getUniqueId = () => new Date().getTime(); - const addSuccessAlert = () => { - addAlert({ - title: 'Single success alert', - variant: 'success', - key: getUniqueId() - }); - }; - const addInfoAlert = () => { - addAlert({ - title: 'Single info alert', - variant: 'info', - key: getUniqueId() - }); - }; - const addDangerAlert = () => { - addAlert({ - title: 'Single danger alert', - variant: 'danger', - key: getUniqueId() - }); - }; - const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' '); - return ( - - - - - - - - {this.state.alerts.map(({ title, variant, isLiveRegion, ariaLive, ariaRelevant, ariaAtomic, key }) => ( - - ))} - - - ); - } -} +```ts file="AlertDynamicLiveRegion.tsx" ``` ### Async live region alert This shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the alert accessibility tab for more information. -```js -import React from 'react'; -import { Alert, AlertGroup, InputGroup } from '@patternfly/react-core'; - -class AsyncLiveRegionAlert extends React.Component { - constructor() { - super(); - this.state = { - alerts: [], - timer: null - }; - this.stopAsyncAlerts = () => { - clearInterval(this.state.timer); - }; - } - componentWillUnmount() { - this.stopAsyncAlerts(); - } - render() { - const addAlert = incomingAlerts => { - this.setState({ alerts: [...this.state.alerts, incomingAlerts] }); - }; - const getUniqueId = () => new Date().getTime(); - const startAsyncAlerts = () => { - let timerValue = setInterval(() => { - addAlert({ - title: `Async alert number ${this.state.alerts.length + 1}`, - variant: 'info', - key: getUniqueId() - }); - }, 4500); - this.setState({ timer: timerValue }); - }; - const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' '); - return ( - - - - - - - {this.state.alerts.map(({ title, variant, key }) => ( - - ))} - - - ); - } -} +```ts file="AlertAsyncLiveRegion.tsx" ``` ### Alert timeout -```js +```ts import React from 'react'; import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core'; -class AlertTimeout extends React.Component { - constructor() { - super(); - this.state = { - alerts: [] - }; - this.onClick = () => { - const timeout = 8000; - this.state.alerts.push( +const AlertTimeout: React.FunctionComponent = () => { + const [alerts, setAlerts] = React.useState([]); + const onClick = () => { + const timeout = 8000; + setAlerts(prevAlerts => { + return [...prevAlerts, View details @@ -430,50 +263,42 @@ class AlertTimeout extends React.Component { }> This alert will dismiss after {`${timeout / 1000} seconds`} - ); - this.setState({ alerts: [...this.state.alerts] }) - }; + ] + }); } - render() { - return ( - - - - - {this.state.alerts} - - - ); - } -} + return ( + + + + + {alerts} + + + ); +}; ``` ### Truncate -```js +```ts import React from 'react'; import { Alert } from '@patternfly/react-core'; -class AlertTypes extends React.Component { - render() { - return ( - - - - - - ); - } -} + + + + + + ``` ### Custom icons -```js +```ts import React from 'react'; import { Alert } from '@patternfly/react-core'; import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; @@ -482,17 +307,11 @@ import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon'; import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; -class AlertTypes extends React.Component { - render() { - return ( - - } title="Default alert title" /> - } variant="info" title="Info alert title" /> - } variant="success" title="Success alert title" /> - } variant="warning" title="Warning alert title" /> - } variant="danger" title="Danger alert title" /> - - ); - } -} + + } title="Default alert title" /> + } variant="info" title="Info alert title" /> + } variant="success" title="Success alert title" /> + } variant="warning" title="Warning alert title" /> + } variant="danger" title="Danger alert title" /> + ``` diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx new file mode 100644 index 00000000000..39517dc90f6 --- /dev/null +++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + +interface AlertInfo { + title: string; + variant: AlertVariant; + key: number; +} + +export const AsyncLiveRegionAlert: React.FunctionComponent = () => { + const [alerts, setAlerts] = React.useState([]); + const [isActive, setIsActive] = React.useState(false); + const getUniqueId: () => number = () => new Date().getTime(); + + const addAlert = (alertInfo: AlertInfo) => { + setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]); + }; + + React.useEffect(() => { + let timer = null; + if (isActive) { + timer = setInterval(() => { + addAlert({ + title: `Async alert number ${alerts.length + 1}`, + variant: AlertVariant.info, + key: getUniqueId() + }); + }, 4500); + } else { + clearInterval(timer); + } + + return () => { + clearInterval(timer); + }; + }, [isActive, alerts]); + + return ( + + + setIsActive(true)} + /> + setIsActive(false)} + /> + + + {alerts.map(({ title, variant, key }) => ( + + ))} + + + ); +}; diff --git a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx new file mode 100644 index 00000000000..dd2c00c92f0 --- /dev/null +++ b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Alert, AlertGroup, AlertVariant, InputGroup } from '@patternfly/react-core'; + +interface AlertInfo { + title: string; + variant: AlertVariant; + key: number; +} + +export const DynamicLiveRegionAlert: React.FunctionComponent = () => { + const [alerts, setAlerts] = React.useState([]); + const getUniqueId: () => number = () => new Date().getTime(); + const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' '); + + const addAlert = (alertInfo: AlertInfo) => { + setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]); + }; + + const addSuccessAlert = () => { + addAlert({ + title: 'Single success alert', + variant: AlertVariant.success, + key: getUniqueId() + }); + }; + const addInfoAlert = () => { + addAlert({ + title: 'Single info alert', + variant: AlertVariant.info, + key: getUniqueId() + }); + }; + const addDangerAlert = () => { + addAlert({ + title: 'Single danger alert', + variant: AlertVariant.danger, + key: getUniqueId() + }); + }; + + return ( + + + + + + + + {alerts.map(({ title, variant, key }) => ( + + ))} + + + ); +};