@patternfly/react-core 6.2.0-prerelease.33 → 6.2.0-prerelease.35

package/src/components/Alert/examples/Alert.md

@@ -7,7 +7,7 @@ ouia: true
 ---
 
 import './alert.css';
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 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';
@@ -15,30 +15,35 @@ import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
+Micro animations have been added for `<Alert>` components within an `<AlertGroup>`. By default, you must opt into animations, since they can require updates to tests. To enable or disable animations as needed, use the `hasAnimations` property. With animations enabled, we recommend you ensure that dynamically-added alerts are prepended to a list of alerts, rather than appended to the end of it.
+
+Micro animations are turned on for all examples and demos where alerts are dynamically added.
+
 ## Alert examples
 
 ### Alert variants
 
 PatternFly supports several alert variants for different scenarios. 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. If no `variant` is specified, then the variant will be set to "custom".
 
-| Variant | Description |
-|---|---|
-| Custom | Use for generic messages that should have a custom color set by the associated CSS variable. Should be used when the message has no associated severity. |
-| Info | Use for general informational messages |
-| Success | Use to indicate that a task or process has been 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 |
+| Variant | Description                                                                                                                                              |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Custom  | Use for generic messages that should have a custom color set by the associated CSS variable. Should be used when the message has no associated severity. |
+| Info    | Use for general informational messages                                                                                                                   |
+| Success | Use to indicate that a task or process has been 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                                                                                           |
 
 ```ts
+import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <Alert title="Custom alert title" ouiaId="CustomAlert" />
   <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
   <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
   <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
   <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Alert variations
@@ -56,14 +61,15 @@ PatternFly supports several properties and variations that can be used to add ex
   - 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';
 
-<React.Fragment>
+<Fragment>
   <Alert
     variant="success"
     title="Success alert title"
     actionLinks={
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
@@ -72,7 +78,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         >
           Ignore
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
@@ -95,7 +101,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
   <Alert variant="success" title="h6 Success alert title" component="h6">
     <p>Short alert description.</p>
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Alert timeout
@@ -103,23 +109,23 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
 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] = React.useState<React.ReactNode[]>([]);
-  const [newAlertKey, setNewAlertKey] = React.useState<number>(0);
+  const [alerts, setAlerts] = useState<React.ReactNode[]>([]);
+  const [newAlertKey, setNewAlertKey] = useState<number>(0);
 
   const onClick = () => {
     const timeout = 8000;
     setNewAlertKey((key) => key + 1);
     setAlerts((prevAlerts) => {
       return [
-        ...prevAlerts,
         <Alert
           title="Default timeout Alert"
           timeout={timeout}
           actionLinks={
-            <React.Fragment>
+            <Fragment>
               <AlertActionLink component="a" href="#">
                 View details
               </AlertActionLink>
@@ -128,26 +134,26 @@ const AlertTimeout: React.FunctionComponent = () => {
               >
                 Ignore
               </AlertActionLink>
-            </React.Fragment>
+            </Fragment>
           }
           key={newAlertKey}
         >
           This alert will dismiss after {`${timeout / 1000} seconds`}
-        </Alert>
+        </Alert>, ...prevAlerts
       ];
     });
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Button variant="secondary" onClick={onClick}>
         Add alert
       </Button>
       <Button variant="secondary" onClick={() => setAlerts([])}>
         Remove all alerts
       </Button>
-      <AlertGroup isLiveRegion>{alerts}</AlertGroup>
-    </React.Fragment>
+      <AlertGroup hasAnimations isLiveRegion>{alerts}</AlertGroup>
+    </Fragment>
   );
 };
 ```
@@ -161,9 +167,10 @@ 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';
 
-<React.Fragment>
+<Fragment>
   <Alert
     isExpandable
     variant="success"
