@patternfly/react-core 6.0.0-prerelease.13 → 6.0.0-prerelease.15

package/helpers/package.json

@@ -1 +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":"6.0.0-prerelease.12","private":true}
+{"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":"6.0.0-prerelease.14","private":true}

package/layouts/package.json

@@ -1 +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":"6.0.0-prerelease.12","private":true}
+{"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":"6.0.0-prerelease.14","private":true}

package/next/package.json

@@ -1 +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":"6.0.0-prerelease.12","private":true}
+{"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":"6.0.0-prerelease.14","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-prerelease.13",
+  "version": "6.0.0-prerelease.15",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "3d2015246fa45ec7611edf66b1e6ad11f5d12124"
+  "gitHead": "d29e2351921da25429652d253e22eec26dc64ddf"
 }

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

@@ -1,7 +1,7 @@
 ---
 id: About modal
 section: components
-cssPrefix: pf-v5-c-about-modal-box
+cssPrefix: pf-v6-c-about-modal-box
 propComponents: ['AboutModal']
 ---
 import brandImg from '../../assets/PF-IconLogo.svg';

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

@@ -1,7 +1,7 @@
 ---
 id: Accordion
 section: components
-cssPrefix: pf-v5-c-accordion
+cssPrefix: pf-v6-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
@@ -32,4 +32,4 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 ### Toggle icon at start
 
 ```ts file="./AccordionToggleIconAtStart.tsx"
-```
+```

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

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

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

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

package/src/components/Avatar/examples/Avatar.md

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

package/src/components/BackToTop/examples/BackToTop.md

@@ -1,7 +1,7 @@
 ---
 id: Back to top
 section: components
-cssPrefix: pf-v5-c-back-to-top
+cssPrefix: pf-v6-c-back-to-top
 propComponents: ['BackToTop']
 ---
 

package/src/components/Backdrop/examples/Backdrop.md

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

package/src/components/BackgroundImage/examples/BackgroundImage.md

@@ -1,7 +1,7 @@
 ---
 id: Background image
 section: components
-cssPrefix: pf-v5-c-background-image
+cssPrefix: pf-v6-c-background-image
 propComponents: ['BackgroundImage']
 ---
 

package/src/components/Badge/examples/Badge.md

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

package/src/components/Banner/examples/Banner.md

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

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 id: Breadcrumb
 section: components
-cssPrefix: pf-v5-c-breadcrumb
+cssPrefix: pf-v6-c-breadcrumb
 propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---

package/src/components/Button/examples/Button.md

@@ -1,7 +1,7 @@
 ---
 id: Button
 section: components
-cssPrefix: pf-v5-c-button
+cssPrefix: pf-v6-c-button
 propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-calendar-month
+cssPrefix: pf-v6-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 

package/src/components/Card/examples/Card.md

@@ -1,7 +1,7 @@
 ---
 id: Card
 section: components
-cssPrefix: pf-v5-c-card
+cssPrefix: pf-v6-c-card
 propComponents:
   [
     'Card',

package/src/components/Checkbox/examples/Checkbox.md

@@ -2,7 +2,7 @@
 id: Checkbox
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-check
+cssPrefix: pf-v6-c-check
 propComponents: ['Checkbox']
 ---
 

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-v5-c-copyclipboard
+cssPrefix: pf-v6-c-clipboard-copy
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
 ouia: true
 ---

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -1,7 +1,7 @@
 ---
 id: Code block
 section: components
-cssPrefix: pf-v5-c-code-block
+cssPrefix: pf-v6-c-code-block
 propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 

package/src/components/DataList/DataListCheck.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+import { Checkbox, CheckboxProps } from '../Checkbox';
 
-export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'checked'> {
+export interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {
+  /** Id of the DataList checkbox. */
+  id?: string;
   /** Additional classes added to the DataList item checkbox */
   className?: string;
   /** Flag to show if the DataList checkbox selection is valid or invalid */
@@ -32,27 +35,31 @@ export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElemen
 }
 
 export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
-  className = '',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {},
+  id,
+  className,
+  onChange,
   isValid = true,
   isDisabled = false,
-  isChecked = false,
-  checked = false,
+  isChecked,
+  checked,
   defaultChecked,
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
+  const uniqueId = React.useId();
+
   const check = (
     <div className={css(styles.dataListCheck)}>
-      <input
-        {...props}
-        type="checkbox"
-        onChange={(event) => onChange(event, event.currentTarget.checked)}
+      <Checkbox
+        id={id ?? `datalist-check-${uniqueId}`}
+        isChecked={isChecked}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onChange={onChange}
         aria-invalid={!isValid}
-        disabled={isDisabled}
-        {...([true, false].includes(defaultChecked) && { defaultChecked })}
-        {...(![true, false].includes(defaultChecked) && { checked: isChecked || checked })}
+        isDisabled={isDisabled}
+        isLabelWrapped
+        {...props}
       />
     </div>
   );

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/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">
@@ -112,7 +112,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">
@@ -177,7 +177,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">

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/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">
@@ -149,7 +149,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">

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