@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -56,16 +56,19 @@ exports[`slider renders continuous slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -247,16 +250,19 @@ exports[`slider renders discrete slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -413,21 +419,32 @@ exports[`slider renders slider with input 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Slider value input"
-          class="pf-v5-c-form-control pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          type="number"
-          value="50"
-        />
-        <span
-          class="pf-v5-c-input-group__text"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-           %
-        </span>
+          <div
+            class="pf-v5-c-form-control"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Slider value input"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+              data-ouia-component-type="PF5/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="50"
+            />
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item pf-m-box"
+        >
+          <span
+            class="pf-v5-c-input-group__text"
+          >
+            %
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -481,21 +498,32 @@ exports[`slider renders slider with input above thumb 1`] = `
         <div
           class="pf-v5-c-input-group"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Slider value input"
-            class="pf-v5-c-form-control pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            type="number"
-            value="50"
-          />
-          <span
-            class="pf-v5-c-input-group__text"
+          <div
+            class="pf-v5-c-input-group__item pf-m-fill"
           >
-             %
-          </span>
+            <div
+              class="pf-v5-c-form-control"
+            >
+              <input
+                aria-invalid="false"
+                aria-label="Slider value input"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                data-ouia-component-type="PF5/TextInput"
+                data-ouia-safe="true"
+                type="number"
+                value="50"
+              />
+            </div>
+          </div>
+          <div
+            class="pf-v5-c-input-group__item pf-m-box"
+          >
+            <span
+              class="pf-v5-c-input-group__text"
+            >
+              %
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -528,7 +556,7 @@ exports[`slider renders slider with input actions 1`] = `
         aria-label="Minus"
         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-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       />
@@ -588,7 +616,7 @@ exports[`slider renders slider with input actions 1`] = `
         aria-label="Plus"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       />

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/__tests__/__snapshots__/Switch.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Switch no label switch is checked 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-7"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-checked"
   >
@@ -27,8 +27,10 @@ exports[`Switch no label switch is checked 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
@@ -45,7 +47,7 @@ exports[`Switch no label switch is not checked 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-8"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-not-checked"
   >
@@ -66,8 +68,10 @@ exports[`Switch no label switch is not checked 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
@@ -84,7 +88,7 @@ exports[`Switch switch is checked 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-3"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
   >
@@ -119,7 +123,7 @@ exports[`Switch switch is checked and disabled 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-9"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="switch-is-checked-and-disabled"
   >
@@ -142,8 +146,10 @@ exports[`Switch switch is checked and disabled 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
@@ -160,7 +166,7 @@ exports[`Switch switch is not checked 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-4"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"
   >
@@ -194,7 +200,7 @@ exports[`Switch switch is not checked and disabled 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-10"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked-and-disabled"
   >
@@ -216,8 +222,10 @@ exports[`Switch switch is not checked and disabled 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
@@ -234,7 +242,7 @@ exports[`Switch switch with only label is checked 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-5"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
   >
@@ -272,7 +280,7 @@ exports[`Switch switch with only label is not checked 1`] = `
   <label
     class="pf-v5-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-6"
-    data-ouia-component-type="PF4/Switch"
+    data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"
   >

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/Tab.tsx

@@ -37,11 +37,11 @@ export interface TabProps
   innerRef?: React.Ref<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;
-  /** @beta Aria-label for the close button added by passing the onClose property to Tabs. */
+  /** Aria-label for the close button added by passing the onClose property to Tabs. */
   closeButtonAriaLabel?: string;
-  /** @beta Flag indicating the close button should be disabled */
+  /** Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
-  /** @beta Actions rendered beside the tab content */
+  /** Actions rendered beside the tab content */
   actions?: React.ReactNode;
   /** Value to set the data-ouia-component-id for the tab button.*/
   ouiaId?: number | string;

package/src/components/Tabs/TabContent.tsx

@@ -62,8 +62,8 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
             hidden={children ? null : child.props.eventKey !== activeKey}
             className={
               children
-                ? css('pf-c-tab-content', className, variantStyle[variant])
-                : css('pf-c-tab-content', child.props.className, variantStyle[variant])
+                ? css(styles.tabContent, className, variantStyle[variant])
+                : css(styles.tabContent, child.props.className, variantStyle[variant])
             }
             id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
             aria-label={ariaLabel}

package/src/components/Tabs/Tabs.tsx

@@ -105,7 +105,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
+  /** Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -483,7 +483,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
                         <AngleRightIcon arian-hidden="true" />
                       </span>
                       {toggleText && (
-                        <span className={css('pf-c-tabs__toggle-text')} id={`${randomId}-text`}>
+                        <span className={css(styles.tabsToggleText)} id={`${randomId}-text`}>
                           {toggleText}
                         </span>
                       )}

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

@@ -4,8 +4,8 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-c-tab-content string"
-    data-ouia-component-type="PF4/TabContent"
+    class="pf-v5-c-tab-content string"
+    data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="string"
     role="tabpanel"

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

@@ -74,20 +74,20 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('presentation')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class names pf-m-overflow and pf-c-tabs__item on the presentation element', () => {
+test('Renders with class names pf-m-overflow and pf-v5-c-tabs__item on the presentation element', () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
   expect(screen.getByRole('presentation')).toHaveClass('pf-v5-c-tabs__item');
 });
 
-test('Renders with class pf-c-tabs__link on the tab element', () => {
+test('Renders with class pf-v5-c-tabs__link on the tab element', () => {
   render(<OverflowTab />);
 
   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", () => {
+test("Renders with class pf-v5-c-tabs__link-toggle-icon on the img element's container", () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-v5-c-tabs__link-toggle-icon');

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

@@ -25,8 +25,10 @@ exports[`Matches snapshot when expanded 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 256 512"
+          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -108,8 +110,10 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1`
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 256 512"
+          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"

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

@@ -10,7 +10,7 @@ exports[`renders tab action 1`] = `
       aria-controls="pf-tab-section-1-"
       aria-selected="false"
       class="pf-v5-c-tabs__link"
-      data-ouia-component-type="PF4/TabButton"
+      data-ouia-component-type="PF5/TabButton"
       data-ouia-safe="true"
       id="pf-tab-1-"
       role="tab"
@@ -30,7 +30,7 @@ exports[`renders tab action 1`] = `
         aria-label="Tab action"
         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-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -55,7 +55,7 @@ exports[`should not render anything 1`] = `
       aria-controls="pf-tab-section-0-"
       aria-selected="false"
       class="pf-v5-c-tabs__link"
-      data-ouia-component-type="PF4/TabButton"
+      data-ouia-component-type="PF5/TabButton"
       data-ouia-safe="true"
       id="pf-tab-0-"
       role="tab"

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

@@ -3,7 +3,7 @@
 exports[`should render tab button 1`] = `
 <DocumentFragment>
   <button
-    data-ouia-component-type="PF4/TabButton"
+    data-ouia-component-type="PF5/TabButton"
     data-ouia-safe="true"
     type="button"
   >