@@ -179,7 +186,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     variant="success"
     title="Success alert title"
     actionLinks={
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
@@ -188,12 +195,12 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         >
           Ignore
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Truncated alerts
@@ -201,9 +208,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
 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';
 
-<React.Fragment>
+<Fragment>
   <Alert
     variant="info"
     truncateTitle={1}
@@ -225,7 +233,7 @@ import { Alert } from '@patternfly/react-core';
   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>;
+</Fragment>;
 ```
 
 ### Custom icons
@@ -233,6 +241,7 @@ import { Alert } from '@patternfly/react-core';
 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';
@@ -240,13 +249,13 @@ 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>
+<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>;
+</Fragment>;
 ```
 
 ### Inline alerts variants
@@ -254,14 +263,15 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 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';
-<React.Fragment>
+<Fragment>
   <Alert variant="custom" isInline title="Custom inline alert title" />
   <Alert variant="info" isInline title="Info inline alert title" />
   <Alert variant="success" isInline title="Success inline alert title" />
   <Alert variant="warning" isInline title="Warning inline alert title" />
   <Alert variant="danger" isInline title="Danger inline alert title" />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Inline alert variations
@@ -269,14 +279,15 @@ import { Alert } from '@patternfly/react-core';
 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';
-<React.Fragment>
+<Fragment>
   <Alert
     isInline
     variant="success"
     title="Success alert title"
     actionLinks={
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
@@ -285,7 +296,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         >
           Ignore
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
@@ -309,7 +320,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
   <Alert isInline variant="success" title="h6 Success alert title" component="h6">
     <p>Short alert description.</p>
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Plain inline alert variants
@@ -317,14 +328,15 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
 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';
-<React.Fragment>
+<Fragment>
   <Alert variant="custom" isInline isPlain title="Custom inline alert title" />
   <Alert variant="info" isInline isPlain title="Info inline alert title" />
   <Alert variant="success" isInline isPlain title="Success inline alert title" />
   <Alert variant="warning" isInline isPlain title="Warning inline alert title" />
   <Alert variant="danger" isInline isPlain title="Danger inline alert title" />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Plain inline alert variations
@@ -345,9 +357,10 @@ 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';
 
-<React.Fragment>
+<Fragment>
   <Alert
     isLiveRegion
     variant="info"
@@ -369,7 +382,7 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
     You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the
     containing element.
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Dynamic live region alerts
@@ -396,11 +409,11 @@ An alert group stacks and positions 2 or more alerts in a live region, either in
 
 Alert groups can be one of the following variants:
 
-| Variant | Description |
-| --- | --- |
+| Variant       | Description                                                                                                                                                                                                 |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Static inline | Static inline alert groups contain alerts that appear when the page loads, and are seen within the normal page content flow. These groups should not contain alerts that will dynamically appear or update. |
-| Toast | Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.|
-| Dynamic | Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.|  
+| Toast         | Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.              |
+| Dynamic       | Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.                                                                   |
 
 Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert/accessibility#aria-atomic-and-aria-relevant) section of the alert accessibility documentation.
 

package/src/components/Alert/examples/AlertAsyncLiveRegion.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 interface AlertInfo {
@@ -8,15 +8,15 @@ interface AlertInfo {
 }
 
 export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
-  const [isActive, setIsActive] = React.useState(false);
+  const [alerts, setAlerts] = useState<AlertInfo[]>([]);
+  const [isActive, setIsActive] = useState(false);
   const getUniqueId: () => number = () => new Date().getTime();
 
   const addAlert = (alertInfo: AlertInfo) => {
-    setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]);
+    setAlerts((prevAlertInfo) => [alertInfo, ...prevAlertInfo]);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     let timer = null;
     if (isActive) {
       timer = setInterval(() => {
@@ -51,7 +51,7 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
           onChange={() => setIsActive(false)}
         />
       </ToggleGroup>
-      <AlertGroup isLiveRegion>
+      <AlertGroup hasAnimations isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
           <Alert variant={variant} title={title} key={key} />
         ))}

package/src/components/Alert/examples/AlertDynamicLiveRegion.tsx

@@ -14,7 +14,7 @@ export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
   const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
   const addAlert = (alertInfo: AlertInfo) => {
-    setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]);
+    setAlerts((prevAlertInfo) => [alertInfo, ...prevAlertInfo]);
   };
 
   const addSuccessAlert = () => {
@@ -52,7 +52,7 @@ export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
           Add single danger alert
         </button>
       </InputGroup>
-      <AlertGroup isLiveRegion aria-live="polite" aria-relevant="additions text" aria-atomic="false">
+      <AlertGroup hasAnimations isLiveRegion aria-live="polite" aria-relevant="additions text" aria-atomic="false">
         {alerts.map(({ title, variant, key }) => (
           <Alert variant={variant} title={title} key={key} />
         ))}

package/src/components/Alert/examples/AlertGroupAsync.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -12,8 +12,8 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupAsync: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
-  const [isRunning, setIsRunning] = React.useState(false);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
+  const [isRunning, setIsRunning] = useState(false);
 
   const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
@@ -21,12 +21,12 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
 
   const addAlert = () => {
     setAlerts((prevAlerts) => [
-      ...prevAlerts,
       {
         title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,
         variant: 'danger',
         key: getUniqueId()
-      }
+      },
+      ...prevAlerts
     ]);
   };
 
