Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds content to alert react examples #7695

Closed
wants to merge 5 commits into from
Closed

Adds content to alert react examples #7695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
81f24e9
Adds content to button react examples.
edonehoo Jun 23, 2022
0e0d8a4
Updates react example content on buttons.md
edonehoo Jun 30, 2022
1f038f8
Minor updates to buttons React examples. Added content to buttons Rea…
edonehoo Jul 6, 2022
e7b1c74
Adds content to alert examples and adjust info arrangement.
edonehoo Jul 14, 2022
4404376
Updates react example content.
edonehoo Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
306 changes: 181 additions & 125 deletions packages/react-core/src/components/Alert/examples/Alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,12 @@ 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';

## Examples
## Examples

### Variants

PatternFly supports several alerts variants for different scenarios and applications. Each variant has an associated status icon, background, and alert title coded to communicate the severity of an alert. Use the `variant` property to apply the following styling options.

### Types
```ts
import React from 'react';
import { Alert } from '@patternfly/react-core';
Expand All @@ -29,7 +32,27 @@ import { Alert } from '@patternfly/react-core';
</React.Fragment>
```

### Variations
If no `variant` property is specified, then the variant will be set to default. Otherwise, use the following variants:

| Variant | Description |
|---|---|
| Default | Use for generic messages with no associated severity |
| Info | Use for general informational messages |
| Success | Use to indicate that a task or process has completed successfully |
| Warning | Use to indicate that a non-critical error has occurred|
| Danger | Use to indicate that a critical or blocking error has occurred |


#### Variations

PatternFly supports a number of properties and variations that can be used to add extra content to an alert.

* Use the `actionLinks` property to add one or more `AlertActionLink` components that place links beneath the alert message.

* Links may also be added within the alert message using an `href`.
Comment on lines +50 to +52
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this, we should add in something along the lines that in order to have an AlertActionLink act as a proper link (rather than a simple button), the href and component="a" properties need to be passed in.


* Use the `actionClose` property to add an `AlertActionCloseButton` component, which manages and customizes alert dismissals.

```ts
import React from 'react';
import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
Expand Down Expand Up @@ -70,12 +93,142 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
<Alert variant="success" title="h6 Success alert title" titleHeadingLevel="h6" />
</React.Fragment>
```
#### Alert timeout

Use the `timeout` property to automatically dismiss an alert after a period of time. If set to `true`, the `timeout` will be 8000 milliseconds. Provide a number to dismiss the alert after a specific number of milliseconds.

```ts
import React from 'react';
import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';

const AlertTimeout: React.FunctionComponent = () => {
const [alerts, setAlerts] = React.useState<React.ReactNode[]>([]);
const onClick = () => {
const timeout = 8000;
setAlerts(prevAlerts => {
return [...prevAlerts,
<Alert title="Default timeout Alert" timeout={timeout} actionLinks={
<React.Fragment>
<AlertActionLink>View details</AlertActionLink>
<AlertActionLink>Ignore</AlertActionLink>
</React.Fragment>
}>
This alert will dismiss after {`${timeout / 1000} seconds`}
</Alert>
]
});
}

return (
<React.Fragment>
<Button variant="secondary" onClick={onClick}>Add alert</Button>
<Button variant="secondary" onClick={() => setAlerts([])}>Remove all alerts</Button>
<AlertGroup isLiveRegion>
{alerts}
</AlertGroup>
</React.Fragment>
);
};
```

#### Expandable alerts

An alert can contain additional, hidden information that is made visible by clicking a caret icon. This information can be expanded and collapsed each time the icon is clicked.

