patternfly · tlabaj · May 31, 2023 · May 23, 2023 · May 23, 2023 · May 31, 2023
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModal.md b/packages/react-core/src/components/AboutModal/examples/AboutModal.md
@@ -1,7 +1,7 @@
 ---
 id: About modal
 section: components
-cssPrefix: pf-c-about-modal-box
+cssPrefix: pf-v5-c-about-modal-box
 propComponents: ['AboutModal']
 ---
 import brandImg from './brandImg.svg';

diff --git a/packages/react-core/src/components/Accordion/examples/Accordion.md b/packages/react-core/src/components/Accordion/examples/Accordion.md
@@ -1,7 +1,7 @@
 ---
 id: Accordion
 section: components
-cssPrefix: pf-c-accordion
+cssPrefix: pf-v5-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 

diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md
@@ -1,7 +1,7 @@
 ---
 id: Action list
 section: components
-cssPrefix: pf-c-action-list
+cssPrefix: pf-v5-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 

diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: pf-c-alert
+cssPrefix: pf-v5-c-alert
 propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink']
 ouia: true
 ---

diff --git a/packages/react-core/src/components/Alert/examples/alert.css b/packages/react-core/src/components/Alert/examples/alert.css
@@ -1,3 +1,3 @@
-.ws-react-c-alert .pf-c-alert {
+.ws-react-c-alert .pf-v5-c-alert {
   margin-bottom: 21px;
 }
diff --git a/packages/react-core/src/components/Avatar/examples/Avatar.md b/packages/react-core/src/components/Avatar/examples/Avatar.md
@@ -1,7 +1,7 @@
 ---
 id: Avatar
 section: components
-cssPrefix: pf-c-avatar
+cssPrefix: pf-v5-c-avatar
 propComponents: ['Avatar']
 ---
 

diff --git a/packages/react-core/src/components/BackToTop/examples/BackToTop.md b/packages/react-core/src/components/BackToTop/examples/BackToTop.md
@@ -1,7 +1,7 @@
 ---
 id: Back to top
 section: components
-cssPrefix: pf-c-back-to-top
+cssPrefix: pf-v5-c-back-to-top
 propComponents: ['BackToTop']
 ---
 

diff --git a/packages/react-core/src/components/Backdrop/examples/Backdrop.md b/packages/react-core/src/components/Backdrop/examples/Backdrop.md
@@ -1,7 +1,7 @@
 ---
 id: Backdrop
 section: components
-cssPrefix: pf-c-backdrop
+cssPrefix: pf-v5-c-backdrop
 propComponents: ['Backdrop']
 ---
 

diff --git a/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md b/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md
@@ -1,7 +1,7 @@
 ---
 id: Background image
 section: components
-cssPrefix: pf-c-background-image
+cssPrefix: pf-v5-c-background-image
 propComponents: ['BackgroundImage']
 ---
 

diff --git a/packages/react-core/src/components/Badge/examples/Badge.md b/packages/react-core/src/components/Badge/examples/Badge.md
@@ -1,7 +1,7 @@
 ---
 id: Badge
 section: components
-cssPrefix: pf-c-badge
+cssPrefix: pf-v5-c-badge
 propComponents: ['Badge']
 ---
 

diff --git a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
@@ -51,9 +51,9 @@ test('Renders with class name pf-m-blue when "blue" is passed to variant prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
-test('Does not render pf-u-screen-reader class by default', () => {
+test('Does not render pf-v5-u-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-u-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-u-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

diff --git a/packages/react-core/src/components/Banner/examples/Banner.md b/packages/react-core/src/components/Banner/examples/Banner.md
@@ -1,7 +1,7 @@
 ---
 id: Banner
 section: components
-cssPrefix: pf-c-banner
+cssPrefix: pf-v5-c-banner
 propComponents: ['Banner']
 ---
 

diff --git a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
@@ -1,7 +1,7 @@
 ---
 id: Breadcrumb
 section: components
-cssPrefix: pf-c-breadcrumb
+cssPrefix: pf-v5-c-breadcrumb
 propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---

diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
@@ -1,7 +1,7 @@
 ---
 id: Button
 section: components
-cssPrefix: pf-c-button
+cssPrefix: pf-v5-c-button
 propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---

diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-calendar-month
+cssPrefix: pf-v5-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 

diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
@@ -1,7 +1,7 @@
 ---
 id: Card
 section: components
-cssPrefix: pf-c-card
+cssPrefix: pf-v5-c-card
 propComponents:
   [
     'Card',

diff --git a/packages/react-core/src/components/Checkbox/examples/Checkbox.md b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
@@ -2,7 +2,7 @@
 id: Checkbox
 section: components
 subsection: forms
-cssPrefix: pf-c-check
+cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 

diff --git a/packages/react-core/src/components/Checkbox/examples/checkbox.css b/packages/react-core/src/components/Checkbox/examples/checkbox.css
@@ -1,3 +1,3 @@
-.ws-react-c-checkbox .pf-c-check.nested {
+.ws-react-c-checkbox .pf-v5-c-check.nested {
   padding-left: var(--pf-v5-global--spacer--md);
 }
diff --git a/packages/react-core/src/components/Chip/examples/Chip.md b/packages/react-core/src/components/Chip/examples/Chip.md
@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: pf-c-chip
+cssPrefix: pf-v5-c-chip
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
 ---

diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md
@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-c-copyclipboard
+cssPrefix: pf-v5-c-copyclipboard
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
 ouia: true
 ---

diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md
@@ -1,7 +1,7 @@
 ---
 id: Code block
 section: components
-cssPrefix: pf-c-code-block
+cssPrefix: pf-v5-c-code-block
 propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 

diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md
@@ -1,7 +1,7 @@
 ---
 id: Data list
 section: components
-cssPrefix: pf-c-data-list
+cssPrefix: pf-v5-c-data-list
 propComponents:
   [
     'DataList',

diff --git a/packages/react-core/src/components/DatePicker/examples/DatePicker.md b/packages/react-core/src/components/DatePicker/examples/DatePicker.md
@@ -2,7 +2,7 @@
 id: Date picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-date-picker
+cssPrefix: pf-v5-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
 ---
 

diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
@@ -1,7 +1,7 @@
 ---
 id: 'Description list'
 section: components
-cssPrefix: 'pf-c-description-list'
+cssPrefix: 'pf-v5-c-description-list'
 propComponents:
   [
     'DescriptionList',

diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md
@@ -1,7 +1,7 @@
 ---
 id: Divider
 section: components
-cssPrefix: pf-c-divider
+cssPrefix: pf-v5-c-divider
 propComponents: ['Divider']
 ---
 

diff --git a/packages/react-core/src/components/Drawer/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md
@@ -1,6 +1,6 @@
 ---
 id: Drawer
-cssPrefix: pf-c-drawer
+cssPrefix: pf-v5-c-drawer
 propComponents:
   [
     Drawer,

diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
@@ -2,7 +2,7 @@
 id: Dropdown
 section: components
 subsection: menus
-cssPrefix: pf-c-menu
+cssPrefix: pf-v5-c-menu
 propComponents:
   [
     'Dropdown',

diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
@@ -1,7 +1,7 @@
 ---
 id: Dual list selector
 section: components
-cssPrefix: 'pf-c-dual-list-selector'
+cssPrefix: 'pf-v5-c-dual-list-selector'
 propComponents:
   [
     'DualListSelector',

diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md
@@ -1,7 +1,7 @@
 ---
 id: Empty state
 section: components
-cssPrefix: pf-c-empty-state
+cssPrefix: pf-v5-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';

diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
@@ -1,7 +1,7 @@
 ---
 id: Expandable section
 section: components
-cssPrefix: pf-c-expandable-section
+cssPrefix: pf-v5-c-expandable-section
 propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 

diff --git a/packages/react-core/src/components/FileUpload/examples/FileUpload.md b/packages/react-core/src/components/FileUpload/examples/FileUpload.md
@@ -1,6 +1,6 @@
 ---
 id: Simple file upload
-cssPrefix: pf-c-file-upload
+cssPrefix: pf-v5-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
 subsection: file-upload

diff --git a/packages/react-core/src/components/Form/examples/Form.md b/packages/react-core/src/components/Form/examples/Form.md
@@ -2,7 +2,7 @@
 id: Form
 section: components
 subsection: forms
-cssPrefix: pf-c-form
+cssPrefix: pf-v5-c-form
 propComponents:
   [
     'ActionGroup',

diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelect.md b/packages/react-core/src/components/FormSelect/examples/FormSelect.md
@@ -2,7 +2,7 @@
 id: Form select
 section: components
 subsection: forms
-cssPrefix: pf-c-form-control
+cssPrefix: pf-v5-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true
 ---

diff --git a/packages/react-core/src/components/HelperText/examples/HelperText.md b/packages/react-core/src/components/HelperText/examples/HelperText.md
@@ -1,7 +1,7 @@
 ---
 id: Helper text
 section: components
-cssPrefix: pf-c-helper-text
+cssPrefix: pf-v5-c-helper-text
 propComponents: ['HelperText', 'HelperTextItem']
 ---
 

diff --git a/packages/react-core/src/components/Icon/examples/Icon.md b/packages/react-core/src/components/Icon/examples/Icon.md
@@ -1,7 +1,7 @@
 ---
 id: Icon
 section: components
-cssPrefix: pf-c-icon
+cssPrefix: pf-v5-c-icon
 propComponents: ['Icon']
 ---
 

diff --git a/packages/react-core/src/components/Label/examples/Label.md b/packages/react-core/src/components/Label/examples/Label.md
@@ -1,7 +1,7 @@
 ---
 id: Label
 section: components
-cssPrefix: pf-c-label
+cssPrefix: pf-v5-c-label
 propComponents: ['Label', 'LabelGroup']
 ---
 

diff --git a/packages/react-core/src/components/List/examples/List.md b/packages/react-core/src/components/List/examples/List.md
@@ -1,7 +1,7 @@
 ---
 id: List
 section: components
-cssPrefix: pf-c-list
+cssPrefix: pf-v5-c-list
 propComponents: ['List', 'ListItem']
 ---
 

diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPage.md b/packages/react-core/src/components/LoginPage/examples/LoginPage.md
@@ -1,7 +1,7 @@
 ---
 id: Login page
 section: components
-cssPrefix: pf-c-login
+cssPrefix: pf-v5-c-login
 propComponents:
   [
     'LoginPage',

diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md
@@ -1,7 +1,7 @@
 ---
 id: Masthead
 section: components
-cssPrefix: pf-c-masthead
+cssPrefix: pf-v5-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
 ---
 

diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md
@@ -2,7 +2,7 @@
 id: Menu
 section: components
 subsection: menus
-cssPrefix: pf-c-menu
+cssPrefix: pf-v5-c-menu
 propComponents:
   [
     'Menu',

diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.css b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.css
@@ -1,3 +1,3 @@
-#ws-react-c-menu-toggle-primary .pf-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-c-menu-toggle {
+#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
     vertical-align: bottom;
 }
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -2,7 +2,7 @@
 id: Menu toggle
 section: components
 subsection: menus
-cssPrefix: pf-c-menu-toggle
+cssPrefix: pf-v5-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 ---
 

diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-c-modal-box
+cssPrefix: pf-v5-c-modal-box
 propComponents: ['Modal']
 ouia: true
 ---

diff --git a/...ges/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md b/...ges/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
@@ -2,7 +2,7 @@
 id: Multiple file upload
 section: components
 subsection: file-upload
-cssPrefix: pf-c-multiple-file-upload
+cssPrefix: pf-v5-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 ---

diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md
@@ -1,7 +1,7 @@
 ---
 id: Navigation
 section: components
-cssPrefix: pf-c-nav
+cssPrefix: pf-v5-c-nav
 propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'NavExpandable']
 ouia: true
 ---