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

package/src/components/Spinner/Spinner.tsx

@@ -42,7 +42,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
     role="progressbar"
     aria-valuetext={ariaValueText}
     viewBox="0 0 100 100"
-    {...(diameter && { style: { ['--pf-c-spinner--diameter']: diameter } as React.CSSProperties })}
+    {...(diameter && { style: { ['--pf-v5-c-spinner--diameter']: diameter } as React.CSSProperties })}
     {...(ariaLabel && { 'aria-label': ariaLabel })}
     {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
     {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}

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

@@ -5,12 +5,12 @@ exports[`extra large spinner 1`] = `
   <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
-    class="pf-c-spinner pf-m-xl"
+    class="pf-v5-c-spinner pf-m-xl"
     role="progressbar"
     viewBox="0 0 100 100"
   >
     <circle
-      class="pf-c-spinner__path"
+      class="pf-v5-c-spinner__path"
       cx="50"
       cy="50"
       fill="none"
@@ -25,12 +25,12 @@ exports[`large spinner 1`] = `
   <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
-    class="pf-c-spinner pf-m-lg"
+    class="pf-v5-c-spinner pf-m-lg"
     role="progressbar"
     viewBox="0 0 100 100"
   >
     <circle
-      class="pf-c-spinner__path"
+      class="pf-v5-c-spinner__path"
       cx="50"
       cy="50"
       fill="none"
@@ -45,12 +45,12 @@ exports[`medium spinner 1`] = `
   <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
-    class="pf-c-spinner pf-m-md"
+    class="pf-v5-c-spinner pf-m-md"
     role="progressbar"
     viewBox="0 0 100 100"
   >
     <circle
-      class="pf-c-spinner__path"
+      class="pf-v5-c-spinner__path"
       cx="50"
       cy="50"
       fill="none"
@@ -65,12 +65,12 @@ exports[`simple spinner 1`] = `
   <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
-    class="pf-c-spinner pf-m-xl"
+    class="pf-v5-c-spinner pf-m-xl"
     role="progressbar"
     viewBox="0 0 100 100"
   >
     <circle
-      class="pf-c-spinner__path"
+      class="pf-v5-c-spinner__path"
       cx="50"
       cy="50"
       fill="none"
@@ -85,12 +85,12 @@ exports[`small spinner 1`] = `
   <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
-    class="pf-c-spinner pf-m-sm"
+    class="pf-v5-c-spinner pf-m-sm"
     role="progressbar"
     viewBox="0 0 100 100"
   >
     <circle
-      class="pf-c-spinner__path"
+      class="pf-v5-c-spinner__path"
       cx="50"
       cy="50"
       fill="none"

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

@@ -3,7 +3,7 @@
 exports[`Switch no label switch is checked 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-7"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -12,20 +12,20 @@ exports[`Switch no label switch is checked 1`] = `
     <input
       aria-label="Switch label"
       checked=""
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       id="no-label-switch-is-checked"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     >
       <div
         aria-hidden="true"
-        class="pf-c-switch__toggle-icon"
+        class="pf-v5-c-switch__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 512 512"
@@ -43,7 +43,7 @@ exports[`Switch no label switch is checked 1`] = `
 exports[`Switch no label switch is not checked 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-8"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -51,20 +51,20 @@ exports[`Switch no label switch is not checked 1`] = `
   >
     <input
       aria-label="Switch label"
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       id="no-label-switch-is-not-checked"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     >
       <div
         aria-hidden="true"
-        class="pf-c-switch__toggle-icon"
+        class="pf-v5-c-switch__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 512 512"
@@ -82,7 +82,7 @@ exports[`Switch no label switch is not checked 1`] = `
 exports[`Switch switch is checked 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-3"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -91,22 +91,22 @@ exports[`Switch switch is checked 1`] = `
     <input
       aria-label="Switch label"
       checked=""
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       id="switch-is-checked"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     />
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-on"
+      class="pf-v5-c-switch__label pf-m-on"
     >
       On
     </span>
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-off"
+      class="pf-v5-c-switch__label pf-m-off"
     >
       Off
     </span>
@@ -117,7 +117,7 @@ exports[`Switch switch is checked 1`] = `
 exports[`Switch switch is checked and disabled 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-9"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -126,21 +126,21 @@ exports[`Switch switch is checked and disabled 1`] = `
     <input
       aria-label="Switch label"
       checked=""
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       disabled=""
       id="switch-is-checked-and-disabled"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     >
       <div
         aria-hidden="true"
-        class="pf-c-switch__toggle-icon"
+        class="pf-v5-c-switch__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 512 512"
@@ -158,7 +158,7 @@ exports[`Switch switch is checked and disabled 1`] = `
 exports[`Switch switch is not checked 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-4"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -166,22 +166,22 @@ exports[`Switch switch is not checked 1`] = `
   >
     <input
       aria-label="Switch label"
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       id="switch-is-not-checked"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     />
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-on"
+      class="pf-v5-c-switch__label pf-m-on"
     >
       On
     </span>
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-off"
+      class="pf-v5-c-switch__label pf-m-off"
     >
       Off
     </span>
@@ -192,7 +192,7 @@ exports[`Switch switch is not checked 1`] = `
 exports[`Switch switch is not checked and disabled 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-10"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -200,21 +200,21 @@ exports[`Switch switch is not checked and disabled 1`] = `
   >
     <input
       aria-label="Switch label"
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       disabled=""
       id="switch-is-not-checked-and-disabled"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     >
       <div
         aria-hidden="true"
-        class="pf-c-switch__toggle-icon"
+        class="pf-v5-c-switch__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 512 512"
@@ -232,7 +232,7 @@ exports[`Switch switch is not checked and disabled 1`] = `
 exports[`Switch switch with only label is checked 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-5"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -242,23 +242,23 @@ exports[`Switch switch with only label is checked 1`] = `
       aria-label=""
       aria-labelledby="switch-is-checked-on"
       checked=""
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       id="switch-is-checked"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     />
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-on"
+      class="pf-v5-c-switch__label pf-m-on"
       id="switch-is-checked-on"
     >
       On
     </span>
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-off"
+      class="pf-v5-c-switch__label pf-m-off"
       id="switch-is-checked-off"
     >
       On
@@ -270,7 +270,7 @@ exports[`Switch switch with only label is checked 1`] = `
 exports[`Switch switch with only label is not checked 1`] = `
 <DocumentFragment>
   <label
-    class="pf-c-switch"
+    class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-6"
     data-ouia-component-type="PF4/Switch"
     data-ouia-safe="true"
@@ -279,23 +279,23 @@ exports[`Switch switch with only label is not checked 1`] = `
     <input
       aria-label=""
       aria-labelledby="switch-is-not-checked-off"
-      class="pf-c-switch__input"
+      class="pf-v5-c-switch__input"
       id="switch-is-not-checked"
       type="checkbox"
     />
     <span
-      class="pf-c-switch__toggle"
+      class="pf-v5-c-switch__toggle"
     />
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-on"
+      class="pf-v5-c-switch__label pf-m-on"
       id="switch-is-not-checked-on"
     >
       Off
     </span>
     <span
       aria-hidden="true"
-      class="pf-c-switch__label pf-m-off"
+      class="pf-v5-c-switch__label pf-m-off"
       id="switch-is-not-checked-off"
     >
       Off

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -78,19 +78,19 @@ test('Renders with class names pf-m-overflow and pf-c-tabs__item on the presenta
   render(<OverflowTab />);
 
   expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
-  expect(screen.getByRole('presentation')).toHaveClass('pf-c-tabs__item');
+  expect(screen.getByRole('presentation')).toHaveClass('pf-v5-c-tabs__item');
 });
 
 test('Renders with class pf-c-tabs__link on the tab element', () => {
   render(<OverflowTab />);
 
-  expect(screen.getByRole('tab')).toHaveClass('pf-c-tabs__link');
+  expect(screen.getByRole('tab')).toHaveClass('pf-v5-c-tabs__link');
 });
 
 test("Renders with class pf-c-tabs__link-toggle-icon on the img element's container", () => {
   render(<OverflowTab />);
 
-  expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-c-tabs__link-toggle-icon');
+  expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-v5-c-tabs__link-toggle-icon');
 });
 
 test('Renders with custom class names provided via prop', () => {
@@ -376,7 +376,7 @@ test('Passes Popper an appendTo value of the presentation element', async () =>
   await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
-  expect(screen.getByText('Append to class name: pf-c-tabs__item pf-m-overflow')).toBeVisible();
+  expect(screen.getByText('Append to class name: pf-v5-c-tabs__item pf-m-overflow')).toBeVisible();
 });
 
 test('Does not render an overflowing tab as a selected menu item by default', async () => {

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

@@ -3,27 +3,27 @@
 exports[`Matches snapshot when expanded 1`] = `
 <DocumentFragment>
   <li
-    class="pf-c-tabs__item pf-m-overflow pf-m-current"
+    class="pf-v5-c-tabs__item pf-m-overflow pf-m-current"
     role="presentation"
   >
     <button
       aria-expanded="true"
       aria-haspopup="menu"
-      class="pf-c-tabs__link pf-m-expanded"
+      class="pf-v5-c-tabs__link pf-m-expanded"
       role="tab"
       type="button"
     >
       <span
-        class="pf-c-tabs__item-text"
+        class="pf-v5-c-tabs__item-text"
       >
         Tab one
       </span>
       <span
-        class="pf-c-tabs__link-toggle-icon"
+        class="pf-v5-c-tabs__link-toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 256 512"
@@ -77,7 +77,7 @@ exports[`Matches snapshot when expanded 1`] = `
       </div>
     </div>
     <p>
-      Append to class name: pf-c-tabs__item pf-m-overflow pf-m-current
+      Append to class name: pf-v5-c-tabs__item pf-m-overflow pf-m-current
     </p>
   </div>
 </DocumentFragment>
@@ -86,27 +86,27 @@ exports[`Matches snapshot when expanded 1`] = `
 exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1`] = `
 <DocumentFragment>
   <li
-    class="pf-c-tabs__item pf-m-overflow"
+    class="pf-v5-c-tabs__item pf-m-overflow"
     role="presentation"
   >
     <button
       aria-expanded="true"
       aria-haspopup="menu"
-      class="pf-c-tabs__link pf-m-expanded"
+      class="pf-v5-c-tabs__link pf-m-expanded"
       role="tab"
       type="button"
     >
       <span
-        class="pf-c-tabs__item-text"
+        class="pf-v5-c-tabs__item-text"
       >
         More
       </span>
       <span
-        class="pf-c-tabs__link-toggle-icon"
+        class="pf-v5-c-tabs__link-toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 256 512"
@@ -160,7 +160,7 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1`
       </div>
     </div>
     <p>
-      Append to class name: pf-c-tabs__item pf-m-overflow
+      Append to class name: pf-v5-c-tabs__item pf-m-overflow
     </p>
   </div>
 </DocumentFragment>

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

@@ -3,13 +3,13 @@
 exports[`renders tab action 1`] = `
 <DocumentFragment>
   <li
-    class="pf-c-tabs__item pf-m-action"
+    class="pf-v5-c-tabs__item pf-m-action"
     role="presentation"
   >
     <button
       aria-controls="pf-tab-section-1-"
       aria-selected="false"
-      class="pf-c-tabs__link"
+      class="pf-v5-c-tabs__link"
       data-ouia-component-type="PF4/TabButton"
       data-ouia-safe="true"
       id="pf-tab-1-"
@@ -17,25 +17,25 @@ exports[`renders tab action 1`] = `
       type="button"
     >
       <span
-        class="pf-c-tabs__item-text"
+        class="pf-v5-c-tabs__item-text"
       >
         "Tab item 2"
       </span>
     </button>
     <span
-      class="pf-c-tabs__item-action"
+      class="pf-v5-c-tabs__item-action"
     >
       <button
         aria-disabled="false"
         aria-label="Tab action"
-        class="pf-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
         type="button"
       >
         <span
-          class="pf-c-tabs__item-action-icon"
+          class="pf-v5-c-tabs__item-action-icon"
         >
           test
         </span>
@@ -48,13 +48,13 @@ exports[`renders tab action 1`] = `
 exports[`should not render anything 1`] = `
 <DocumentFragment>
   <li
-    class="pf-c-tabs__item"
+    class="pf-v5-c-tabs__item"
     role="presentation"
   >
     <button
       aria-controls="pf-tab-section-0-"
       aria-selected="false"
-      class="pf-c-tabs__link"
+      class="pf-v5-c-tabs__link"
       data-ouia-component-type="PF4/TabButton"
       data-ouia-safe="true"
       id="pf-tab-0-"
@@ -62,7 +62,7 @@ exports[`should not render anything 1`] = `
       type="button"
     >
       <span
-        class="pf-c-tabs__item-text"
+        class="pf-v5-c-tabs__item-text"
       >
         "Tab item 1"
       </span>