@patternfly/react-core 5.0.0-alpha.113 → 5.0.0-alpha.114

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

@@ -81,7 +81,7 @@ exports[`should render accessible tabs 1`] = `
   </nav>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -92,7 +92,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -104,7 +104,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -227,7 +227,7 @@ exports[`should render box tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -238,7 +238,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -250,7 +250,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -262,7 +262,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -355,7 +355,7 @@ exports[`should render box tabs of light variant 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -366,7 +366,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -378,7 +378,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -433,7 +433,7 @@ exports[`should render expandable vertical tabs 1`] = `
             </svg>
           </span>
           <span
-            class="pf-c-tabs__toggle-text"
+            class="pf-v5-c-tabs__toggle-text"
             id="pf-random-id-0-text"
           >
             toggle
@@ -542,7 +542,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -553,7 +553,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -565,7 +565,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -577,7 +577,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -670,7 +670,7 @@ exports[`should render filled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -681,7 +681,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -693,7 +693,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -786,7 +786,7 @@ exports[`should render secondary tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-primarieTabs"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-primarieTabs"
@@ -871,7 +871,7 @@ exports[`should render secondary tabs 1`] = `
     </div>
     <section
       aria-labelledby="pf-tab-10-secondary tab1"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -883,7 +883,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-11-secondary tab2"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -895,7 +895,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-12-secondary tab3"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -908,7 +908,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -920,7 +920,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1043,7 +1043,7 @@ exports[`should render simple tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1054,7 +1054,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1066,7 +1066,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1078,7 +1078,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1171,7 +1171,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-one-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1183,7 +1183,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-two-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1195,7 +1195,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-three-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1288,7 +1288,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1299,7 +1299,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1311,7 +1311,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1405,7 +1405,7 @@ exports[`should render tabs with separate content 1`] = `
   <div>
     <section
       aria-label="Tab item 1"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       id="refTab1Section"
@@ -1416,7 +1416,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 2"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1432,7 +1432,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 3"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1559,7 +1559,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1570,7 +1570,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1582,7 +1582,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1594,7 +1594,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1717,7 +1717,7 @@ exports[`should render vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1728,7 +1728,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1740,7 +1740,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1752,7 +1752,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""

package/src/components/Text/__tests__/TextContent.test.tsx

@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-content', () => {
+test('Renders with class name pf-v5-c-content', () => {
   render(<TextContent>Test</TextContent>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-content', { exact: true });
 });

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

@@ -17,7 +17,7 @@ describe('TextInputGroup', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group', () => {
+  it('renders with class pf-v5-c-text-input-group', () => {
     render(<TextInputGroup>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -20,7 +20,7 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group__main', () => {
+  it('renders with class pf-v5-c-text-input-group__main', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupMain = screen.getByText('Test');
@@ -52,7 +52,7 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupMain).toHaveClass('custom-class');
   });
 
-  it('renders with class pf-c-text-input-group__text on the inputs parent', () => {
+  it('renders with class pf-v5-c-text-input-group__text on the inputs parent', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupText = screen.getByRole('textbox').parentNode;
@@ -60,7 +60,7 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupText).toHaveClass('pf-v5-c-text-input-group__text');
   });
 
-  it('renders the input with class pf-c-text-input-group__text-input', () => {
+  it('renders the input with class pf-v5-c-text-input-group__text-input', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
@@ -180,7 +180,7 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeInTheDocument();
   });
 
-  it('renders the hint input with classes pf-c-text-input-group__text-input and pf-m-hint', () => {
+  it('renders the hint input with classes pf-v5-c-text-input-group__text-input and pf-m-hint', () => {
     // we set the type of the main input to search here so that we can accurately target the hint input
     render(
       <TextInputGroupMain hint="Test" type="search">

package/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx

@@ -18,7 +18,7 @@ describe('TextInputGroupUtilities', () => {
     expect(screen.getByRole('button', { name: 'Test' })).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group__utilities', () => {
+  it('renders with class pf-v5-c-text-input-group__utilities', () => {
     render(<TextInputGroupUtilities>Test</TextInputGroupUtilities>);
 
     const utilities = screen.getByText('Test');

package/src/components/Timestamp/Timestamp.tsx

@@ -135,7 +135,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
       {...(tooltip && { tabIndex: 0 })}
       {...propsWithoutDateTime}
     >
-      <time className="pf-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
+      <time className="pf-v5-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>

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

@@ -141,16 +141,16 @@ test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', (
   expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
 });
 
-test('Renders with pf-c-timestamp by default', () => {
+test('Renders with pf-v5-c-timestamp by default', () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
   expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-v5-c-timestamp');
 });
 
-test('Renders with pf-c-timestamp__text by default', () => {
+test('Renders with pf-v5-c-timestamp__text by default', () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
-  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-c-timestamp__text');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-v5-c-timestamp__text');
 });
 
 test('Renders with custom class names', () => {

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-c-title', () => {
+test('Renders with the pf-v5-c-title', () => {
   render(<Title headingLevel="h1">Test</Title>);
   expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title');
 });
 
-test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => {
+test('Renders with only the class pf-v5-c-title and the heading level modifier class pf-m-2xl by default', () => {
   render(<Title headingLevel="h1">Test</Title>);
   expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title pf-m-2xl', { exact: true });
 });

package/src/components/TreeView/TreeViewList.tsx

@@ -24,7 +24,7 @@ export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({
         <Divider />
       </React.Fragment>
     )}
-    <ul className={css('pf-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
+    <ul className={css('pf-v5-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
       {children}
     </ul>
   </>