From 9e7c0ad4c4964aed8dd40fe2dbf8fce4e058886e Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Mon, 25 Sep 2023 16:06:00 +0200
Subject: [PATCH 1/4] docs(Alert): update AlertActionLink props so they follow
 guidelines

---
 .../src/components/Alert/examples/Alert.md    | 28 +++++++++----------
 .../AlertGroupTimeoutFromBottomDemo.tsx       | 10 +++++--
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index 66db8ac8ca6..50a3872a529 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -64,8 +64,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     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>
+        <AlertActionLink component="a" href="#">View details</AlertActionLink>
+        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
       </React.Fragment>
     }
   >
@@ -83,8 +83,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     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>
+        <AlertActionLink component="a" href="#">View details</AlertActionLink>
+        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
       </React.Fragment>
     }
   />
@@ -111,8 +111,8 @@ const AlertTimeout: React.FunctionComponent = () => {
       return [...prevAlerts,
         <Alert title="Default timeout Alert" timeout={timeout} actionLinks={
           <React.Fragment>
-            <AlertActionLink>View details</AlertActionLink>
-            <AlertActionLink>Ignore</AlertActionLink>
+            <AlertActionLink component="a" href="#">View details</AlertActionLink>
+            <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
           </React.Fragment>
         }>
           This alert will dismiss after {`${timeout / 1000} seconds`}
@@ -153,8 +153,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     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>
+        <AlertActionLink component="a" href="#">View details</AlertActionLink>
+        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
       </React.Fragment>
     }
   >
@@ -168,8 +168,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     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>
+        <AlertActionLink component="a" href="#">View details</AlertActionLink>
+        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
       </React.Fragment>
     } 
   >
@@ -251,8 +251,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     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>
+        <AlertActionLink component="a" href="#">View details</AlertActionLink>
+        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
       </React.Fragment>
     }
   >
