@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

package/helpers/package.json

@@ -0,0 +1 @@
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.0.0-prerelease.9"}

package/layouts/package.json

@@ -0,0 +1 @@
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.0.0-prerelease.9"}

package/next/package.json

@@ -0,0 +1 @@
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.0.0-prerelease.9"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.99",
+  "version": "5.0.0-prerelease.10",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -43,19 +43,19 @@
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated node_modules",
     "generate": "node scripts/copyStyles.js",
-    "subpaths": "node scripts/createSubpaths.js"
+    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-alpha.14",
-    "@patternfly/react-styles": "^5.0.0-alpha.10",
-    "@patternfly/react-tokens": "^5.0.0-alpha.9",
-    "focus-trap": "7.4.1",
+    "@patternfly/react-icons": "^5.0.0-prerelease.5",
+    "@patternfly/react-styles": "^5.0.0-prerelease.3",
+    "@patternfly/react-tokens": "^5.0.0-prerelease.3",
+    "focus-trap": "7.4.3",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.46",
-    "@rollup/plugin-commonjs": "^24.1.0",
+    "@patternfly/patternfly": "5.0.0-prerelease.3",
+    "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "css": "^2.2.3",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "00f77395c5d7d3e1fb8fc44c337cfdb63ab31638"
+  "gitHead": "c4d03d3286d6a642009fe92e6d184c82ac2eac9b"
 }

package/single-packages.config.json

@@ -1,14 +1,4 @@
 {
     "packageName": "@patternfly/react-core",
-    "modules": [ 
-        {
-            "name": "dist/esm",
-            "type": "esm"
-        },
-        {
-            "name": "dist/js",
-            "type": "cjs"
-        }
-    ],
     "exclude": []
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -7,8 +7,6 @@ import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Modal, ModalVariant } from '../Modal';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
-// eslint-disable-next-line camelcase
-import c_about_modal_box_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box_BackgroundImage';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
@@ -89,12 +87,10 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           hasNoBodyWrapper
         >
           <AboutModalBox
