@patternfly/react-core 6.0.0-prerelease.2 → 6.0.0-prerelease.20

package/src/components/DataList/__tests__/DataListAction.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { DataListAction } from '../DataListAction';
 
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
@@ -15,38 +17,35 @@ test('Renders to match snapshot', () => {
 
 test(`Renders with default class ${styles.dataListItemAction}`, () => {
   render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+    <DataListAction aria-label="Actions" data-testid="actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true });
+  expect(screen.getByTestId('actions')).toHaveClass(styles.dataListItemAction, { exact: true });
 });
 
 test(`Renders with custom class when className is passed`, () => {
   render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
+    <DataListAction
+      aria-label="Actions"
+      data-testid="actions"
+      aria-labelledby="ex-action"
+      id="ex-action"
+      className="test-class"
+    >
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass('test-class');
+  expect(screen.getByTestId('actions')).toHaveClass('test-class');
 });
 
 test(`Renders with spread props`, () => {
   render(
-    <DataListAction dir="rtl" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
-      test
-    </DataListAction>
-  );
-  expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
-});
-
-test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
-  render(
-    <DataListAction id="id" aria-label="Actions" aria-labelledby="ex-action" isPlainButtonAction>
+    <DataListAction dir="rtl" data-testid="actions" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass(styles.dataListAction);
+  expect(screen.getByTestId('actions')).toHaveAttribute('dir', 'rtl');
 });
 
 ['hidden', 'visible'].forEach((vis) => {
@@ -58,18 +57,19 @@ test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = tru
         aria-labelledby="check-action-item2 check-action-action2"
         id="check-action-action2"
         aria-label="Actions"
+        data-testid="actions"
       >
         test
       </DataListAction>
     );
 
     if (visMod === 'hidden') {
-      expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}`]);
+      expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}`]);
     }
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
   });
 });

package/src/components/DataList/__tests__/DataListCheck.test.tsx

