@patternfly/react-core 5.0.0-alpha.124 → 5.0.0-alpha.126

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

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

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

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

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

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-c-select
+cssPrefix: pf-v5-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-c-sidebar
+cssPrefix: pf-v5-c-sidebar
 section: components
 propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
 ---

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

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

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

@@ -1,7 +1,7 @@
 ---
 id: Skeleton
 section: components
-cssPrefix: pf-c-skeleton
+cssPrefix: pf-v5-c-skeleton
 propComponents: ['Skeleton']
 ---
 

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

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

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

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

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

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

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

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

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

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

package/src/components/Text/examples/Text.md

@@ -1,7 +1,7 @@
 ---
 id: Text
 section: components
-cssPrefix: pf-c-content
+cssPrefix: pf-v5-c-content
 propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
 ---
 

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

@@ -2,7 +2,7 @@
 id: Text area
 section: components
 subsection: forms
-cssPrefix: pf-c-form-control
+cssPrefix: pf-v5-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-c-form-control
+cssPrefix: pf-v5-c-form-control
 propComponents: ['TextInput']
 ---
 

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Text input group
 section: components
-cssPrefix: pf-c-text-input-group
+cssPrefix: pf-v5-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
 ---
 

package/src/components/Tile/examples/Tile.md

@@ -1,7 +1,7 @@
 ---
 id: Tile
 section: components
-cssPrefix: pf-c-tile
+cssPrefix: pf-v5-c-tile
 propComponents: ['Tile']
 ---
 

package/src/components/TimePicker/examples/TimePicker.md

@@ -2,7 +2,7 @@
 id: Time picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-time-picker
+cssPrefix: pf-v5-c-time-picker
 propComponents: ['TimePicker']
 beta: true
 ---

package/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-timestamp"
+    class="pf-v5-c-timestamp"
   >
     <time
-      class="pf-c-timestamp__text"
+      class="pf-v5-c-timestamp__text"
       datetime="2022-01-01T00:00:00.000Z"
     >
       1/1/2022, 12:00:00 AM

package/src/components/Timestamp/examples/Timestamp.md

@@ -1,7 +1,7 @@
 ---
 id: Timestamp
 section: components
-cssPrefix: pf-c-timestamp
+cssPrefix: pf-v5-c-timestamp
 propComponents: ['Timestamp', 'TimestampTooltip']
 beta: true
 ---

package/src/components/Title/examples/Title.md

@@ -1,7 +1,7 @@
 ---
 id: Title
 section: components
-cssPrefix: pf-c-title
+cssPrefix: pf-v5-c-title
 propComponents: ['Title']
 ---
 

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Toggle group
 section: components
-cssPrefix: pf-c-toggle-group
+cssPrefix: pf-v5-c-toggle-group
 propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';

package/src/components/Toolbar/examples/Toolbar.md

@@ -1,6 +1,6 @@
 ---
 id: Toolbar
-cssPrefix: pf-c-toolbar
+cssPrefix: pf-v5-c-toolbar
 propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'ToolbarToggleGroup', 'ToolbarFilter']
 section: components
 ---

package/src/components/Tooltip/examples/Tooltip.md

@@ -1,7 +1,7 @@
 ---
 id: Tooltip
 section: components
-cssPrefix: pf-c-tooltip
+cssPrefix: pf-v5-c-tooltip
 propComponents: ['Tooltip']
 ---
 

package/src/components/TreeView/examples/TreeView.md

@@ -1,7 +1,7 @@
 ---
 id: Tree view
 section: components
-cssPrefix: pf-c-tree-view
+cssPrefix: pf-v5-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 

package/src/components/Truncate/examples/Truncate.md

@@ -12,7 +12,7 @@ import './TruncateExamples.css';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
   />
@@ -24,7 +24,7 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     trailingNumChars={10}
@@ -37,7 +37,7 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     position={'start'}
@@ -49,7 +49,7 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     tooltipPosition={'bottom'}

package/src/components/Truncate/examples/TruncateExamples.css

