@patternfly/react-core 5.0.0-alpha.125 → 5.0.0-alpha.127

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(