It is not recommended to use an expandable alert using `timeout` within a toast [alert group](/components/alert#alert) because the alert could timeout before users have time to interact with and view the entire alert. See [alert accessibility considerations](https://www.patternfly.org/v4/components/alert/design-guidelines#accessibility-considerations) to understand the accessibility risks associated with using expandable alerts in toast alert groups.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
It is not recommended to use an expandable alert using `timeout` within a toast [alert group](/components/alert#alert) because the alert could timeout before users have time to interact with and view the entire alert. See [alert accessibility considerations](https://www.patternfly.org/v4/components/alert/design-guidelines#accessibility-considerations) to understand the accessibility risks associated with using expandable alerts in toast alert groups.
It is not recommended to use an expandable alert using `timeout` within a toast [alert group](/components/alert-group) because the alert could timeout before users have time to interact with and view the entire alert. See the [toast alert considerations](/components/alert/accessibility#toast-alerts) section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.

Updated the links and tweaked the verbiage a bit for the end. The content currently in the design guidelines > accessibility section will be moved to the a11y tab instead.

Let me know what you think of the verbiage. My thought was that section of a11y documentation isn't strictly about expandable alerts in toast groups, but I wanted to try and convey "this section is about accessibility challenges with toast alerts, but it also applies to expandable alerts".


```ts
import React from 'react';
import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';

<React.Fragment>
<Alert
isExpandable
variant="success"
title="Success alert title"
actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
actionLinks={
<React.Fragment>
<AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
<AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
</React.Fragment>
}
>
<p>Success alert description. This should tell the user more information about the alert.</p>
</Alert>
<Alert
isExpandable
isInline
variant="success"
title="Success alert title"
actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
actionLinks={
<React.Fragment>
<AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
<AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
</React.Fragment>
}
>
<p>Success alert description. This should tell the user more information about the alert.</p>
</Alert>
</React.Fragment>
```


#### Truncated alerts

Use the `truncateTitle` property to shorten a long alert message. Setting `truncateTitle` equal to a number (passed in as `{n}`) will reduce the number of lines of text in the alert's message. Users may hover over a truncated alert to see the full message in a popup.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: maybe the verbiage could be updated to reflect that this property will only affect the alert title/the title property.


```ts
import React from 'react';
import { Alert } from '@patternfly/react-core';

<React.Fragment>
<Alert variant="info" truncateTitle={1} title={`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
`} />
<Alert variant="warning" truncateTitle={2} title={`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
`} />
<Alert variant="danger" truncateTitle={3} title={`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
`} />
</React.Fragment>
```

#### Custom icons

Use the `customIcon` property to replace a default alert icon with a custom icon.

### Inline types
```ts
import React from 'react';
import { Alert } from '@patternfly/react-core';
import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
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';

<React.Fragment>
<Alert customIcon={<UsersIcon />} title="Default alert title" />
<Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
<Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
<Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
<Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
</React.Fragment>
```

### Inline alerts

Use inline alerts to display an alert inline with content.

#### Variants
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may not actually be an issue once these level 4 headings are replaced with bold text, but if both this section and the first "Variants" section are in the ToC, updating this to "Inline variants". Otherwise this should be fine as-is.


All alert variants may use the `isInline` property to place alerts in content-heavy areas, such as within forms, wizards, or drawers.

```ts
import React from 'react';
import { Alert } from '@patternfly/react-core';
<React.Fragment>
<Alert variant="default" isInline title="Default inline alert title" />
<Alert variant="info" isInline title="Info inline alert title" />
Expand All @@ -84,12 +237,13 @@ import { Alert } from '@patternfly/react-core';
<Alert variant="danger" isInline title="Danger inline alert title" />
</React.Fragment>
```
#### Inline variations

The same variations that exist for general alerts can use the `isInline` property to adjust the styling so that they can be placed inline with content.

### Inline variations
```ts
import React from 'react';
import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';

<React.Fragment>
<Alert
isInline
Expand Down Expand Up @@ -133,11 +287,13 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
</React.Fragment>
```

### Inline plain types
#### Plain variants

Use the `isPlain` property to make any inline alert plain. Plain styling removes the colored background, but keeps colored text and icons.

```ts
import React from 'react';
import { Alert } from '@patternfly/react-core';

<React.Fragment>
<Alert variant="default" isInline isPlain title="Default inline alert title" />
<Alert variant="info" isInline isPlain title="Info inline alert title" />
Expand All @@ -147,14 +303,13 @@ import { Alert } from '@patternfly/react-core';
</React.Fragment>
```

### Inline plain variations
#### Plain variations

It is not recommended to use an inline plain alert with actionClose nor actionLinks.
It is not recommended to use an inline plain alert with `actionClose` nor `actionLinks`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless it could fit in either the design guidelines or a11y tabs, including why it's not recommended may be a good addition, but I wouldn't block over it.


```ts
import React from 'react';
import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';

<Alert
isInline
isPlain
Expand All @@ -165,48 +320,18 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
</Alert>
```

### Expandable
### Live region alerts

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.
Accessible Rich Internet Applications (ARIA) is a set of roles and attributes specified by the [World Wide Web Consortium](https://www.w3.org/WAI/standards-guidelines/aria/). ARIA defines ways to make web content and web applications more accessible to people with disabilities.

```ts
import React from 'react';
import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
ARIA live regions allow you to expose dynamic content changes in a way that can be announced by assistive technologies.

<React.Fragment>
<Alert
isExpandable
variant="success"
title="Success alert title"
actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
actionLinks={
<React.Fragment>
<AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
<AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
</React.Fragment>
}
>
<p>Success alert description. This should tell the user more information about the alert.</p>
</Alert>
<Alert
isExpandable
isInline
variant="success"
title="Success alert title"
actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
actionLinks={
<React.Fragment>
<AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
<AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
</React.Fragment>
}
>
<p>Success alert description. This should tell the user more information about the alert.</p>
</Alert>
</React.Fragment>
```
Use the `isLiveRegion` property to indicate that an alert is in a live region.

#### Static alerts

By default, live region alerts are static.

### Static live region alert
```ts
import React from 'react';
import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
Expand Down Expand Up @@ -234,84 +359,15 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
</React.Fragment>
```

### 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.
```ts file="AlertDynamicLiveRegion.tsx"
```
#### Dynamic alerts

### 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.
```ts file="AlertAsyncLiveRegion.tsx"
```
Alerts that are asynchronously appended into dynamic `AlertGroups` via the `isLiveRegion` property will be announced to assistive technology 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.

### Alert timeout
```ts
import React from 'react';
import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';

const AlertTimeout: React.FunctionComponent = () => {
const [alerts, setAlerts] = React.useState<React.ReactNode[]>([]);
const onClick = () => {
const timeout = 8000;
setAlerts(prevAlerts => {
return [...prevAlerts,
<Alert title="Default timeout Alert" timeout={timeout} actionLinks={
<React.Fragment>
<AlertActionLink>View details</AlertActionLink>
<AlertActionLink>Ignore</AlertActionLink>
</React.Fragment>
}>
This alert will dismiss after {`${timeout / 1000} seconds`}
</Alert>
]
});
}

return (
<React.Fragment>
<Button variant="secondary" onClick={onClick}>Add alert</Button>
<Button variant="secondary" onClick={() => setAlerts([])}>Remove all alerts</Button>
<AlertGroup isLiveRegion>
{alerts}
</AlertGroup>
</React.Fragment>
);
};
```

### Truncate
```ts
import React from 'react';
import { Alert } from '@patternfly/react-core';

<React.Fragment>
<Alert variant="info" truncateTitle={1} title={`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
`} />
<Alert variant="warning" truncateTitle={2} title={`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
`} />
<Alert variant="danger" truncateTitle={3} title={`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
`} />
</React.Fragment>
```ts file="AlertDynamicLiveRegion.tsx"
```

### Custom icons
```ts
import React from 'react';
import { Alert } from '@patternfly/react-core';
import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
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';
#### Asynchronous alerts

<React.Fragment>
<Alert customIcon={<UsersIcon />} title="Default alert title" />
<Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
<Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
<Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
<Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
</React.Fragment>
```
This example 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 [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information.
```ts file="AlertAsyncLiveRegion.tsx"
```
Loading