From fb642a41db8ee916f7bb0c5f021f00214154f7dd Mon Sep 17 00:00:00 2001 From: mcarrano Date: Thu, 6 Apr 2023 16:44:12 -0400 Subject: [PATCH 1/8] move files and combine docs --- .../{AlertGroup => Alert}/AlertGroup.tsx | 0 .../AlertGroupInline.tsx | 0 .../__tests__/AlertGroup.test.tsx | 0 .../__tests__/Generated/AlertGroup.test.tsx | 0 .../Generated/AlertGroupInline.test.tsx | 0 .../__snapshots__/AlertGroup.test.tsx.snap | 0 .../AlertGroupInline.test.tsx.snap | 0 .../__snapshots__/AlertGroup.test.tsx.snap | 0 .../src/components/Alert/examples/Alert.md | 77 +++++++++++++++++- .../examples/AlertGroupAsync.tsx | 0 .../examples/AlertGroupMultipleDynamic.tsx | 0 .../examples/AlertGroupSingularDynamic.tsx | 0 .../AlertGroupSingularDynamicOverflow.tsx | 0 .../examples/AlertGroupStatic.tsx | 0 .../examples/AlertGroupToast.tsx | 0 .../AlertGroupToastOverflowCapture.tsx | 0 .../react-core/src/components/Alert/index.ts | 1 + .../AlertGroup/examples/AlertGroup.md | 79 ------------------- .../src/components/AlertGroup/index.ts | 1 - packages/react-core/src/components/index.ts | 1 - 20 files changed, 77 insertions(+), 82 deletions(-) rename packages/react-core/src/components/{AlertGroup => Alert}/AlertGroup.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/AlertGroupInline.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/__tests__/AlertGroup.test.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/__tests__/Generated/AlertGroup.test.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/__tests__/Generated/AlertGroupInline.test.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/__tests__/__snapshots__/AlertGroup.test.tsx.snap (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/examples/AlertGroupAsync.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/examples/AlertGroupMultipleDynamic.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/examples/AlertGroupSingularDynamic.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/examples/AlertGroupSingularDynamicOverflow.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/examples/AlertGroupStatic.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/examples/AlertGroupToast.tsx (100%) rename packages/react-core/src/components/{AlertGroup => Alert}/examples/AlertGroupToastOverflowCapture.tsx (100%) delete mode 100644 packages/react-core/src/components/AlertGroup/examples/AlertGroup.md delete mode 100644 packages/react-core/src/components/AlertGroup/index.ts diff --git a/packages/react-core/src/components/AlertGroup/AlertGroup.tsx b/packages/react-core/src/components/Alert/AlertGroup.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/AlertGroup.tsx rename to packages/react-core/src/components/Alert/AlertGroup.tsx diff --git a/packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx b/packages/react-core/src/components/Alert/AlertGroupInline.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx rename to packages/react-core/src/components/Alert/AlertGroupInline.tsx diff --git a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx rename to packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroup.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertGroup.test.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroup.test.tsx rename to packages/react-core/src/components/Alert/__tests__/Generated/AlertGroup.test.tsx diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroupInline.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertGroupInline.test.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroupInline.test.tsx rename to packages/react-core/src/components/Alert/__tests__/Generated/AlertGroupInline.test.tsx diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap rename to packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap rename to packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap diff --git a/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertGroup.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap rename to packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertGroup.test.tsx.snap diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index 5aaf0bbab29..d62fe8a11e2 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -2,7 +2,7 @@ id: Alert section: components cssPrefix: pf-c-alert -propComponents: ['Alert', 'AlertActionCloseButton', 'AlertActionLink'] +propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink'] ouia: true --- @@ -364,3 +364,78 @@ Alerts that are asynchronously appended into dynamic [alert groups](/components/ 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 + +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. + +### Variants + +Alert groups can be one of the following variants: + +| 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.| + +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-group/accessibility#aria-atomic-and-aria-relevant) section of the alert group accessibility documentation. + +### Static inline alert group + +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. + +Click the buttons in the example below to add alerts to a toast group. + +```ts file="./AlertGroupToast.tsx" +``` + +### Toast alert group with overflow capture + +Users will see an overflow message once a predefined number of alerts are displayed. They will not see any alerts beyond the display limit, which must be explicitly set. + +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. + +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 + +The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the `aria-live` property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior. + +See the [alert group accessibility tab](/components/alert-group/accessibility) for more information on customizing this behavior. + +```ts file="./AlertGroupAsync.tsx" +``` + +### Dynamic alert groups + +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. + +```ts file="AlertGroupSingularDynamicOverflow.tsx" +``` + +### Multiple dynamic alert groups + +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-core/src/components/AlertGroup/examples/AlertGroupAsync.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/examples/AlertGroupAsync.tsx rename to packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx diff --git a/packages/react-core/src/components/AlertGroup/examples/AlertGroupMultipleDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/examples/AlertGroupMultipleDynamic.tsx rename to packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx diff --git a/packages/react-core/src/components/AlertGroup/examples/AlertGroupSingularDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/examples/AlertGroupSingularDynamic.tsx rename to packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx diff --git a/packages/react-core/src/components/AlertGroup/examples/AlertGroupSingularDynamicOverflow.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/examples/AlertGroupSingularDynamicOverflow.tsx rename to packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx diff --git a/packages/react-core/src/components/AlertGroup/examples/AlertGroupStatic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupStatic.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/examples/AlertGroupStatic.tsx rename to packages/react-core/src/components/Alert/examples/AlertGroupStatic.tsx diff --git a/packages/react-core/src/components/AlertGroup/examples/AlertGroupToast.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/examples/AlertGroupToast.tsx rename to packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx diff --git a/packages/react-core/src/components/AlertGroup/examples/AlertGroupToastOverflowCapture.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx similarity index 100% rename from packages/react-core/src/components/AlertGroup/examples/AlertGroupToastOverflowCapture.tsx rename to packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx diff --git a/packages/react-core/src/components/Alert/index.ts b/packages/react-core/src/components/Alert/index.ts index 0c84bd74c44..cb297a2eaa3 100644 --- a/packages/react-core/src/components/Alert/index.ts +++ b/packages/react-core/src/components/Alert/index.ts @@ -2,3 +2,4 @@ export * from './Alert'; export * from './AlertContext'; export * from './AlertActionCloseButton'; export * from './AlertActionLink'; +export { AlertGroup } from './AlertGroup'; \ No newline at end of file diff --git a/packages/react-core/src/components/AlertGroup/examples/AlertGroup.md b/packages/react-core/src/components/AlertGroup/examples/AlertGroup.md deleted file mode 100644 index 4d4ae9a7027..00000000000 --- a/packages/react-core/src/components/AlertGroup/examples/AlertGroup.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: Alert group -section: components -cssPrefix: pf-c-alert-group -propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink'] ---- - -## Examples - -### Variants - -Alert groups can be one of the following variants: - -| 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.| - -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-group/accessibility#aria-atomic-and-aria-relevant) section of the alert group accessibility documentation. - -### Static inline alert group - -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. - -Click the buttons in the example below to add alerts to a toast group. - -```ts file="./AlertGroupToast.tsx" -``` - -### Toast alert group with overflow capture - -Users will see an overflow message once a predefined number of alerts are displayed. They will not see any alerts beyond the display limit, which must be explicitly set. - -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. - -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 - -The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the `aria-live` property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior. - -See the [alert group accessibility tab](/components/alert-group/accessibility) for more information on customizing this behavior. - -```ts file="./AlertGroupAsync.tsx" -``` - -### Dynamic alert groups - -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. - -```ts file="AlertGroupSingularDynamicOverflow.tsx" -``` - -### Multiple dynamic alert groups - -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-core/src/components/AlertGroup/index.ts b/packages/react-core/src/components/AlertGroup/index.ts deleted file mode 100644 index 02e94577fcb..00000000000 --- a/packages/react-core/src/components/AlertGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { AlertGroup } from './AlertGroup'; diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts index bdd2f2166e6..2966f26f337 100644 --- a/packages/react-core/src/components/index.ts +++ b/packages/react-core/src/components/index.ts @@ -3,7 +3,6 @@ export * from './AboutModal'; export * from './Accordion'; export * from './ActionList'; export * from './Alert'; -export * from './AlertGroup'; export * from './Avatar'; export * from './BackToTop'; export * from './Backdrop'; From e350b65ed82b2ea4c30a60bacb8005cd62c0faa7 Mon Sep 17 00:00:00 2001 From: mcarrano Date: Fri, 7 Apr 2023 13:48:07 -0400 Subject: [PATCH 2/8] fix import statement in AlertGroup.test --- .../src/components/Alert/__tests__/AlertGroup.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx index 89e54553919..deee28f7748 100644 --- a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx @@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Alert } from '../../Alert'; -import { AlertGroup } from '../../AlertGroup'; +import { AlertGroup } from '../../Alert'; import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton'; describe('AlertGroup', () => { From 166a452f7a71937de91a69b13fe95ce9c9bf9c1f Mon Sep 17 00:00:00 2001 From: mcarrano Date: Fri, 7 Apr 2023 14:16:44 -0400 Subject: [PATCH 3/8] move alert group demos to Alert page --- packages/react-core/src/demos/AlertGroup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md index 922b97801cb..d9f3fb68d7d 100644 --- a/packages/react-core/src/demos/AlertGroup.md +++ b/packages/react-core/src/demos/AlertGroup.md @@ -1,5 +1,5 @@ --- -id: Alert group +id: Alert section: components --- From 31d8832ff9e2e09a97c44ecf0280ced10a4ec916 Mon Sep 17 00:00:00 2001 From: mcarrano Date: Thu, 13 Apr 2023 15:29:45 -0400 Subject: [PATCH 4/8] updates from review --- packages/react-core/src/components/Alert/examples/Alert.md | 6 +++--- packages/react-core/src/components/Alert/index.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index d62fe8a11e2..f028e7549c5 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -13,9 +13,9 @@ 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 +## Alert examples -### Variant examples +### 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 "default". @@ -365,7 +365,7 @@ This example shows how an alert could be triggered by an asynchronous event in t ```ts file="AlertAsyncLiveRegion.tsx" ``` -## Alert Group +## 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. diff --git a/packages/react-core/src/components/Alert/index.ts b/packages/react-core/src/components/Alert/index.ts index cb297a2eaa3..5122cae9524 100644 --- a/packages/react-core/src/components/Alert/index.ts +++ b/packages/react-core/src/components/Alert/index.ts @@ -2,4 +2,4 @@ export * from './Alert'; export * from './AlertContext'; export * from './AlertActionCloseButton'; export * from './AlertActionLink'; -export { AlertGroup } from './AlertGroup'; \ No newline at end of file +export * from './AlertGroup'; \ No newline at end of file From 9909db78733d574d927d5cf1dfc11970cffbebc7 Mon Sep 17 00:00:00 2001 From: mcarrano Date: Thu, 13 Apr 2023 16:03:31 -0400 Subject: [PATCH 5/8] reverse change is export stmt on ln 5 --- packages/react-core/src/components/Alert/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Alert/index.ts b/packages/react-core/src/components/Alert/index.ts index 5122cae9524..2f8e14c7a77 100644 --- a/packages/react-core/src/components/Alert/index.ts +++ b/packages/react-core/src/components/Alert/index.ts @@ -2,4 +2,4 @@ export * from './Alert'; export * from './AlertContext'; export * from './AlertActionCloseButton'; export * from './AlertActionLink'; -export * from './AlertGroup'; \ No newline at end of file +export {AlertGroup} from './AlertGroup'; \ No newline at end of file From 5fdec6758f8c1a135b7e387ef75ff9adbc0f35f8 Mon Sep 17 00:00:00 2001 From: mcarrano Date: Thu, 13 Apr 2023 16:59:56 -0400 Subject: [PATCH 6/8] Add spaces --- packages/react-core/src/components/Alert/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Alert/index.ts b/packages/react-core/src/components/Alert/index.ts index 2f8e14c7a77..cb297a2eaa3 100644 --- a/packages/react-core/src/components/Alert/index.ts +++ b/packages/react-core/src/components/Alert/index.ts @@ -2,4 +2,4 @@ export * from './Alert'; export * from './AlertContext'; export * from './AlertActionCloseButton'; export * from './AlertActionLink'; -export {AlertGroup} from './AlertGroup'; \ No newline at end of file +export { AlertGroup } from './AlertGroup'; \ No newline at end of file From ea31cdf73ea8bec66a685b009936eea113d8a0dc Mon Sep 17 00:00:00 2001 From: mcarrano Date: Fri, 14 Apr 2023 16:41:31 -0400 Subject: [PATCH 7/8] Fix heading conflict --- packages/react-core/src/components/Alert/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Alert/index.ts b/packages/react-core/src/components/Alert/index.ts index cb297a2eaa3..5122cae9524 100644 --- a/packages/react-core/src/components/Alert/index.ts +++ b/packages/react-core/src/components/Alert/index.ts @@ -2,4 +2,4 @@ export * from './Alert'; export * from './AlertContext'; export * from './AlertActionCloseButton'; export * from './AlertActionLink'; -export { AlertGroup } from './AlertGroup'; \ No newline at end of file +export * from './AlertGroup'; \ No newline at end of file From 3f28334fd118e81921be417ddd2920f37712fa4c Mon Sep 17 00:00:00 2001 From: mcarrano Date: Mon, 17 Apr 2023 09:40:03 -0400 Subject: [PATCH 8/8] Push alert.md fixes --- packages/react-core/src/components/Alert/examples/Alert.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index f028e7549c5..fc6a0c85682 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -15,7 +15,7 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; ## Alert examples -### Variants +### 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 "default". @@ -369,7 +369,7 @@ This example shows how an alert could be triggered by an asynchronous event in t 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. -### Variants +### Alert group variants Alert groups can be one of the following variants: