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

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

package/src/components/Menu/MenuContainer.tsx

@@ -65,7 +65,7 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
           '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/Menu/examples/Menu.md

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

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -2,7 +2,7 @@
 id: Menu toggle
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-menu-toggle
+cssPrefix: pf-v6-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 ---
 
@@ -215,19 +215,19 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 ### Split toggle with labeled checkbox
 
-To add a text label to a split button toggle, pass `children` to the `<MenuToggle>` component.
+You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonOptions`. 
 
-```
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
-### Split toggle with checkbox and toggle text label
+```
 
-You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
+### Split toggle with checkbox and toggle text 
 
-To do so, pass `children` to the `<MenuToggleCheckbox>` component. When the menu toggle text is clicked, the checkbox's `onChange` callback will be triggered.
+To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonOptions`.
 
-```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
 
 ```
 

package/src/components/Modal/Modal.tsx

@@ -19,6 +19,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   children: React.ReactNode;
   /** Additional classes added to the modal. */
   className?: string;
+  /** Additional classes added to the modal backdrop. */
+  backdropClassName?: string;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
@@ -114,12 +116,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
   isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
 
   componentDidMount() {
-    const {
-      appendTo,
-      'aria-describedby': ariaDescribedby,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby
-    } = this.props;
+    const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     const container = document.createElement('div');
     this.setState({ container });
@@ -131,11 +128,6 @@ class Modal extends React.Component<ModalProps, ModalState> {
     } else {
       target.classList.remove(css(styles.backdropOpen));
     }
-
-    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
-      // eslint-disable-next-line no-console
-      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
-    }
   }
 
   componentDidUpdate() {
@@ -192,6 +184,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         ouiaSafe={ouiaSafe}
         position={position}
         elementToFocus={elementToFocus}
+        backdropClassName={props.backdropClassName}
         {...props}
       />,
       container

package/src/components/Modal/ModalContent.tsx

@@ -20,6 +20,8 @@ export interface ModalContentProps extends OUIAProps {
   children: React.ReactNode;
   /** Additional classes added to the modal box. */
   className?: string;
+  /** Additional classes added to the modal backdrop. */
+  backdropClassName?: string;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
@@ -47,6 +49,7 @@ export interface ModalContentProps extends OUIAProps {
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
+  backdropClassName,
   children,
   className,
   isOpen = false,
@@ -70,19 +73,14 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     return null;
   }
 
-  const ariaLabelledbyFormatted = (): string => {
-    const idRefList: string[] = [];
-    if (ariaLabel && boxId) {
-      idRefList.push(ariaLabel && boxId);
-    }
+  const getAriaLabelledBy = (): string | undefined => {
     if (ariaLabelledby) {
-      idRefList.push(ariaLabelledby);
+      return ariaLabelledby;
     }
-    if (idRefList.length === 0) {
+    if (ariaLabel) {
       return undefined;
-    } else {
-      return idRefList.join(' ');
     }
+    return boxId;
   };
 
   const modalBox = (
@@ -92,7 +90,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       position={position}
       positionOffset={positionOffset}
       aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledbyFormatted()}
+      aria-labelledby={getAriaLabelledBy()}
       aria-describedby={ariaDescribedby}
       {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
       style={
@@ -111,7 +109,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     </ModalBox>
   );
   return (
-    <Backdrop>
+    <Backdrop className={css(backdropClassName)}>
       <FocusTrap
         active={!disableFocusTrap}
         focusTrapOptions={{

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

@@ -83,20 +83,6 @@ describe('Modal', () => {
     expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
   });
 
-  test('modal generates console error when no accessible name is provided', () => {
-    const props = {
-      onClose: jest.fn(),
-      isOpen: true,
-      children: 'modal content'
-    };
-    const consoleErrorMock = jest.fn();
-    global.console = { error: consoleErrorMock } as any;
-
-    render(<Modal {...props} />);
-
-    expect(consoleErrorMock).toHaveBeenCalled();
-  });
-
   test('modal adds aria-hidden attribute to its siblings when open', () => {
     render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
 

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`Modal Content Test description 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
+        aria-labelledby="boxId"
         aria-modal="true"
         class="pf-v6-c-modal-box"
         data-ouia-component-type="PF6/ModalContent"
@@ -34,6 +35,7 @@ exports[`Modal Content Test isOpen 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
+        aria-labelledby="boxId"
         aria-modal="true"
         class="pf-v6-c-modal-box"
         data-ouia-component-type="PF6/ModalContent"
@@ -59,6 +61,7 @@ exports[`Modal Content Test only body 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
+        aria-labelledby="boxId"
         aria-modal="true"
         class="pf-v6-c-modal-box"
         data-ouia-component-type="PF6/ModalContent"
@@ -84,6 +87,7 @@ exports[`Modal Content Test with onclose 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
+        aria-labelledby="boxId"
         aria-modal="true"
         class="pf-v6-c-modal-box pf-m-lg"
         data-ouia-component-type="PF6/ModalContent"

package/src/components/Modal/examples/Modal.md

@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-v5-c-modal-box
+cssPrefix: pf-v6-c-modal-box
 propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
 ouia: true
 ---

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -2,7 +2,7 @@
 id: Multiple file upload
 section: components
 subsection: file-upload
-cssPrefix: pf-v5-c-multiple-file-upload
+cssPrefix: pf-v6-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 ---

package/src/components/Nav/examples/Nav.md

@@ -1,7 +1,7 @@
 ---
 id: Navigation
 section: components
-cssPrefix: pf-v5-c-nav
+cssPrefix: pf-v6-c-nav
 propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'NavExpandable']
 ouia: true
 ---

package/src/components/NotificationBadge/examples/NotificationBadge.md

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

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -1,7 +1,7 @@
 ---
 id: Notification drawer
 section: components
-cssPrefix: pf-v5-c-notification-drawer
+cssPrefix: pf-v6-c-notification-drawer
 propComponents:
   [
     'NotificationDrawer',

package/src/components/NumberInput/examples/NumberInput.md

@@ -1,7 +1,7 @@
 ---
 id: Number input
 section: components
-cssPrefix: pf-v5-c-number-input
+cssPrefix: pf-v6-c-number-input
 propComponents: ['NumberInput']
 ---
 

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -1,7 +1,7 @@
 ---
 id: Overflow menu
 section: components
-cssPrefix: pf-v5-c-overflow-menu
+cssPrefix: pf-v6-c-overflow-menu
 propComponents:
   [
     'OverflowMenu',

package/src/components/Page/Page.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
 import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb';

package/src/components/Page/examples/Page.md

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-v5-c-page
+cssPrefix: pf-v6-c-page
 propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
@@ -115,7 +115,7 @@ To add additional components and information to a group, you may use the followi
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v5-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v6-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
 
 The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
 

package/src/components/Pagination/examples/Pagination.md

@@ -1,7 +1,7 @@
 ---
 id: Pagination
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-pagination
 propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps]
 ouia: true
 ---

package/src/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: Panel
 section: components
-cssPrefix: pf-v5-c-panel
+cssPrefix: pf-v6-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 ---
 

package/src/components/Popover/examples/Popover.md

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

package/src/components/Progress/examples/Progress.md

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

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,7 +1,7 @@
 ---
 id: Progress stepper
 section: components
-cssPrefix: pf-v5-c-progress-stepper
+cssPrefix: pf-v6-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 

package/src/components/Radio/examples/Radio.md

@@ -2,7 +2,7 @@
 id: Radio
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-radio
+cssPrefix: pf-v6-c-radio
 propComponents: ['Radio']
 ouia: true
 ---

package/src/components/SearchInput/examples/SearchInput.md

@@ -1,7 +1,7 @@
 ---
 id: 'Search input'
 section: components
-cssPrefix: 'pf-v5-c-search-input'
+cssPrefix: 'pf-v6-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 ---
 

package/src/components/Select/Select.tsx

@@ -117,7 +117,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       setTimeout(() => {
         const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
         firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+      }, 10);
     }
 
     prevIsOpen.current = isOpen;

package/src/components/Select/examples/Select.md

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-select
+cssPrefix: pf-v6-c-select
 propComponents:
   ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps']
 ouia: true

package/src/components/Sidebar/examples/Sidebar.md

@@ -1,6 +1,6 @@
 ---
 id: Sidebar
-cssPrefix: pf-v5-c-sidebar
+cssPrefix: pf-v6-c-sidebar
 section: components
 propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
 ---
@@ -43,4 +43,4 @@ A `tabIndex` should be added to the `Sidebar` when there is scrollable content i
 
 ### Padding on content
 ```ts file="./SidebarPaddingContent.tsx"
-```
+```

package/src/components/SimpleList/examples/SimpleList.md

@@ -1,7 +1,7 @@
 ---
 id: Simple list
 section: components
-cssPrefix: pf-v5-c-simple-list
+cssPrefix: pf-v6-c-simple-list
 propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ---
 

package/src/components/Skeleton/examples/Skeleton.md

@@ -1,17 +1,17 @@
 ---
 id: Skeleton
 section: components
-cssPrefix: pf-v5-c-skeleton
+cssPrefix: pf-v6-c-skeleton
 propComponents: ['Skeleton']
 ---
 
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 ## Examples
 

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -1,35 +1,35 @@
 import React from 'react';
 import { Skeleton } from '@patternfly/react-core';
 /* eslint-disable camelcase */
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    {global_font_size_4xl.name}
+    {t_global_font_size_4xl.name}
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    {global_font_size_3xl.name}
+    {t_global_font_size_3xl.name}
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    {global_font_size_2xl.name}
+    {t_global_font_size_2xl.name}
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    {global_font_size_xl.name}
+    {t_global_font_size_xl.name}
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    {global_font_size_lg.name}
+    {t_global_font_size_lg.name}
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    {global_font_size_md.name}
+    {t_global_font_size_md.name}
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    {global_font_size_sm.name}
+    {t_global_font_size_sm.name}
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );

package/src/components/SkipToContent/examples/SkipToContent.md

@@ -1,7 +1,7 @@
 ---
 id: Skip to content
 section: components
-cssPrefix: pf-v5-c-skip-to-content
+cssPrefix: pf-v6-c-skip-to-content
 propComponents: ['SkipToContent']
 ---
 

package/src/components/Slider/Slider.tsx

@@ -474,7 +474,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           </div>
         )}
         {hasTooltipOverThumb ? (
-          <Tooltip triggerRef={thumbRef} entryDelay={0} content={findAriaTextValue()}>
+          <Tooltip
+            className={css('pf-v6-m-tabular-nums')}
+            triggerRef={thumbRef}
+            entryDelay={0}
+            content={findAriaTextValue()}
+          >
             {thumbComponent}
           </Tooltip>
         ) : (

package/src/components/Slider/examples/Slider.md

@@ -1,7 +1,7 @@
 ---
 id: Slider
 section: components
-cssPrefix: pf-v5-c-slider
+cssPrefix: pf-v6-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 

package/src/components/Spinner/examples/Spinner.md

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

package/src/components/Switch/examples/Switch.md

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

package/src/components/Tabs/examples/Tabs.md

@@ -1,7 +1,7 @@
 ---
 id: Tabs
 section: components
-cssPrefix: pf-v5-c-tabs
+cssPrefix: pf-v6-c-tabs
 propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
 ouia: true
 ---

package/src/components/TextArea/examples/TextArea.md

@@ -2,7 +2,7 @@
 id: Text area
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextArea']
 ---
 

package/src/components/TextInput/examples/TextInput.md

@@ -2,7 +2,7 @@
 id: Text input
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextInput', 'TextInputExpandedObj']
 ---