-            style={
-              /* eslint-disable camelcase */
+             style={
               backgroundImageSrc
-                ? { [c_about_modal_box_BackgroundImage.name as string]: `url(${backgroundImageSrc})` }
+                ? { ['--pf-v5-c-about-modal-box--BackgroundImage']: `url(${backgroundImageSrc})` } as React.CSSProperties  
                 : {}
-              /* eslint-enable camelcase */
             }
             className={css(className)}
           >

package/src/components/AboutModal/AboutModalBoxContent.tsx

@@ -19,7 +19,7 @@ export const AboutModalBoxContent: React.FunctionComponent<AboutModalBoxContentP
   ...props
 }: AboutModalBoxContentProps) => (
   <div className={css(styles.aboutModalBoxContent)} {...props}>
-    <div className={css('pf-c-about-modal-box__body')}>
+    <div className={css('pf-v5-c-about-modal-box__body')}>
       {hasNoContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
     </div>
     <p className={css(styles.aboutModalBoxStrapline)}>{trademark}</p>

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
       aria-label="Close Dialog"
       class="pf-v5-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       type="button"
     >
@@ -18,8 +18,10 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 352 512"
+        width="1em"
       >
         <path
           d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -40,7 +42,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
       aria-label="Klose Daylok"
       class="pf-v5-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-3"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       type="button"
     >
@@ -48,8 +50,10 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 352 512"
+        width="1em"
       >
         <path
           d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -70,7 +74,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
       aria-label="Close Dialog"
       class="pf-v5-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-2"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       type="button"
     >
@@ -78,8 +82,10 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 352 512"
+        width="1em"
       >
         <path
           d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxContent Test 1`] = `
     id="id"
   >
     <div
-      class="pf-c-about-modal-box__body"
+      class="pf-v5-c-about-modal-box__body"
     >
       <div
         class="pf-v5-c-content"

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
     <h1
       class="pf-v5-c-title pf-m-4xl"
       data-ouia-component-id="OUIA-Generated-Title-1"
-      data-ouia-component-type="PF4/Title"
+      data-ouia-component-type="PF5/Title"
       data-ouia-safe="true"
       id="id"
     >

package/src/components/AboutModal/examples/AboutModal.md

@@ -1,7 +1,7 @@
 ---
 id: About modal
 section: components
-cssPrefix: pf-c-about-modal-box
+cssPrefix: pf-v5-c-about-modal-box
 propComponents: ['AboutModal']
 ---
 import brandImg from './brandImg.svg';
@@ -20,6 +20,3 @@ import bgImg from './patternfly-orb.svg';
 ```ts file="./AboutModalComplexUserPositionedContent.tsx"
 ```
 
-### Custom background image
-```ts file="./AboutModalCustomBackgroundImage.tsx"
-```

package/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalBasic: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         productName="Product Name"
       >
         <TextContent>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         hasNoContentContainer={true}
         productName="Product Name"
       >

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(event: any) => toggleModal(event)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         aria-label="No product name about modal"
       >
         <TextContent>

package/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -34,7 +34,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion', () => {
+test('Renders with class name pf-v5-c-accordion', () => {
   render(<Accordion>Test</Accordion>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion');

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -85,7 +85,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion__expandable-content', () => {
+test('Renders with class name pf-v5-c-accordion__expandable-content', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>

package/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx

@@ -19,7 +19,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-accordion__expandable-content-body', () => {
+test('Renders with class name pf-v5-c-accordion__expandable-content-body', () => {
   render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__expandable-content-body');

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -42,7 +42,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('button')).toHaveAccessibleName('Label');
 });
 
-test('Renders the accordion toggle with class pf-c-accordion__toggle', () => {
+test('Renders the accordion toggle with class pf-v5-c-accordion__toggle', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -66,7 +66,7 @@ test('Renders the accordion toggle with custom class names provided via prop', (
   expect(screen.getByRole('button')).toHaveClass('test-class');
 });
 
-test('Renders with children inside class pf-c-accordion__toggle-text', () => {
+test('Renders with children inside class pf-v5-c-accordion__toggle-text', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -78,7 +78,7 @@ test('Renders with children inside class pf-c-accordion__toggle-text', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__toggle-text');
 });
 
-test('Renders with the toggle icon inside class pf-c-accordion__toggle-icon', () => {
+test('Renders with the toggle icon inside class pf-v5-c-accordion__toggle-icon', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">

package/src/components/Accordion/examples/Accordion.md

@@ -1,7 +1,7 @@
 ---
 id: Accordion
 section: components
-cssPrefix: pf-c-accordion
+cssPrefix: pf-v5-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 

package/src/components/ActionList/ActionListItem.tsx

@@ -13,7 +13,7 @@ export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   className = '',
   ...props
 }: ActionListItemProps) => (
-  <div className={css('pf-c-action-list__item', className)} {...props}>
+  <div className={css('pf-v5-c-action-list__item', className)} {...props}>
     {children}
   </div>
 );

package/src/components/ActionList/__tests__/ActionList.test.tsx

@@ -13,7 +13,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list', () => {
+test('Renders with class pf-v5-c-action-list', () => {
   render(<ActionList>Test</ActionList>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list');

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -13,7 +13,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list__group', () => {
+test('Renders with class pf-v5-c-action-list__group', () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__group');

package/src/components/ActionList/__tests__/ActionListItem.test.tsx

@@ -13,10 +13,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list__item', () => {
+test('Renders with class pf-v5-c-action-list__item', () => {
   render(<ActionListItem>Test</ActionListItem>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__item');
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__item');
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-action-list__item"
+    class="pf-v5-c-action-list__item"
   >
     test
   </div>

package/src/components/ActionList/examples/ActionList.md

@@ -1,7 +1,7 @@
 ---
 id: Action list
 section: components
-cssPrefix: pf-c-action-list
+cssPrefix: pf-v5-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 

package/src/components/Alert/AlertGroup.tsx

@@ -63,6 +63,8 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
       onOverflowClick,
       overflowMessage,
       'aria-label': ariaLabel,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      appendTo, // dont pass down to ul
       ...props
     } = this.props;
     const alertGroup = (

package/src/components/Alert/__tests__/Alert.test.tsx

@@ -34,7 +34,7 @@ test('Renders without children', () => {
   expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-test('Renders with class pf-c-alert on the containing div', () => {
+test('Renders with class pf-v5-c-alert on the containing div', () => {
   render(
     <Alert title="Some title" data-testid="Alert-test-id">
       Some alert
@@ -43,7 +43,7 @@ test('Renders with class pf-c-alert on the containing div', () => {
   expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-v5-c-alert');
 });
 
-test('Renders with class pf-c-alert__title on the div containing the title', () => {
+test('Renders with class pf-v5-c-alert__title on the div containing the title', () => {
   render(<Alert title="Some title">Some alert</Alert>);
   expect(screen.getByRole('heading', { name: 'Custom alert: Some title' })).toHaveClass('pf-v5-c-alert__title');
 });
@@ -199,7 +199,7 @@ test('Renders the element passed via the actionClose prop', () => {
   expect(screen.getByRole('button', { name: 'Action close' })).toBeVisible();
 });
 
-test('Renders the actionClose element inside pf-c-alert__action', () => {
+test('Renders the actionClose element inside pf-v5-c-alert__action', () => {
   render(
     <Alert title="Some title" actionClose="Action close">
       Some alert
@@ -239,7 +239,7 @@ test('Renders the element passed via the actionLinks prop', () => {
   expect(screen.getByRole('button', { name: 'Action link' })).toBeVisible();
 });
 
-test('Renders the actionLinks element inside pf-c-alert__action-group', () => {
+test('Renders the actionLinks element inside pf-v5-c-alert__action-group', () => {
   render(
     <Alert title="Some title" actionLinks="Action link">
       Some alert
@@ -255,7 +255,7 @@ test('Renders children', () => {
   expect(screen.getByText('Some alert')).toBeVisible();
 });
 
-test('Renders children inside pf-c-alert__description', () => {
+test('Renders children inside pf-v5-c-alert__description', () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
   expect(screen.getByText('Some alert')).toHaveClass('pf-v5-c-alert__description');
@@ -609,7 +609,7 @@ test('Renders with class pf-m-expandable when isExpandable = true', () => {
   expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-expandable');
 });
 
-test('Renders AlertToggleExpandButton inside pf-c-alert__toggle', () => {
+test('Renders AlertToggleExpandButton inside pf-v5-c-alert__toggle', () => {
   render(
     <Alert isExpandable title="Some title">
       Some alert

package/src/components/Alert/__tests__/AlertIcon.test.tsx

@@ -65,7 +65,7 @@ test('Renders with the passed custom icon when one is passed rather than the ico
   expect(screen.getByText('Custom icon')).toBeVisible();
 });
 
-test('Renders the icon inside class pf-c-alert__icon', () => {
+test('Renders the icon inside class pf-v5-c-alert__icon', () => {
   render(<AlertIcon variant="custom" />);
 
   expect(screen.getByText('Bell icon mock')).toHaveClass('pf-v5-c-alert__icon');

package/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx

@@ -108,7 +108,7 @@ test('Renders a Button with variant: ButtonVariant.plain', () => {
   expect(screen.getByText('variant: plain')).toBeVisible();
 });
 
-test('Renders with the toggle icon inside class pf-c-alert__toggle-icon', () => {
+test('Renders with the toggle icon inside class pf-v5-c-alert__toggle-icon', () => {
   render(
     <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
       <AlertToggleExpandButton />

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
     aria-label="Close some label alert: test title"
     class="pf-v5-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -15,8 +15,10 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
       aria-hidden="true"
       class="pf-v5-svg"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 352 512"
+      width="1em"
     >
       <path
         d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-link pf-m-inline ''"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap

@@ -9,8 +9,10 @@ exports[`AlertIcon should match snapshot (auto-generated) 1`] = `
       aria-hidden="true"
       class="pf-v5-svg"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 512 512"
+      width="1em"
     >
       <path
         d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"

package/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Matches snapshot 1`] = `
     aria-live="polite"
     class="pf-v5-c-alert pf-m-custom"
     data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF4/Alert"
+    data-ouia-component-type="PF5/Alert"
     data-ouia-safe="true"
   >
     <div>

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -9,8 +9,10 @@ exports[`Matches the snapshot 1`] = `
       aria-hidden="true"
       class="pf-v5-svg"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 352 512"
+      width="1em"
     >
       <path
         d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

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

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: pf-c-alert
+cssPrefix: ['pf-v5-c-alert', 'pf-v5-c-alert-group']
 propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink']
 ouia: true
 ---

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

@@ -10,7 +10,7 @@ interface AlertInfo {
 export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
   const getUniqueId: () => number = () => new Date().getTime();
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const addAlert = (alertInfo: AlertInfo) => {
     setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);

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

@@ -6,6 +6,7 @@ import {
   AlertActionCloseButton,
   AlertVariant,
   InputGroup,
+  InputGroupItem,
   useInterval
 } from '@patternfly/react-core';
 
@@ -13,7 +14,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
   const [isRunning, setIsRunning] = React.useState(false);
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 
@@ -45,12 +46,16 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
-          Start async alerts
-        </button>
-        <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
-          Stop async alerts
-        </button>
+        <InputGroupItem>
+          <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
+            Start async alerts
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
+            Stop async alerts
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion aria-live="assertive">
         {alerts.map(({ title, variant, key }) => (