@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.91

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

@@ -3,10 +3,10 @@
 exports[`HelperText default helper text variant applies successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text__item"
+    class="pf-v5-c-helper-text__item"
   >
     <span
-      class="pf-c-helper-text__item-text"
+      class="pf-v5-c-helper-text__item-text"
     >
       default help test text
     </span>
@@ -17,18 +17,18 @@ exports[`HelperText default helper text variant applies successfully 1`] = `
 exports[`HelperText dynamic helper text renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text"
+    class="pf-v5-c-helper-text"
   >
     <div
-      class="pf-c-helper-text__item pf-m-dynamic"
+      class="pf-v5-c-helper-text__item pf-m-dynamic"
     >
       <span
         aria-hidden="true"
-        class="pf-c-helper-text__item-icon"
+        class="pf-v5-c-helper-text__item-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 448 512"
@@ -39,11 +39,11 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
         </svg>
       </span>
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text
         <span
-          class="pf-u-screen-reader"
+          class="pf-v5-u-screen-reader"
         >
           : default status;
         </span>
@@ -56,31 +56,31 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
 exports[`HelperText helper text block renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text"
+    class="pf-v5-c-helper-text"
   >
     <div
-      class="pf-c-helper-text__item"
+      class="pf-v5-c-helper-text__item"
     >
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text 1
       </span>
     </div>
     <div
-      class="pf-c-helper-text__item"
+      class="pf-v5-c-helper-text__item"
     >
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text 2
       </span>
     </div>
     <div
-      class="pf-c-helper-text__item"
+      class="pf-v5-c-helper-text__item"
     >
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text 3
       </span>
@@ -92,18 +92,18 @@ exports[`HelperText helper text block renders successfully 1`] = `
 exports[`HelperText icon helper text renders properly 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text"
+    class="pf-v5-c-helper-text"
   >
     <div
-      class="pf-c-helper-text__item"
+      class="pf-v5-c-helper-text__item"
     >
       <span
         aria-hidden="true"
-        class="pf-c-helper-text__item-icon"
+        class="pf-v5-c-helper-text__item-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 512 512"
@@ -114,7 +114,7 @@ exports[`HelperText icon helper text renders properly 1`] = `
         </svg>
       </span>
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text
       </span>
@@ -126,10 +126,10 @@ exports[`HelperText icon helper text renders properly 1`] = `
 exports[`HelperText indeterminate helper text variant applies successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text__item pf-m-indeterminate"
+    class="pf-v5-c-helper-text__item pf-m-indeterminate"
   >
     <span
-      class="pf-c-helper-text__item-text"
+      class="pf-v5-c-helper-text__item-text"
     >
       indeterminate help test text
     </span>
@@ -140,10 +140,10 @@ exports[`HelperText indeterminate helper text variant applies successfully 1`] =
 exports[`HelperText invalid helper text variant applies successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text__item"
+    class="pf-v5-c-helper-text__item"
   >
     <span
-      class="pf-c-helper-text__item-text"
+      class="pf-v5-c-helper-text__item-text"
     >
       invalid help test text
     </span>
@@ -154,13 +154,13 @@ exports[`HelperText invalid helper text variant applies successfully 1`] = `
 exports[`HelperText simple helper text renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text"
+    class="pf-v5-c-helper-text"
   >
     <div
-      class="pf-c-helper-text__item"
+      class="pf-v5-c-helper-text__item"
     >
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text
       </span>
@@ -172,10 +172,10 @@ exports[`HelperText simple helper text renders successfully 1`] = `
 exports[`HelperText success helper text variant applies successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text__item pf-m-success"
+    class="pf-v5-c-helper-text__item pf-m-success"
   >
     <span
-      class="pf-c-helper-text__item-text"
+      class="pf-v5-c-helper-text__item-text"
     >
       success help test text
     </span>
@@ -186,23 +186,23 @@ exports[`HelperText success helper text variant applies successfully 1`] = `
 exports[`HelperText variant comonent helper text renders properly 1`] = `
 <DocumentFragment>
   <ul
-    class="pf-c-helper-text"
+    class="pf-v5-c-helper-text"
     role="list"
   >
     <li
-      class="pf-c-helper-text__item"
+      class="pf-v5-c-helper-text__item"
     >
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text 1
       </span>
     </li>
     <li
-      class="pf-c-helper-text__item"
+      class="pf-v5-c-helper-text__item"
     >
       <span
-        class="pf-c-helper-text__item-text"
+        class="pf-v5-c-helper-text__item-text"
       >
         help test text 2
       </span>
@@ -214,10 +214,10 @@ exports[`HelperText variant comonent helper text renders properly 1`] = `
 exports[`HelperText warning helper text variant applies successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-helper-text__item pf-m-warning"
+    class="pf-v5-c-helper-text__item pf-m-warning"
   >
     <span
-      class="pf-c-helper-text__item-text"
+      class="pf-v5-c-helper-text__item-text"
     >
       warning help test text
     </span>

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

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { Hint } from '../Hint';
 
 test('renders without children', () => {
-  render(<Hint data-testid='Hint' />);
+  render(<Hint data-testid="Hint" />);
 
   expect(screen.getByTestId('Hint')).toBeVisible();
 });
@@ -19,11 +19,11 @@ test('renders with class pf-c-hint', () => {
 
   const hint = screen.getByText('Test');
 
-  expect(hint).toHaveClass('pf-c-hint');
+  expect(hint).toHaveClass('pf-v5-c-hint');
 });
 
 test('renders with custom class names provided via prop', () => {
-  render(<Hint className='custom-classname'>Test</Hint>);
+  render(<Hint className="custom-classname">Test</Hint>);
 
   const hint = screen.getByText('Test');
 
@@ -41,7 +41,7 @@ test('does not render actions options when not passed', () => {
 test('renders actions options', () => {
   render(<Hint actions="actions">Test</Hint>);
 
-  const actions = screen.getByText("actions");
+  const actions = screen.getByText('actions');
 
   expect(actions).toBeVisible();
 });
@@ -51,20 +51,16 @@ test('renders with class pf-c-hint__actions if there is an action prop', () => {
 
   const hint = screen.getByText('actions');
 
-  expect(hint).toHaveClass('pf-c-hint__actions');
+  expect(hint).toHaveClass('pf-v5-c-hint__actions');
 });
 
 test('renders with inherited element props spread to the component', () => {
-  render(
-    <Hint aria-label="labelling-id">Test</Hint>
-  );
+  render(<Hint aria-label="labelling-id">Test</Hint>);
 
   expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
 });
 
 test('matches hint snapshot', () => {
-  const { asFragment } = render(
-    <Hint />
-  );
+  const { asFragment } = render(<Hint />);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Hint/__tests__/HintBody.test.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { HintBody } from "../HintBody";
+import { HintBody } from '../HintBody';
 
 test('renders without children', () => {
   render(<HintBody data-testid="HintBody"></HintBody>);
-  
+
   expect(screen.getByTestId('HintBody')).toBeVisible();
 });
 
@@ -21,7 +21,7 @@ test('renders with class pf-c-hint__body', () => {
 
   const body = screen.getByText('Hint Body Test');
 
-  expect(body).toHaveClass('pf-c-hint__body');
+  expect(body).toHaveClass('pf-v5-c-hint__body');
 });
 
 test('renders with custom class names provided via prop', () => {
@@ -33,9 +33,7 @@ test('renders with custom class names provided via prop', () => {
 });
 
 test('renders with inherited element props spread to the component', () => {
-  render(
-    <HintBody aria-label="labelling-id">Test</HintBody>
-  );
+  render(<HintBody aria-label="labelling-id">Test</HintBody>);
 
   expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
 });

package/src/components/Hint/__tests__/HintFooter.test.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { HintFooter } from "../HintFooter";
+import { HintFooter } from '../HintFooter';
 
 test('renders without children', () => {
   render(<HintFooter data-testid="HintFooter"></HintFooter>);
-  
+
   expect(screen.getByTestId('HintFooter')).toBeVisible();
 });
 
@@ -21,7 +21,7 @@ test('renders with class pf-c-hint__footer', () => {
 
   const body = screen.getByText('Hint Body Test');
 
-  expect(body).toHaveClass('pf-c-hint__footer');
+  expect(body).toHaveClass('pf-v5-c-hint__footer');
 });
 
 test('renders with custom class names provided via prop', () => {
@@ -33,9 +33,7 @@ test('renders with custom class names provided via prop', () => {
 });
 
 test('renders with inherited element props spread to the component', () => {
-  render(
-    <HintFooter aria-label="labelling-id">Test</HintFooter>
-  );
+  render(<HintFooter aria-label="labelling-id">Test</HintFooter>);
 
   expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
 });

package/src/components/Hint/__tests__/HintTitle.test.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { HintTitle } from "../HintTitle";
+import { HintTitle } from '../HintTitle';
 
 test('renders without children', () => {
   render(<HintTitle data-testid="HintTitle"></HintTitle>);
-  
+
   expect(screen.getByTestId('HintTitle')).toBeVisible();
 });
 
@@ -21,7 +21,7 @@ test('renders with class pf-c-hint__title', () => {
 
   const body = screen.getByText('Hint Body Test');
 
-  expect(body).toHaveClass('pf-c-hint__title');
+  expect(body).toHaveClass('pf-v5-c-hint__title');
 });
 
 test('renders with custom class names provided via prop', () => {
@@ -33,9 +33,7 @@ test('renders with custom class names provided via prop', () => {
 });
 
 test('renders with inherited element props spread to the component', () => {
-  render(
-    <HintTitle aria-label="labelling-id">Test</HintTitle>
-  );
+  render(<HintTitle aria-label="labelling-id">Test</HintTitle>);
 
   expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
 });

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

@@ -3,10 +3,10 @@
 exports[`matches hint snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-hint"
+    class="pf-v5-c-hint"
   >
     <div
-      class="pf-c-hint__actions"
+      class="pf-v5-c-hint__actions"
     />
   </div>
 </DocumentFragment>

package/src/components/Hint/__tests__/__snapshots__/HintBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-hint__body"
+    class="pf-v5-c-hint__body"
   >
     <button>
       Test

package/src/components/Hint/__tests__/__snapshots__/HintFooter.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-hint__footer"
+    class="pf-v5-c-hint__footer"
   >
     <button>
       Test

package/src/components/Hint/__tests__/__snapshots__/HintTitle.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-hint__title"
+    class="pf-v5-c-hint__title"
   >
     <button>
       Test

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

@@ -19,9 +19,9 @@ test('checks basic icon structure', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('icon');
-  expect(iconContainer).toHaveClass('pf-c-icon');
-  const iconContent = iconContainer.querySelector('.pf-c-icon__content');
-  expect(iconContent).toHaveClass('pf-c-icon__content');
+  expect(iconContainer).toHaveClass('pf-v5-c-icon');
+  const iconContent = iconContainer.querySelector('.pf-v5-c-icon__content');
+  expect(iconContent).toHaveClass('pf-v5-c-icon__content');
 });
 
 test('renders without children', () => {
@@ -47,7 +47,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
         <CheckIcon />
       </Icon>
     );
-    const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector('.pf-c-icon__content');
+    const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector('.pf-v5-c-icon__content');
 
     expect(iconContainer).toHaveClass(`pf-m-${size}`);
   });
@@ -59,7 +59,7 @@ test('check icon without iconSize', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContainer = screen.getByTitle('no-icon-size').querySelector('.pf-c-icon__content');
+  const iconContainer = screen.getByTitle('no-icon-size').querySelector('.pf-v5-c-icon__content');
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -70,7 +70,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
         <CheckIcon />
       </Icon>
     );
-    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector('.pf-c-icon__progress');
+    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector('.pf-v5-c-icon__progress');
 
     expect(iconContainer).toHaveClass(`pf-m-${size}`);
   });
@@ -82,7 +82,7 @@ test('check icon without progress icon size', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector('.pf-c-icon__progress');
+  const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector('.pf-v5-c-icon__progress');
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -116,7 +116,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu
         <CheckIcon />
       </Icon>
     );
-    const iconContent = screen.getByTitle(`${status}-icon`).querySelector('.pf-c-icon__content');
+    const iconContent = screen.getByTitle(`${status}-icon`).querySelector('.pf-v5-c-icon__content');
 
     expect(iconContent).toHaveClass(`pf-m-${status}`);
   });
@@ -128,7 +128,7 @@ test('check icon without status', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContent = screen.getByTitle('no-status').querySelector('.pf-c-icon__content');
+  const iconContent = screen.getByTitle('no-status').querySelector('.pf-v5-c-icon__content');
   expect(Array.from(iconContent?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -162,8 +162,8 @@ test('sets isInProgress successfully', () => {
   const iconContainer = screen.getByTitle('progress-icon');
   expect(iconContainer).toHaveClass('pf-m-in-progress');
 
-  const iconContent = iconContainer.querySelector('.pf-c-icon__progress');
-  expect(iconContent).toHaveClass('pf-c-icon__progress');
+  const iconContent = iconContainer.querySelector('.pf-v5-c-icon__progress');
+  expect(iconContent).toHaveClass('pf-v5-c-icon__progress');
 });
 
 test('check icon without isInProgress', () => {

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

@@ -3,14 +3,14 @@
 exports[`renders basic icon successfully 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-icon"
+    class="pf-v5-c-icon"
   >
     <span
-      class="pf-c-icon__content"
+      class="pf-v5-c-icon__content"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 512 512"
@@ -27,14 +27,14 @@ exports[`renders basic icon successfully 1`] = `
 exports[`renders progress icon successfully 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-icon pf-m-in-progress"
+    class="pf-v5-c-icon pf-m-in-progress"
   >
     <span
-      class="pf-c-icon__content"
+      class="pf-v5-c-icon__content"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 512 512"
@@ -45,11 +45,11 @@ exports[`renders progress icon successfully 1`] = `
       </svg>
     </span>
     <span
-      class="pf-c-icon__progress"
+      class="pf-v5-c-icon__progress"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 512 512"
@@ -66,10 +66,10 @@ exports[`renders progress icon successfully 1`] = `
 exports[`renders without children 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-icon"
+    class="pf-v5-c-icon"
   >
     <span
-      class="pf-c-icon__content"
+      class="pf-v5-c-icon__content"
     />
   </span>
 </DocumentFragment>