@@ -1,4 +1,4 @@
-.pf-c-truncate--example {
+.pf-v5-c-truncate--example {
   width: 320px;
   resize: horizontal;
   overflow: auto;

package/src/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-c-wizard
+cssPrefix: pf-v5-c-wizard
 propComponents:
   [
     'Wizard',

package/src/demos/CardDemos.md

@@ -1571,9 +1571,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1641,9 +1641,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1732,9 +1732,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1802,9 +1802,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1893,9 +1893,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1963,9 +1963,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2094,9 +2094,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2164,9 +2164,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2252,9 +2252,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2322,9 +2322,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2410,9 +2410,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2480,9 +2480,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -119,14 +119,14 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
                 placeholder="Search"
                 onChange={(_event, value) => onSearchInputChange(value)}
                 onKeyPress={onEnterPressed}
-                aria-labelledby="pf-context-selector-search-button-id-1"
+                aria-labelledby="pf-v5-context-selector-search-button-id-1"
               />
             </InputGroupItem>
             <InputGroupItem>
               <Button
                 variant={ButtonVariant.control}
                 aria-label="Search menu items"
-                id="pf-context-selector-search-button-id-1"
+                id="pf-v5-context-selector-search-button-id-1"
                 onClick={onSearchButtonClick}
               >
                 <SearchIcon aria-hidden="true" />

package/src/demos/JumpLinks.md

@@ -43,7 +43,7 @@ ScrollspyH2 = () => {
 
   // Update offset based on the masthead and jump links nav heights.
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-c-masthead')[0];
+    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
     const offsetForPadding = 10;
 
     getResizeObserver(

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -29,7 +29,7 @@ export const JumpLinksWithDrawer = () => {
   const drawerRef = React.useRef();
 
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-c-masthead')[0];
+    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
     const drawerToggleSection = document.getElementById('drawer-toggle');
 
     getResizeObserver(

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md

@@ -2,7 +2,7 @@
 id: Application launcher
 section: components
 subsection: menus
-cssPrefix: pf-c-app-launcher
+cssPrefix: pf-v5-c-app-launcher
 propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationLauncherContent']
 ouia: true
 ---

package/src/deprecated/components/ContextSelector/ContextSelector.tsx

@@ -135,8 +135,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     } = this.props;
 
     const uniqueId = id || getUniqueId();
-    const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
-    const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+    const toggleId = `pf-v5-context-selector-toggle-id-${uniqueId}`;
+    const screenReaderLabelId = `pf-v5-context-selector-label-id-${uniqueId}`;
     const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
 
     const menuContainer = (

package/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -10,9 +10,9 @@ exports[`ContextSelector Renders ContextSelector 1`] = `
   >
     <button
       aria-expanded="false"
-      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
+      aria-labelledby="pf-v5-context-selector-label-id-render pf-v5-context-selector-toggle-id-render"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render"
+      id="pf-v5-context-selector-toggle-id-render"
       type="button"
     >
       <span
@@ -48,9 +48,9 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-render-open pf-context-selector-toggle-id-render-open"
+      aria-labelledby="pf-v5-context-selector-label-id-render-open pf-v5-context-selector-toggle-id-render-open"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render-open"
+      id="pf-v5-context-selector-toggle-id-render-open"
       type="button"
     >
       <span
@@ -219,9 +219,9 @@ exports[`ContextSelector Renders in strict mode 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
+      aria-labelledby="pf-v5-context-selector-label-id-render pf-v5-context-selector-toggle-id-render"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render"
+      id="pf-v5-context-selector-toggle-id-render"
       type="button"
     >
       <span

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

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

package/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md

@@ -2,7 +2,7 @@
 id: Options menu
 section: components
 subsection: menus
-cssPrefix: pf-c-options-menu
+cssPrefix: pf-v5-c-options-menu
 propComponents: ['OptionsMenu', 'OptionsMenuItem', 'OptionsMenuSeparator', 'OptionsMenuToggle', 'OptionsMenuToggleWithText']
 ouia: true
 ---

package/src/deprecated/components/PageHeader/examples/PageHeader.md

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-c-page
+cssPrefix: pf-v5-c-page
 propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
 ---
 

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

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-c-select
+cssPrefix: pf-v5-c-select
 propComponents: ['Select', 'SelectOption', 'SelectGroup', 'SelectOptionObject', 'SelectViewMoreObject']
 ouia: true
 ---

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-c-wizard
+cssPrefix: pf-v5-c-wizard
 propComponents:
   ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
 ouia: true

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -1,6 +1,6 @@
 ---
 id: Bullseye
-cssPrefix: pf-l-bullseye
+cssPrefix: pf-v5-l-bullseye
 section: layouts
 propComponents: ['Bullseye']
 ---

package/src/layouts/Bullseye/examples/bullseye.css

@@ -1,5 +1,5 @@
-.ws-react-l-bullseye .pf-l-bullseye,
-.ws-react-l-bullseye .pf-l-bullseye > div {
+.ws-react-l-bullseye .pf-v5-l-bullseye,
+.ws-react-l-bullseye .pf-v5-l-bullseye > div {
   padding: 1rem;
   border-width: 2px;
   border-style: dashed;

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -134,7 +134,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen.getByTestId('test-id').className.replace('pf-l-flex', '').trim();
+          const className = screen.getByTestId('test-id').className.replace('pf-v5-l-flex', '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })

package/src/layouts/Flex/examples/Flex.md

@@ -1,6 +1,6 @@
 ---
 id: Flex
-cssPrefix: pf-l-flex
+cssPrefix: pf-v5-l-flex
 section: layouts
 propComponents: ['Flex', 'FlexItem']
 ---