@patternfly/react-core 6.0.0-prerelease.8 → 6.0.0

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

@@ -71,6 +71,10 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   maxMenuHeight?: string;
   /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
   shouldFocusFirstItemOnOpen?: boolean;
+  /** Flag indicating if scroll on focus of the first menu item should occur. */
+  shouldPreventScrollOnItemFocus?: boolean;
+  /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
+  focusTimeoutDelay?: number;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -91,7 +95,9 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onOpenChangeKeys = ['Escape', 'Tab'],
   menuHeight,
   maxMenuHeight,
-  shouldFocusFirstItemOnOpen = true,
+  shouldFocusFirstItemOnOpen = false,
+  shouldPreventScrollOnItemFocus = true,
+  focusTimeoutDelay = 0,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -112,8 +118,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         const firstElement = menuRef?.current?.querySelector(
           'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
         );
-        firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+        firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldPreventScrollOnItemFocus });
+      }, focusTimeoutDelay);
     }
 
     prevIsOpen.current = isOpen;
@@ -151,7 +157,16 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
+  }, [
+    isOpen,
+    menuRef,
+    toggleRef,
+    onOpenChange,
+    onOpenChangeKeys,
+    shouldPreventScrollOnItemFocus,
+    shouldFocusFirstItemOnOpen,
+    focusTimeoutDelay
+  ]);
 
   const scrollable = maxMenuHeight !== undefined || menuHeight !== undefined || isScrollable;
 
@@ -161,7 +176,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       ref={menuRef}
       onSelect={(event, value) => {
         onSelect && onSelect(event, value);
-        shouldFocusToggleOnSelect && toggleRef.current.focus();
+        shouldFocusToggleOnSelect && toggleRef.current?.focus();
       }}
       isPlain={isPlain}
       isScrollable={scrollable}

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']
 ---
 

package/src/components/Label/examples/Label.md

@@ -1,7 +1,7 @@
 ---
 id: Label
 section: components
-cssPrefix: ['pf-v5-c-label', 'pf-v5-c-label-group']
+cssPrefix: ['pf-v6-c-label', 'pf-v6-c-label-group']
 propComponents: ['Label', 'LabelGroup']
 ---
 

package/src/components/List/examples/List.md

@@ -1,7 +1,7 @@
 ---
 id: List
 section: components
-cssPrefix: pf-v5-c-list
+cssPrefix: pf-v6-c-list
 propComponents: ['List', 'ListItem']
 ---
 

package/src/components/LoginPage/examples/LoginPage.md

@@ -1,7 +1,7 @@
 ---
 id: Login page
 section: components
-cssPrefix: pf-v5-c-login
+cssPrefix: pf-v6-c-login
 propComponents:
   [
     'LoginPage',

package/src/components/Masthead/examples/Masthead.md

@@ -1,7 +1,7 @@
 ---
 id: Masthead
 section: components
-cssPrefix: pf-v5-c-masthead
+cssPrefix: pf-v6-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', MastheadLogo, 'MastheadContent']
 ---