@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.98",
+  "version": "5.0.0-prerelease.1",
   "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",
@@ -46,16 +46,16 @@
     "subpaths": "node scripts/createSubpaths.js"
   },
   "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.1",
+    "@patternfly/react-styles": "^5.0.0-prerelease.1",
+    "@patternfly/react-tokens": "^5.0.0-prerelease.1",
+    "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.1",
+    "@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": "cb753616f434b5fc8308a19047867f16e4cceb65"
+  "gitHead": "0661f17cb3b7b78f9d190b4790c6b64f5e2af118"
 }

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__/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/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/examples/Alert.md

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: pf-c-alert
+cssPrefix: pf-v5-c-alert
 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 }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
@@ -19,7 +20,7 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
 
@@ -34,9 +35,11 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addAlertCollection} type="button" className={btnClasses}>
-          Add alert collection
-        </button>
+        <InputGroupItem>
+          <button onClick={addAlertCollection} type="button" className={btnClasses}>
+            Add alert collection
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion>
         {alerts.map(({ title, variant, key }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
@@ -19,7 +20,7 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 
@@ -38,15 +39,21 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isLiveRegion>
         {alerts.map(({ title, variant, key }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
@@ -33,7 +34,7 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 
@@ -57,15 +58,21 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupToast: React.FunctionComponent = () => {
@@ -19,7 +20,7 @@ export const AlertGroupToast: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 
@@ -38,15 +39,21 @@ export const AlertGroupToast: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add toast success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add toast danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add toast info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add toast success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add toast danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add toast info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion>
         {alerts.map(({ key, variant, title }) => (