diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index ac435bf99bb..5dd8ec06566 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -33,17 +33,8 @@ PatternFly supports several alert variants for different scenarios. Each variant
| Warning | Use to indicate that a non-critical error has occurred |
| Danger | Use to indicate that a critical or blocking error has occurred |
-```ts
-import { Fragment } from 'react';
-import { Alert } from '@patternfly/react-core';
-
-
-
-
-
-
-
-;
+```ts file = "AlertVariants.tsx"
+
```
### Alert variations
@@ -60,99 +51,16 @@ PatternFly supports several properties and variations that can be used to add ex
- If there is not a description passed via `children` prop, then the `component` prop should be set to a non-heading element such as a `span` or `div`.
- If there is a description passed via `children` prop, then the `component` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
-```ts
-import { Fragment } from 'react';
-import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
-
-
-
-
- View details
-
- console.log('Clicked on Ignore')}
- >
- Ignore
-
-
- }
- >
-
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.{' '}
- This is a link.
-
-
- console.log('Clicked the close button')} />}
- >
-
Short alert description.
-
-
-
-
Short alert description.
-
-;
+```ts file = "AlertVariations.tsx"
+
```
### 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 specific value to dismiss the alert after a different number of milliseconds.
-```ts
-import { Fragment, useState } from 'react';
-import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';
-
-const AlertTimeout: React.FunctionComponent = () => {
- const [alerts, setAlerts] = useState([]);
- const [newAlertKey, setNewAlertKey] = useState(0);
-
- const onClick = () => {
- const timeout = 8000;
- setNewAlertKey((key) => key + 1);
- setAlerts((prevAlerts) => {
- return [
-
-
- View details
-
- console.log('Clicked on Ignore')}
- >
- Ignore
-
-
- }
- key={newAlertKey}
- >
- This alert will dismiss after {`${timeout / 1000} seconds`}
- , ...prevAlerts
- ];
- });
- };
-
- return (
-
-
- {alerts}
-
- );
-};
+```ts file = "AlertTimeout.tsx"
+
```
### Expandable alerts
@@ -163,188 +71,56 @@ It is not recommended to use an expandable alert with a `timeout` in a [toast al
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.
-```ts
-import { Fragment } from 'react';
-import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
-
-
- console.log('Clicked the close button')} />}
- >
-
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.
-
-;
+```ts file = "AlertExpandable.tsx"
+
```
### Truncated alerts
Use the `truncateTitle` property to shorten a long `title`. Set `truncateTitle` equal to a number (passed in as `{n}`) to reduce the number of lines of text in the alert's `title`. Users may hover over or tab to a truncated `title` to see the full message in a tooltip.
-```ts
-import { Fragment } from 'react';
-import { Alert } from '@patternfly/react-core';
-
-
-
-
-
-;
+```ts file = "AlertTruncated.tsx"
+
```
### Custom icons
Use the `customIcon` property to replace a default alert icon with a custom icon.
-```ts
-import { Fragment } 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';
+```ts file = "AlertCustomIcons.tsx"
-
- } 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" />
-;
```
### Inline alerts variants
Use inline alerts to display an alert inline with content. All alert variants may use the `isInline` property to position alerts in content-heavy areas, such as within forms, wizards, or drawers.
-```ts
-import { Fragment } from 'react';
-import { Alert } from '@patternfly/react-core';
-
-
-
-
-
-
-;
+```ts file = "AlertInlineVariants.tsx"
+
```
### Inline alert variations
All general alert variations can use the `isInline` property to apply inline styling.
-```ts
-import { Fragment } from 'react';
-import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
-
-
-
- View details
-
- console.log('Clicked on Ignore')}
- >
- Ignore
-
-
- }
- >
-
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.{' '}
- This is a link.
-
-
- console.log('Clicked the close button')} />}
- >
-
Short alert description.
-
-
-
-
Short alert description.
-
-;
+```ts file = "AlertInlineVariations.tsx"
+
```
### Plain inline alert 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 { Fragment } from 'react';
-import { Alert } from '@patternfly/react-core';
-
-
-
-
-
-
-;
+```ts file = "AlertPlainInlineVariants.tsx"
+
```
### Plain inline alert variations
It is not recommended to use a plain inline alert with `actionClose` nor `actionLinks` because these alerts are non-dismissible and should persist until the error or action related to the alert is resolved.
-```ts
-import { Alert } from '@patternfly/react-core';
-
-
Success alert description. This should tell the user more information about the alert.
-;
+```ts file = "AlertPlainInlineVariations.tsx"
+
```
### Static live region alerts
@@ -353,33 +129,8 @@ Live region alerts allow you to expose dynamic content changes in a way that can
By default, `isLiveRegion`alerts are static.
-```ts
-import { Fragment } from 'react';
-import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
-
-
- console.log('Clicked the close button')} />}
- >
- This alert uses the recommended isLiveRegion prop to automatically set ARIA attributes and CSS classes.
-
- console.log('Clicked the close button')} />}
- >
- You can alternatively omit the isLiveRegion prop to specify ARIA attributes and CSS manually on the
- containing element.
-
-;
+```ts file = "AlertStaticLiveRegion.tsx"
+
```
### Dynamic live region alerts
@@ -418,7 +169,7 @@ Dynamic alerts that are generated after the page initially loads must be appende
All alert group variants may combine multiple [alert variants](/components/alert) For example, the following static inline alert group includes one "success" alert and one "info" alert.
-```ts file="./AlertGroupStatic.tsx"
+```ts file="AlertGroupStatic.tsx"
```
@@ -428,7 +179,7 @@ Toast alert groups are created by passing in the `isToast` and `isLiveRegion` pr
Click the buttons in the example below to add alerts to a toast group.
-```ts file="./AlertGroupToast.tsx"
+```ts file="AlertGroupToast.tsx"
```
@@ -452,7 +203,7 @@ The following example shows how alerts can be triggered by an asynchronous event
See the [alert accessibility tab](/components/alert/accessibility) for more information on customizing this behavior.
-```ts file="./AlertGroupAsync.tsx"
+```ts file="AlertGroupAsync.tsx"
```
@@ -460,7 +211,7 @@ See the [alert accessibility tab](/components/alert/accessibility) for more info
Click the buttons in the example below to add dynamic alerts to a group.
-```ts file="./AlertGroupSingularDynamic.tsx"
+```ts file="AlertGroupSingularDynamic.tsx"
```
@@ -476,6 +227,6 @@ In the following example, there can be a maximum of 4 alerts shown at once.
You may add multiple alerts to an alert group at once. Click the "add alert collection" button in the example below to add a batch of 3 toast alerts to a group.
-```ts file="./AlertGroupMultipleDynamic.tsx"
+```ts file="AlertGroupMultipleDynamic.tsx"
```
diff --git a/packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx b/packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx
new file mode 100644
index 00000000000..ba9116d64f0
--- /dev/null
+++ b/packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx
@@ -0,0 +1,17 @@
+import { Fragment } 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';
+
+export const AlertCustomIcons: React.FunctionComponent = () => (
+
+ } 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/AlertExpandable.tsx b/packages/react-core/src/components/Alert/examples/AlertExpandable.tsx
new file mode 100644
index 00000000000..9fe9ab5b53d
--- /dev/null
+++ b/packages/react-core/src/components/Alert/examples/AlertExpandable.tsx
@@ -0,0 +1,36 @@
+import { Fragment } from 'react';
+import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
+
+export const AlertExpandable: React.FunctionComponent = () => (
+
+ console.log('Clicked the close button')} />}
+ >
+
Success alert description. This should tell the user more information about the alert.