@@ -271,8 +271,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     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>
+        <AlertActionLink component="a" href="#">View details</AlertActionLink>
+        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
       </React.Fragment>
     }
   />
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
index 03210eb40c3..bce9712375c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
@@ -6,14 +6,18 @@ export const AlertGroupTimeoutFromBottomDemo: React.FunctionComponent = () => {
   const [count, setCount] = React.useState(0);
   const onClick = () => {
     const timeout = 3000;
-    setAlerts(prevAlerts => [
+    setAlerts((prevAlerts) => [
       <Alert
         title={`Alert no. ${count}`}
         timeout={timeout}
         actionLinks={
           <React.Fragment>
-            <AlertActionLink>View details</AlertActionLink>
-            <AlertActionLink>Ignore</AlertActionLink>
+            <AlertActionLink component="a" href="#">
+              View details
+            </AlertActionLink>
+            <AlertActionLink component="a" href="#">
+              Ignore
+            </AlertActionLink>
           </React.Fragment>
         }
         key={`Alert no. ${count}`}

From cf376d690cba3485c95987a08f433dfa2cd317b5 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Wed, 27 Sep 2023 09:19:06 +0200
Subject: [PATCH 2/4] docs(Alert): update documentation

- "Ignore" text acts as a button, not a link
- alert variations examples are simpler
- fixed a link to /components/alert/accessibility
- AlertActionCloseButton will not trigger a popup alert
---
 .../src/components/Alert/examples/Alert.md    | 215 ++++++++++--------
 .../AlertGroupTimeoutFromBottomDemo.tsx       |   4 +-
 2 files changed, 120 insertions(+), 99 deletions(-)

diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index 50a3872a529..985857b5435 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -13,7 +13,7 @@ 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';
 
-## Alert examples 
+## Alert examples
 
 ### Alert variants
 
@@ -37,22 +37,23 @@ import { Alert } from '@patternfly/react-core';
   <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>
+</React.Fragment>;
 ```
 
 ### Alert variations
 
-PatternFly supports several properties and variations that can be used to add extra content to an alert. 
+PatternFly supports several properties and variations that can be used to add extra content to an alert.
 
-* As demonstrated in the 1st variation below, use the `actionLinks` property to add one or more `<AlertActionLink>` components that place links beneath the alert message. You must pass in `href` and `component="a"` properties to have an `<AlertActionLink>` act as a proper link, rather than as a button.
+- As demonstrated in the 1st variation below, use the `actionLinks` property to add one or more `<AlertActionLink>` components that place links beneath the alert message. You must pass in `href` and `component="a"` properties to have an `<AlertActionLink>` act as a proper link, rather than as a button.
 
-* As demonstrated in the 2nd variation below, use a native HTML `<a>` element to add links within an alert message.
+- As demonstrated in the 2nd variation below, use a native HTML `<a>` element to add links within an alert message.
 
-* As demonstrated in the 3rd and 4th variations below, use the `actionClose` property to add an `<AlertActionCloseButton>` component, which can be used to manage and customize alert dismissals. `actionClose` can be used with or without the presence of `actionLinks`.
+- As demonstrated in the 3rd variation below, use the `actionClose` property to add an `<AlertActionCloseButton>` component, which can be used to manage and customize alert dismissals.
+
+- As demonstrated in the 4th and 5th variations below, use the `component` property to set the element for an alert title.
+  - If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`.
+  - If the `description` prop is passed in, 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`.
 
-* As demonstrated in the 5th and 6th variations below, use the `component` property to set the element for an alert title.  
-  * If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`.
-  * If the `description` prop is passed in, 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 React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
@@ -61,17 +62,18 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
   <Alert
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
     actionLinks={
       <React.Fragment>
-        <AlertActionLink component="a" href="#">View details</AlertActionLink>
-        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
+        <AlertActionLink component="a" href="#">
+          View details
+        </AlertActionLink>
+        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
       </React.Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </Alert>
-  <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}>
+  <Alert variant="success" title="Success alert title">
     <p>
       Success alert description. This should tell the user more information about the alert.{' '}
       <a href="#">This is a link.</a>
@@ -80,21 +82,15 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
   <Alert
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-    actionLinks={
-      <React.Fragment>
-        <AlertActionLink component="a" href="#">View details</AlertActionLink>
-        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
-      </React.Fragment>
-    }
+    actionClose={<AlertActionCloseButton onClose={() => {}} />}
   />
-  <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />} />
   <Alert variant="success" title="div success alert title" component="div" />
-  <Alert variant="success" title="h6 Success alert title" component="h6" >
+  <Alert variant="success" title="h6 Success alert title" component="h6">
     <p>Short alert description</p>
   </Alert>
-  </React.Fragment>
+</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 specific value to dismiss the alert after a different number of milliseconds.
@@ -105,29 +101,42 @@ import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-co
 
 const AlertTimeout: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<React.ReactNode[]>([]);
+  const [newAlertKey, setNewAlertKey] = React.useState<number>(0);
+
   const onClick = () => {
     const timeout = 8000;
-    setAlerts(prevAlerts => {
-      return [...prevAlerts,
-        <Alert title="Default timeout Alert" timeout={timeout} actionLinks={
-          <React.Fragment>
-            <AlertActionLink component="a" href="#">View details</AlertActionLink>
-            <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
-          </React.Fragment>
-        }>
+    setNewAlertKey((key) => key + 1);
+    setAlerts((prevAlerts) => {
+      return [
+        ...prevAlerts,
+        <Alert
+          title="Default timeout Alert"
+          timeout={timeout}
+          actionLinks={
+            <React.Fragment>
+              <AlertActionLink component="a" href="#">
+                View details
+              </AlertActionLink>
+              <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
+            </React.Fragment>
+          }
+          key={newAlertKey}
+        >
           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>
+      <Button variant="secondary" onClick={onClick}>
+        Add alert
+      </Button>
+      <Button variant="secondary" onClick={() => setAlerts([])}>
+        Remove all alerts
+      </Button>
+      <AlertGroup isLiveRegion>{alerts}</AlertGroup>
     </React.Fragment>
   );
 };
@@ -137,7 +146,7 @@ const AlertTimeout: React.FunctionComponent = () => {
 
 An alert can contain additional, hidden information that is made visible when users click 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 with a `timeout` in a [toast alert group](/components/alert#toast-alert-group) because the alert could timeout before users have time to interact with and view the entire alert. 
+It is not recommended to use an expandable alert with a `timeout` in a [toast alert group](/components/alert#toast-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.
 
@@ -150,11 +159,13 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isExpandable
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionClose={<AlertActionCloseButton onClose={() => {}} />}
     actionLinks={
       <React.Fragment>
-        <AlertActionLink component="a" href="#">View details</AlertActionLink>
-        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
+        <AlertActionLink component="a" href="#">
+          View details
+        </AlertActionLink>
+        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
       </React.Fragment>
     }
   >
@@ -165,17 +176,19 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isInline
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionClose={<AlertActionCloseButton onClose={() => {}} />}
     actionLinks={
       <React.Fragment>
-        <AlertActionLink component="a" href="#">View details</AlertActionLink>
-        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
+        <AlertActionLink component="a" href="#">
+          View details
+        </AlertActionLink>
+        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
       </React.Fragment>
-    } 
+    }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </Alert>
-</React.Fragment>
+</React.Fragment>;
 ```
 
 ### Truncated alerts
@@ -187,16 +200,28 @@ import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Alert variant="info" truncateTitle={1} title={`
+  <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={`
+  `}
+  />
+  <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={`
+  `}
+  />
+  <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>
+  `}
+  />
+</React.Fragment>;
 ```
 
 ### Custom icons
@@ -218,7 +243,7 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
   <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>
+</React.Fragment>;
 ```
 
 ### Inline alerts variants
@@ -234,8 +259,9 @@ import { Alert } from '@patternfly/react-core';
   <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>
+</React.Fragment>;
 ```
+
 ### Inline alert variations
 
 All general alert variations can use the `isInline` property to apply inline styling.
@@ -248,17 +274,18 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isInline
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
     actionLinks={
       <React.Fragment>
-        <AlertActionLink component="a" href="#">View details</AlertActionLink>
-        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
+        <AlertActionLink component="a" href="#">
+          View details
+        </AlertActionLink>
+        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
       </React.Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </Alert>
-  <Alert isInline variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}>
+  <Alert isInline variant="success" title="Success alert title">
     <p>
       Success alert description. This should tell the user more information about the alert.{' '}
       <a href="#">This is a link.</a>
@@ -268,22 +295,13 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isInline
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-    actionLinks={
-      <React.Fragment>
-        <AlertActionLink component="a" href="#">View details</AlertActionLink>
-        <AlertActionLink component="a" href="#">Ignore</AlertActionLink>
-      </React.Fragment>
-    }
+    actionClose={<AlertActionCloseButton onClose={() => {}} />}
   />
-  <Alert
-    isInline
-    variant="success"
-    title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-  />
-  <Alert isInline variant="success" title="Success alert title" />
-</React.Fragment>
+  <Alert isInline variant="success" title="div success alert title" component="div" />
+  <Alert isInline variant="success" title="h6 Success alert title" component="h6">
+    <p>Short alert description</p>
+  </Alert>
+</React.Fragment>;
 ```
 
 ### Plain inline alert variants
@@ -299,7 +317,7 @@ import { Alert } from '@patternfly/react-core';
   <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>
+</React.Fragment>;
 ```
 
 ### Plain inline alert variations
@@ -308,15 +326,10 @@ It is not recommended to use a plain inline alert with `actionClose` nor `action
 
 ```ts
 import React from 'react';
-import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
-<Alert
-  isInline
-  isPlain
-  variant="success"
-  title="Success alert title"
->
+import { Alert } from '@patternfly/react-core';
+<Alert isInline isPlain variant="success" title="Success alert title">
   <p>Success alert description. This should tell the user more information about the alert.</p>
-</Alert>
+</Alert>;
 ```
 
 ### Static live region alerts
@@ -334,7 +347,7 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
     isLiveRegion
     variant="info"
     title="Default live region configuration"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionClose={<AlertActionCloseButton onClose={() => {}} />}
   >
     This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS classes.
   </Alert>
@@ -344,12 +357,12 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
     aria-atomic="true"
     variant="info"
     title="Customized live region"
-    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionClose={<AlertActionCloseButton onClose={() => {}} />}
   >
-    You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on
-    the containing element.
+    You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the
+    containing element.
   </Alert>
-</React.Fragment>
+</React.Fragment>;
 ```
 
 ### Dynamic live region alerts
@@ -357,19 +370,22 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 Alerts that are asynchronously appended into dynamic [alert groups](/components/alert/#alert-group-examples) 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.
 
 ```ts file="AlertDynamicLiveRegion.tsx"
+
 ```
 
-### Asynchronous live region alerts 
+### Asynchronous live region alerts
+
+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 [alert accessibility](/components/alert/accessibility/) for more information.
 
-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"
+
 ```
 
 ## Alert group examples
 
 An alert group stacks and positions 2 or more alerts in a live region, either in a layer over the main content of a page or inline with the page content. Alert groups should always rank alerts by age, stacking new alerts on top of old ones as they surface.
 
-### Alert group variants 
+### Alert group variants
 
 Alert groups can be one of the following variants:
 
@@ -386,15 +402,17 @@ 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"
+
 ```
 
 ### Toast alert group
 
-Toast alert groups are created by passing in the `isToast` and `isLiveRegion` properties. 
+Toast alert groups are created by passing in the `isToast` and `isLiveRegion` properties.
 
 Click the buttons in the example below to add alerts to a toast group.
 
 ```ts file="./AlertGroupToast.tsx"
+
 ```
 
 ### Toast alert group with overflow capture
@@ -403,11 +421,12 @@ Users will see an overflow message once a predefined number of alerts are displa
 
 In the following example, an overflow message will appear when more than 4 alerts would be shown. When a 5th alert would appear, an overflow message is shown instead.
 
-When an overflow message appears in an `AlertGroup` using the `isLiveRegion` property, the "view 1 more alert" text label will be announced, but the alert message will not. 
+When an overflow message appears in an `AlertGroup` using the `isLiveRegion` property, the "view 1 more alert" text label will be announced, but the alert message will not.
 
-Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later. 
+Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later.
 
 ```ts file="AlertGroupToastOverflowCapture.tsx"
+
 ```
 
 ### Asynchronous alert groups
@@ -417,6 +436,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"
+
 ```
 
 ### Dynamic alert groups
@@ -424,13 +444,15 @@ 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"
+
 ```
 
 ### Dynamic alert group with overflow message
 
-In the following example, there can be a maximum of 4 alerts shown at once. 
+In the following example, there can be a maximum of 4 alerts shown at once.
 
 ```ts file="AlertGroupSingularDynamicOverflow.tsx"
+
 ```
 
 ### Multiple dynamic alert groups
@@ -438,4 +460,5 @@ 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"
+
 ```
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
index bce9712375c..f4ac0a7eb61 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
@@ -15,9 +15,7 @@ export const AlertGroupTimeoutFromBottomDemo: React.FunctionComponent = () => {
             <AlertActionLink component="a" href="#">
               View details
             </AlertActionLink>
-            <AlertActionLink component="a" href="#">
-              Ignore
-            </AlertActionLink>
+            <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
           </React.Fragment>
         }
         key={`Alert no. ${count}`}

From cf680b0e8adf8b5ec47f29111c2efceb7707f9f2 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Wed, 27 Sep 2023 14:53:36 +0200
Subject: [PATCH 3/4] docs(Alert): use console.log with eslint disable

---
 .../src/components/Alert/examples/Alert.md    | 49 ++++++++++++++-----
 .../AlertGroupTimeoutFromBottomDemo.tsx       |  6 ++-
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index 985857b5435..276e32623d3 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -67,7 +67,11 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
-        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
+        <AlertActionLink // eslint-disable-next-line no-console
+          onClick={() => console.log('Clicked on Ignore')}
+        >
+          Ignore
+        </AlertActionLink>
       </React.Fragment>
     }
   >
@@ -82,7 +86,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
   <Alert
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => {}} />}
+    // eslint-disable-next-line no-console
+    actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
   />
   <Alert variant="success" title="div success alert title" component="div" />
   <Alert variant="success" title="h6 Success alert title" component="h6">
@@ -117,7 +122,11 @@ const AlertTimeout: React.FunctionComponent = () => {
               <AlertActionLink component="a" href="#">
                 View details
               </AlertActionLink>
-              <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
+              <AlertActionLink // eslint-disable-next-line no-console
+                onClick={() => console.log('Clicked on Ignore')}
+              >
+                Ignore
+              </AlertActionLink>
             </React.Fragment>
           }
           key={newAlertKey}
@@ -159,13 +168,19 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isExpandable
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => {}} />}
+    // eslint-disable-next-line no-console
+    actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
     actionLinks={
       <React.Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
-        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
+
+        <AlertActionLink // eslint-disable-next-line no-console
+          onClick={() => console.log('Clicked on Ignore')}
+        >
+          Ignore
+        </AlertActionLink>
       </React.Fragment>
     }
   >
@@ -176,13 +191,18 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isInline
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => {}} />}
+    // eslint-disable-next-line no-console
+    actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
     actionLinks={
       <React.Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
-        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
+        <AlertActionLink // eslint-disable-next-line no-console
+          onClick={() => console.log('Clicked on Ignore')}
+        >
+          Ignore
+        </AlertActionLink>
       </React.Fragment>
     }
   >
@@ -279,7 +299,11 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
-        <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
+        <AlertActionLink // eslint-disable-next-line no-console
+          onClick={() => console.log('Clicked on Ignore')}
+        >
+          Ignore
+        </AlertActionLink>
       </React.Fragment>
     }
   >
@@ -295,7 +319,8 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isInline
     variant="success"
     title="Success alert title"
-    actionClose={<AlertActionCloseButton onClose={() => {}} />}
+    // eslint-disable-next-line no-console
+    actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
   />
   <Alert isInline variant="success" title="div success alert title" component="div" />
   <Alert isInline variant="success" title="h6 Success alert title" component="h6">
@@ -347,7 +372,8 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
     isLiveRegion
     variant="info"
     title="Default live region configuration"
-    actionClose={<AlertActionCloseButton onClose={() => {}} />}
+    // eslint-disable-next-line no-console
+    actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
   >
     This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS classes.
   </Alert>
@@ -357,7 +383,8 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
     aria-atomic="true"
     variant="info"
     title="Customized live region"
-    actionClose={<AlertActionCloseButton onClose={() => {}} />}
+    // eslint-disable-next-line no-console
+    actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
   >
     You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the
     containing element.
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
index f4ac0a7eb61..015ed51ea93 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
@@ -15,7 +15,11 @@ export const AlertGroupTimeoutFromBottomDemo: React.FunctionComponent = () => {
             <AlertActionLink component="a" href="#">
               View details
             </AlertActionLink>
-            <AlertActionLink onClick={() => {}}>Ignore</AlertActionLink>
+            <AlertActionLink // eslint-disable-next-line no-console
+              onClick={() => console.log('Clicked on Ignore')}
+            >
+              Ignore
+            </AlertActionLink>
           </React.Fragment>
         }
         key={`Alert no. ${count}`}

From 3f3648ab3c1ccb664438eb594e6799e101be0845 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Mon, 2 Oct 2023 08:50:12 +0200
Subject: [PATCH 4/4] docs(Alert): update examples, fix variations description

---
 .../src/components/Alert/examples/Alert.md    | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index 276e32623d3..b0f5e490be6 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -51,8 +51,8 @@ PatternFly supports several properties and variations that can be used to add ex
 - As demonstrated in the 3rd variation below, use the `actionClose` property to add an `<AlertActionCloseButton>` component, which can be used to manage and customize alert dismissals.
 
 - As demonstrated in the 4th and 5th variations below, use the `component` property to set the element for an alert title.
-  - If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`.
-  - If the `description` prop is passed in, 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`.
+  - 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 React from 'react';
@@ -88,10 +88,12 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     title="Success alert title"
     // eslint-disable-next-line no-console
     actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
-  />
+  >
+    <p>Short alert description.</p>
+  </Alert>
   <Alert variant="success" title="div success alert title" component="div" />
   <Alert variant="success" title="h6 Success alert title" component="h6">
-    <p>Short alert description</p>
+    <p>Short alert description.</p>
   </Alert>
 </React.Fragment>;
 ```
@@ -170,19 +172,6 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     title="Success alert title"
     // eslint-disable-next-line no-console
     actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
-    actionLinks={
-      <React.Fragment>
-        <AlertActionLink component="a" href="#">
-          View details
-        </AlertActionLink>
-
-        <AlertActionLink // eslint-disable-next-line no-console
-          onClick={() => console.log('Clicked on Ignore')}
-        >
-          Ignore
-        </AlertActionLink>
-      </React.Fragment>
-    }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </Alert>
@@ -191,8 +180,6 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     isInline
     variant="success"
     title="Success alert title"
-    // eslint-disable-next-line no-console
-    actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
     actionLinks={
       <React.Fragment>
         <AlertActionLink component="a" href="#">
@@ -321,10 +308,12 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     title="Success alert title"
     // eslint-disable-next-line no-console
     actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
-  />
+  >
+    <p>Short alert description.</p>
+  </Alert>
   <Alert isInline variant="success" title="div success alert title" component="div" />
   <Alert isInline variant="success" title="h6 Success alert title" component="h6">
-    <p>Short alert description</p>
+    <p>Short alert description.</p>
   </Alert>
 </React.Fragment>;
 ```