@@ -15,7 +15,9 @@ it('does not throw a "A component is changing an uncontrolled input of type chec
   const ControlledDataListCheck = () => {
     const [checked, setChecked] = React.useState(false);
 
-    return <DataListCheck isChecked={checked} onChange={() => setChecked(!checked)} aria-labelledby={'string'} />;
+    return (
+      <DataListCheck id="test" isChecked={checked} onChange={() => setChecked(!checked)} aria-labelledby={'string'} />
+    );
   };
 
   render(<ControlledDataListCheck />);

package/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx

@@ -10,11 +10,12 @@ import {} from '../..';
 it('DataListCheck should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <DataListCheck
+      id="test"
       className={"''"}
       isValid={true}
       isDisabled={false}
-      isChecked={null}
-      checked={null}
+      isChecked={false}
+      checked={false}
       onChange={(event: React.FormEvent<HTMLInputElement>, checked: boolean) => {}}
       aria-labelledby={'string'}
     />

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap

@@ -8,11 +8,21 @@ exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v6-c-data-list__check"
     >
-      <input
-        aria-invalid="false"
-        aria-labelledby="string"
-        type="checkbox"
-      />
+      <label
+        class="pf-v6-c-check pf-m-standalone"
+        for="test"
+      >
+        <input
+          aria-invalid="false"
+          aria-labelledby="string"
+          class="pf-v6-c-check__input"
+          data-ouia-component-id="OUIA-Generated-Checkbox-1"
+          data-ouia-component-type="PF6/Checkbox"
+          data-ouia-safe="true"
+          id="test"
+          type="checkbox"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>

package/src/components/DataList/examples/DataList.md

@@ -1,7 +1,7 @@
 ---
 id: Data list
 section: components
-cssPrefix: pf-v5-c-data-list
+cssPrefix: pf-v6-c-data-list
 propComponents:
   [
     'DataList',

package/src/components/DataList/examples/DataListActions.tsx

@@ -75,7 +75,6 @@ export const DataListActions: React.FunctionComponent = () => {
               aria-labelledby="multi-actions-item1 multi-actions-action1"
               id="multi-actions-action1"
               aria-label="Actions"
-              isPlainButtonAction
             >
               <Dropdown
                 popperProps={{ position: 'right' }}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -48,7 +48,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
     <DataList aria-label="Checkbox and action data list example">
       <DataListItem aria-labelledby="check-action-item1">
         <DataListItemRow>
-          <DataListCheck aria-labelledby="check-action-item1" name="check-action-check1" />
+          <DataListCheck id="check-item1" aria-labelledby="check-action-item1" name="check-action-check1" />
           <DataListItemCells
             dataListCells={[
               <DataListCell key="primary content">
@@ -73,7 +73,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-labelledby="check-action-item1 check-action-action1"
             id="check-action-action1"
             aria-label="Actions"
-            isPlainButtonAction
           >
             <Dropdown
               popperProps={{ position: 'right' }}
@@ -112,7 +111,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
       </DataListItem>
       <DataListItem aria-labelledby="check-action-item2">
         <DataListItemRow>
-          <DataListCheck aria-labelledby="check-action-item2" name="check-action-check2" />
+          <DataListCheck id="check-item2" aria-labelledby="check-action-item2" name="check-action-check2" />
           <DataListItemCells
             dataListCells={[
               <DataListCell key="primary content">
@@ -129,7 +128,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-labelledby="check-action-item2 check-action-action2"
             id="check-action-action2"
             aria-label="Actions"
-            isPlainButtonAction
           >
             <Dropdown
               popperProps={{ position: 'right' }}
@@ -177,7 +175,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
       </DataListItem>
       <DataListItem aria-labelledby="check-action-item3">
         <DataListItemRow>
-          <DataListCheck aria-labelledby="check-action-item3" name="check-action-check3" />
+          <DataListCheck id="check-item3" aria-labelledby="check-action-item3" name="check-action-check3" />
           <DataListItemCells
             dataListCells={[
               <DataListCell key="primary content">
@@ -194,7 +192,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-labelledby="check-action-item3 check-action-action3"
             id="check-action-action3"
             aria-label="Actions"
-            isPlainButtonAction
           >
             <Dropdown
               popperProps={{ position: 'right' }}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -65,7 +65,6 @@ export const DataListClickableRows: React.FunctionComponent = () => {
               aria-labelledby="clickable-action-item1 clickable-action-action1"
               id="clickable-action-action1"
               aria-label="Actions"
-              isPlainButtonAction
             >
               <Dropdown
                 popperProps={{ position: 'right' }}
@@ -116,7 +115,6 @@ export const DataListClickableRows: React.FunctionComponent = () => {
               aria-labelledby="clickable-actions-item2 clickable-actions-action2"
               id="clickable-actions-action2"
               aria-label="Actions"
-              isPlainButtonAction
             >
               <Dropdown
                 popperProps={{ position: 'right' }}

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -76,7 +76,12 @@ export const DataListDraggable: React.FunctionComponent = () => {
                       aria-describedby={`description-${uniqueId}`}
                       aria-pressed="false"
                     />
-                    <DataListCheck aria-labelledby={`draggable-${id}`} name={id} otherControls />
+                    <DataListCheck
+                      id={`check-draggable-${id}`}
+                      aria-labelledby={`draggable-${id}`}
+                      name={id}
+                      otherControls
+                    />
                   </DataListControl>
                   <DataListItemCells
                     dataListCells={[

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -81,12 +81,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="ex-item1 ex-action1"
-              id="ex-action1"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect1}
@@ -157,12 +152,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="ex-item2 ex-action2"
-              id="ex-action2"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect2}
@@ -233,12 +223,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="ex-item3 ex-action3"
-              id="ex-action3"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="ex-item3 ex-action3" id="ex-action3" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect3}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -83,12 +83,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="m-ex-item1 m-ex-action1"
-              id="m-ex-action1"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="m-ex-item1 m-ex-action1" id="m-ex-action1" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect1}
@@ -161,12 +156,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="m-ex-item2 m-ex-action2"
-              id="m-ex-action2"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="m-ex-item2 m-ex-action2" id="m-ex-action2" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect2}
@@ -227,12 +217,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="m-ex-item3 m-ex-action3"
-              id="m-ex-action3"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="m-ex-item3 m-ex-action3" id="m-ex-action3" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect3}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -48,7 +48,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         <DataList aria-label="Width modifier data list example 1">
           <DataListItem aria-labelledby="width-ex1-item1">
             <DataListItemRow>
-              <DataListCheck aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
+              <DataListCheck id="check-width-ex1-item1" aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
               <DataListItemCells
                 dataListCells={[
                   <DataListCell key="default">
@@ -75,7 +75,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         <DataList aria-label="Width modifier data list example 2">
           <DataListItem aria-labelledby="width-ex2-item1">
             <DataListItemRow>
-              <DataListCheck aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
+              <DataListCheck id="check-width-ex2-item1" aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
               <DataListItemCells
                 dataListCells={[
                   <DataListCell width={2} key="width 2">
@@ -92,7 +92,6 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-labelledby="width-ex2-item1 width-ex2-action1"
                 id="width-ex2-action1"
                 aria-label="Actions"
-                isPlainButtonAction
               >
                 <Dropdown
                   popperProps={{ position: 'right' }}
@@ -149,7 +148,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-controls="width-ex3-expand1"
                 onClick={() => setShow(!show)}
               />
-              <DataListCheck aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
+              <DataListCheck id="check-width-ex3-item1" aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
               <DataListItemCells
                 dataListCells={[
                   <DataListCell width={5} key="width 5">
@@ -167,7 +166,6 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-labelledby="width-ex3-item1 width-ex3-action1"
                 id="width-ex3-action1"
                 aria-label="Actions"
-                isPlainButtonAction
               >
                 <Dropdown
                   popperProps={{ position: 'right' }}

package/src/components/DatePicker/examples/DatePicker.md

@@ -2,7 +2,7 @@
 id: Date picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-date-picker
+cssPrefix: pf-v6-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef', 'DatePickerRequiredObject']
 ---
 

package/src/components/DescriptionList/DescriptionList.tsx

@@ -7,7 +7,7 @@ import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_descr
 import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
 
 const cssTermWidth = {
-  name: '--pf-v5-c-description-list__term-width'
+  name: `--${styles.descriptionList}_term-width`
 };
 
 export interface BreakpointModifiers {

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

@@ -124,21 +124,21 @@ test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, (
       }}
     />
   );
-  expect(screen.getByLabelText('list')).toHaveStyle({
-    '--pf-v6-c-description-list--m-horizontal__term--width': '12ch',
-    '--pf-v6-c-description-list--m-horizontal__term--width-on-sm': '15ch',
-    '--pf-v6-c-description-list--m-horizontal__term--width-on-md': '20ch',
-    '--pf-v6-c-description-list--m-horizontal__term--width-on-lg': '28ch',
-    '--pf-v6-c-description-list--m-horizontal__term--width-on-xl': '30ch',
-    '--pf-v6-c-description-list--m-horizontal__term--width-on-2xl': '35ch'
-  });
+  const listStyles = {};
+  listStyles[`--${styles.descriptionList}--m-horizontal__term--width`] = '12ch';
+  listStyles[`--${styles.descriptionList}--m-horizontal__term--width-on-sm`] = '15ch';
+  listStyles[`--${styles.descriptionList}--m-horizontal__term--width-on-md`] = '20ch';
+  listStyles[`--${styles.descriptionList}--m-horizontal__term--width-on-lg`] = '28ch';
+  listStyles[`--${styles.descriptionList}--m-horizontal__term--width-on-xl`] = '30ch';
+  listStyles[`--${styles.descriptionList}--m-horizontal__term--width-on-2xl`] = '35ch';
+  expect(screen.getByLabelText('list')).toHaveStyle(listStyles);
 });
 
 test.skip(`Renders style when termWidth is set`, () => {
   render(<DescriptionList aria-label="list" isHorizontal termWidth="30px" />);
-  expect(screen.getByLabelText('list')).toHaveStyle({
-    '--pf-v5-c-description-list__term--width': '30px'
-  });
+  const listStyles = {};
+  listStyles[`--${styles.descriptionList}__term--width`] = '30px';
+  expect(screen.getByLabelText('list')).toHaveStyle(listStyles);
 });
 
 test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () => {
@@ -149,8 +149,10 @@ test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () =
       autoFitMinModifier={{ default: '50px', sm: '50px', md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}
     />
   );
+  const listStyles = {};
+
   expect(screen.getByLabelText('list')).toHaveAttribute(
     'style',
-    '--pf-v6-c-description-list--GridTemplateColumns--min: 50px; --pf-v6-c-description-list--GridTemplateColumns--min-on-sm: 50px; --pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;'
+    `--${styles.descriptionList}--GridTemplateColumns--min: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-sm: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-md: 100px; --${styles.descriptionList}--GridTemplateColumns--min-on-lg: 150px; --${styles.descriptionList}--GridTemplateColumns--min-on-xl: 200px; --${styles.descriptionList}--GridTemplateColumns--min-on-2xl: 300px;`
   );
 });

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -1,7 +1,7 @@
 ---
 id: 'Description list'
 section: components
-cssPrefix: 'pf-v5-c-description-list'
+cssPrefix: 'pf-v6-c-description-list'
 propComponents:
   [
     'DescriptionList',

package/src/components/Divider/examples/Divider.md

@@ -1,7 +1,7 @@
 ---
 id: Divider
 section: components
-cssPrefix: pf-v5-c-divider
+cssPrefix: pf-v6-c-divider
 propComponents: ['Divider']
 ---
 

package/src/components/Drawer/examples/Drawer.md

@@ -1,6 +1,6 @@
 ---
 id: Drawer
-cssPrefix: pf-v5-c-drawer
+cssPrefix: pf-v6-c-drawer
 propComponents:
   [
     Drawer,

package/src/components/Dropdown/Dropdown.tsx

@@ -113,7 +113,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
           'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
         );
         firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+      }, 10);
     }
 
     prevIsOpen.current = isOpen;

package/src/components/Dropdown/examples/Dropdown.md

@@ -2,7 +2,7 @@
 id: Dropdown
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-menu
+cssPrefix: pf-v6-c-menu
 propComponents:
   [
     'Dropdown',

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -1,7 +1,7 @@
 ---
 id: Dual list selector
 section: components
-cssPrefix: 'pf-v5-c-dual-list-selector'
+cssPrefix: 'pf-v6-c-dual-list-selector'
 propComponents:
   [
     'DualListSelector',

package/src/components/EmptyState/EmptyState.tsx

@@ -36,7 +36,7 @@ export interface EmptyStateProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the title inside empty state header */
   titleClassName?: string;
   /** Text of the title inside empty state header, will be wrapped in headingLevel */
-  titleText: React.ReactNode;
+  titleText?: React.ReactNode;
   /** Empty state icon element to be rendered. Can also be a spinner component */
   icon?: React.ComponentType<any>;
   /** The heading level to use, default is h1 */

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -18,7 +18,7 @@ export interface EmptyStateHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the title inside empty state header */
   titleClassName?: string;
   /** Text of the title inside empty state header, will be wrapped in headingLevel */
-  titleText: React.ReactNode;
+  titleText?: React.ReactNode;
   /** Empty state icon element to be rendered. Can also be a spinner component */
   icon?: React.ComponentType<any>;
   /** The heading level to use, default is h1 */
@@ -35,9 +35,11 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
 }: EmptyStateHeaderProps) => (
   <div className={css(`${styles.emptyState}__header`, className)} {...props}>
     {Icon && <EmptyStateIcon icon={Icon} />}
-    <div className={css(`${styles.emptyState}__title`)}>
-      <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
-    </div>
+    {titleText && (
+      <div className={css(`${styles.emptyState}__title`)}>
+        <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
+      </div>
+    )}
   </div>
 );
 

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

@@ -92,6 +92,11 @@ describe('EmptyState', () => {
     expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
+  test('title is not rendered when titleText is not passed', () => {
+    render(<EmptyStateHeader headingLevel="h3" />);
+    expect(screen.queryByRole('heading', { level: 3 })).not.toBeInTheDocument();
+  });
+
   test('Footer', () => {
     render(<EmptyStateFooter className="custom-empty-state-footer" data-testid="actions-test-id" />);
     expect(screen.getByTestId('actions-test-id')).toHaveClass('custom-empty-state-footer');

package/src/components/EmptyState/examples/EmptyState.md

@@ -1,7 +1,7 @@
 ---
 id: Empty state
 section: components
-cssPrefix: pf-v5-c-empty-state
+cssPrefix: pf-v6-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -1,7 +1,7 @@
 ---
 id: Expandable section
 section: components
-cssPrefix: pf-v5-c-expandable-section
+cssPrefix: pf-v6-c-expandable-section
 propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 

package/src/components/FileUpload/examples/FileUpload.md

@@ -1,6 +1,6 @@
 ---
 id: Simple file upload
-cssPrefix: pf-v5-c-file-upload
+cssPrefix: pf-v6-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
 subsection: file-upload

package/src/components/Form/examples/Form.md

@@ -2,7 +2,7 @@
 id: Form
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form
+cssPrefix: pf-v6-c-form
 propComponents:
   [
     'ActionGroup',

package/src/components/FormSelect/examples/FormSelect.md

@@ -2,7 +2,7 @@
 id: Form select
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true
 ---

package/src/components/HelperText/examples/HelperText.md

@@ -1,7 +1,7 @@
 ---
 id: Helper text
 section: components
-cssPrefix: pf-v5-c-helper-text
+cssPrefix: pf-v6-c-helper-text
 propComponents: ['HelperText', 'HelperTextItem']
 ---
 

package/src/components/Hint/examples/Hint.md

@@ -1,7 +1,7 @@
 ---
 id: Hint
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-hint
 propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 

package/src/components/Icon/examples/Icon.md

@@ -1,7 +1,7 @@
 ---
 id: Icon
 section: components
-cssPrefix: pf-v5-c-icon
+cssPrefix: pf-v6-c-icon
 propComponents: ['Icon']
 ---
 

package/src/components/InputGroup/examples/InputGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Input group
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-input-group
 propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 ---
 

package/src/components/JumpLinks/examples/JumpLinks.md

@@ -1,6 +1,7 @@
 ---
 id: Jump links
 section: components
+cssPrefix: pf-v6-c-jump-links
 propComponents: ['JumpLinks', 'JumpLinksItem']
 ---