@@ -58,7 +58,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
           </button>
         </InputGroupItem>
       </InputGroup>
-      <AlertGroup isToast isLiveRegion aria-live="assertive">
+      <AlertGroup hasAnimations isToast isLiveRegion aria-live="assertive">
         {alerts.map(({ title, variant, key }) => (
           <Alert
             variant={AlertVariant[variant]}

package/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,10 +11,10 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
 
   const addAlerts = (incomingAlerts: Partial<AlertProps>[]) => {
-    setAlerts((prevAlerts) => [...prevAlerts, ...incomingAlerts]);
+    setAlerts((prevAlerts) => [...incomingAlerts, ...prevAlerts]);
   };
 
   const removeAlert = (key: React.Key) => {
@@ -42,7 +42,7 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
           </button>
         </InputGroupItem>
       </InputGroup>
-      <AlertGroup isToast isLiveRegion>
+      <AlertGroup hasAnimations isToast isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
           <Alert
             variant={AlertVariant[variant]}

package/src/components/Alert/examples/AlertGroupSingularDynamic.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,10 +11,10 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);
   };
 
   const removeAlert = (key: React.Key) => {
@@ -56,7 +56,7 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
           </button>
         </InputGroupItem>
       </InputGroup>
-      <AlertGroup isLiveRegion>
+      <AlertGroup hasAnimations isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
           <Alert
             isInline

package/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,8 +11,8 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
-  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = useState<string>('');
 
   const maxDisplayed = 4;
 
@@ -25,7 +25,7 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
   };
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);
     setOverflowMessage(getOverflowMessage(alerts.length + 1));
   };
 
@@ -75,7 +75,7 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
           </button>
         </InputGroupItem>
       </InputGroup>
-      <AlertGroup isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
+      <AlertGroup hasAnimations isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
           <Alert
             isInline

package/src/components/Alert/examples/AlertGroupToast.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,10 +11,10 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupToast: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);
   };
 
   const removeAlert = (key: React.Key) => {
@@ -56,7 +56,7 @@ export const AlertGroupToast: React.FunctionComponent = () => {
           </button>
         </InputGroupItem>
       </InputGroup>
-      <AlertGroup isToast isLiveRegion>
+      <AlertGroup hasAnimations isToast isLiveRegion>
         {alerts.map(({ key, variant, title }) => (
           <Alert
             variant={AlertVariant[variant]}

package/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,8 +11,8 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
-  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = useState<string>('');
 
   const maxDisplayed = 4;
 
@@ -25,7 +25,7 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
   };
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);
     setOverflowMessage(getOverflowMessage(alerts.length + 1));
   };
 
@@ -75,7 +75,13 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
           </button>
         </InputGroupItem>
       </InputGroup>
-      <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
+      <AlertGroup
+        hasAnimations
+        isToast
+        isLiveRegion
+        onOverflowClick={onOverflowClick}
+        overflowMessage={overflowMessage}
+      >
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
           <Alert
             variant={AlertVariant[variant]}

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -6,6 +6,7 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---
 
+import { useRef, useState } from 'react';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -46,8 +47,8 @@ const dropdownItems = [
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const badgeToggleRef = React.useRef<HTMLButtonElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const badgeToggleRef = useRef<HTMLButtonElement>(undefined);
 
   const onToggle = () => setIsOpen(!isOpen);
 

package/src/components/Button/examples/Button.md

@@ -6,7 +6,7 @@ propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';

package/src/components/Button/examples/ButtonProgress.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Button, Flex } from '@patternfly/react-core';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
@@ -9,10 +10,10 @@ interface LoadingPropsType {
 }
 
 export const ButtonProgress: React.FunctionComponent = () => {
-  const [isPrimaryLoading, setIsPrimaryLoading] = React.useState<boolean>(true);
-  const [isSecondaryLoading, setIsSecondaryLoading] = React.useState<boolean>(true);
-  const [isInlineLoading, setIsInlineLoading] = React.useState<boolean>(true);
-  const [isUploading, setIsUploading] = React.useState<boolean>(false);
+  const [isPrimaryLoading, setIsPrimaryLoading] = useState<boolean>(true);
+  const [isSecondaryLoading, setIsSecondaryLoading] = useState<boolean>(true);
+  const [isInlineLoading, setIsInlineLoading] = useState<boolean>(true);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
 
   const primaryLoadingProps = {} as LoadingPropsType;
   primaryLoadingProps.spinnerAriaValueText = 'Loading';