@patternfly/react-core 6.0.0-alpha.98 → 6.0.0-prerelease.1

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

@@ -17,36 +17,48 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
   <div
     class="pf-v6-c-expandable-section pf-m-expanded"
   >
-    <button
-      aria-controls="content-id"
-      aria-expanded="true"
+    <div
       class="pf-v6-c-expandable-section__toggle"
-      id="toggle-id"
-      type="button"
     >
-      <span
-        class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
+      <button
+        aria-controls="content-id"
+        aria-disabled="false"
+        aria-expanded="true"
+        class="pf-v6-c-button pf-m-link"
+        data-ouia-component-id="OUIA-Generated-Button-link-5"
+        data-ouia-component-type="PF6/Button"
+        data-ouia-safe="true"
+        id="toggle-id"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-expandable-section__toggle-text"
-      >
-        Toggle text
-      </span>
-    </button>
+          <span
+            class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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"
+              />
+            </svg>
+          </span>
+        </span>
+        <span
+          class="pf-v6-c-button__text"
+        >
+          Toggle text
+        </span>
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -56,33 +68,42 @@ exports[`Disclosure ExpandableSection 1`] = `
   <div
     class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width"
   >
-    <button
-      aria-controls="content-id"
+    <div
       class="pf-v6-c-expandable-section__toggle"
-      id="toggle-id"
-      type="button"
     >
-      <span
-        class="pf-v6-c-expandable-section__toggle-icon"
+      <button
+        aria-controls="content-id"
+        aria-disabled="false"
+        class="pf-v6-c-button pf-m-link"
+        data-ouia-component-id="OUIA-Generated-Button-link-6"
+        data-ouia-component-type="PF6/Button"
+        data-ouia-safe="true"
+        id="toggle-id"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon"
         >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-expandable-section__toggle-text"
-      />
-    </button>
+          <span
+            class="pf-v6-c-expandable-section__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
     <div
       aria-labelledby="toggle-id"
       class="pf-v6-c-expandable-section__content"
@@ -101,33 +122,42 @@ exports[`ExpandableSection 1`] = `
   <div
     class="pf-v6-c-expandable-section"
   >
-    <button
-      aria-controls="content-id"
+    <div
       class="pf-v6-c-expandable-section__toggle"
-      id="toggle-id"
-      type="button"
     >
-      <span
-        class="pf-v6-c-expandable-section__toggle-icon"
+      <button
+        aria-controls="content-id"
+        aria-disabled="false"
+        class="pf-v6-c-button pf-m-link"
+        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-type="PF6/Button"
+        data-ouia-safe="true"
+        id="toggle-id"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon"
         >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-expandable-section__toggle-text"
-      />
-    </button>
+          <span
+            class="pf-v6-c-expandable-section__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
     <div
       aria-labelledby="toggle-id"
       class="pf-v6-c-expandable-section__content"
@@ -146,34 +176,43 @@ exports[`Renders ExpandableSection expanded 1`] = `
   <div
     class="pf-v6-c-expandable-section pf-m-expanded"
   >
-    <button
-      aria-controls="content-id"
-      aria-expanded="true"
+    <div
       class="pf-v6-c-expandable-section__toggle"
-      id="toggle-id"
-      type="button"
     >
-      <span
-        class="pf-v6-c-expandable-section__toggle-icon"
+      <button
+        aria-controls="content-id"
+        aria-disabled="false"
+        aria-expanded="true"
+        class="pf-v6-c-button pf-m-link"
+        data-ouia-component-id="OUIA-Generated-Button-link-2"
+        data-ouia-component-type="PF6/Button"
+        data-ouia-safe="true"
+        id="toggle-id"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon"
         >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-expandable-section__toggle-text"
-      />
-    </button>
+          <span
+            class="pf-v6-c-expandable-section__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
     <div
       aria-labelledby="toggle-id"
       class="pf-v6-c-expandable-section__content"
@@ -191,34 +230,43 @@ exports[`Renders ExpandableSection indented 1`] = `
   <div
     class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented"
   >
-    <button
-      aria-controls="content-id"
-      aria-expanded="true"
+    <div
       class="pf-v6-c-expandable-section__toggle"
-      id="toggle-id"
-      type="button"
     >
-      <span
-        class="pf-v6-c-expandable-section__toggle-icon"
+      <button
+        aria-controls="content-id"
+        aria-disabled="false"
+        aria-expanded="true"
+        class="pf-v6-c-button pf-m-link"
+        data-ouia-component-id="OUIA-Generated-Button-link-7"
+        data-ouia-component-type="PF6/Button"
+        data-ouia-safe="true"
+        id="toggle-id"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon"
         >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-expandable-section__toggle-text"
-      />
-    </button>
+          <span
+            class="pf-v6-c-expandable-section__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
     <div
       aria-labelledby="toggle-id"
       class="pf-v6-c-expandable-section__content"
@@ -236,35 +284,47 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
   <div
     class="pf-v6-c-expandable-section"
   >
-    <button
-      aria-controls="content-id"
+    <div
       class="pf-v6-c-expandable-section__toggle"
-      id="toggle-id"
-      type="button"
     >
-      <span
-        class="pf-v6-c-expandable-section__toggle-icon"
+      <button
+        aria-controls="content-id"
+        aria-disabled="false"
+        class="pf-v6-c-button pf-m-link"
+        data-ouia-component-id="OUIA-Generated-Button-link-4"
+        data-ouia-component-type="PF6/Button"
+        data-ouia-safe="true"
+        id="toggle-id"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-expandable-section__toggle-text"
-      >
-        Show More
-      </span>
-    </button>
+          <span
+            class="pf-v6-c-expandable-section__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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"
+              />
+            </svg>
+          </span>
+        </span>
+        <span
+          class="pf-v6-c-button__text"
+        >
+          Show More
+        </span>
+      </button>
+    </div>
     <div
       aria-labelledby="toggle-id"
       class="pf-v6-c-expandable-section__content"

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-form__field-group-toggle-icon"

package/src/components/Form/examples/FormFieldGroups.tsx

@@ -73,11 +73,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
               titleDescription="Nested field group 1 description text."
-              actions={
-                <Button variant="plain" aria-label="Remove">
-                  <TrashIcon />
-                </Button>
-              }
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >
@@ -105,11 +101,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           header={
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
-              actions={
-                <Button variant="plain" aria-label="Remove">
-                  <TrashIcon />
-                </Button>
-              }
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >
@@ -138,11 +130,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
               titleDescription="Field group 3 description text."
-              actions={
-                <Button variant="plain" aria-label="Remove">
-                  <TrashIcon />
-                </Button>
-              }
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >

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

@@ -28,7 +28,7 @@ exports[`Label editable label 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -166,7 +166,7 @@ exports[`Label label with close button 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -215,7 +215,7 @@ exports[`Label label with close button and outline variant 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -264,7 +264,7 @@ exports[`LabelGroup label group with closable category 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"

package/src/components/LoginPage/LoginMainHeader.tsx

@@ -24,7 +24,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
   headerUtilities = null,
   ...props
 }: LoginMainHeaderProps) => (
-  <header className={css(styles.loginMainHeader, className)} {...props}>
+  <div className={css(styles.loginMainHeader, className)} {...props}>
     {title && (
       <Title headingLevel="h2" size={TitleSizes['3xl']}>
         {title}
@@ -33,6 +33,6 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
     {subtitle && <p className={css(styles.loginMainHeaderDesc)}>{subtitle}</p>}
     {headerUtilities && <div className={css(styles.loginMainHeaderUtilities)}>{headerUtilities}</div>}
     {children}
-  </header>
+  </div>
 );
 LoginMainHeader.displayName = 'LoginMainHeader';

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -263,7 +263,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"

package/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`LoginMainHeader className is added to the root element 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header extra-class"
   />
 </DocumentFragment>
@@ -10,7 +10,7 @@ exports[`LoginMainHeader className is added to the root element 1`] = `
 
 exports[`LoginMainHeader renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header"
   />
 </DocumentFragment>
@@ -18,7 +18,7 @@ exports[`LoginMainHeader renders with PatternFly Core styles 1`] = `
 
 exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header"
   >
     <h2
@@ -34,6 +34,6 @@ exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
     >
       Use LDAP credentials
     </p>
-  </header>
+  </div>
 </DocumentFragment>
 `;

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

@@ -24,7 +24,7 @@ exports[`check loginpage example against snapshot 1`] = `
       <main
         class="pf-v6-c-login__main"
       >
-        <header
+        <div
           class="pf-v6-c-login__main-header"
         >
           <h2
@@ -35,7 +35,7 @@ exports[`check loginpage example against snapshot 1`] = `
           >
             Log into your account
           </h2>
-        </header>
+        </div>
         <div
           class="pf-v6-c-login__main-body"
         />

package/src/components/MenuToggle/MenuToggle.tsx

@@ -14,6 +14,11 @@ export enum MenuToggleStatus {
   warning = 'warning'
 }
 
+export enum MenuToggleSize {
+  default = 'default',
+  sm = 'sm'
+}
+
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface SplitButtonOptions {
@@ -58,6 +63,8 @@ export interface MenuToggleProps
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
+  /** Adds styling which affects the size of the menu toggle */
+  size?: 'default' | 'sm';
   /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
   /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
@@ -78,6 +85,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    size: 'default',
     ouiaSafe: true
   };
 
@@ -104,6 +112,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       'aria-label': ariaLabel,
       ouiaId,
       ouiaSafe,
+      size,
       ...otherProps
     } = this.props;
     const isPlain = variant === 'plain';
@@ -170,6 +179,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,
+      size === MenuToggleSize.sm && styles.modifiers.small,
       className
     );
 

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

@@ -6,6 +6,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -53,19 +54,25 @@ describe('menu toggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('shows success status', () => {
+  // Old snapshot tests end here; following tests should be kept when refactoring
+  test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
+    render(<MenuToggle size="sm">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
+  });
+
+  test(`Renders with class ${styles.modifiers.success} when status="success" is passed`, () => {
     render(<MenuToggle status="success">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-success');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
   });
 
-  test('shows warning status', () => {
+  test(`Renders with class ${styles.modifiers.warning} when status="success" is passed`, () => {
     render(<MenuToggle status="warning">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-warning');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.warning);
   });
 
-  test('shows danger status', () => {
+  test(`Renders with class ${styles.modifiers.danger} when status="success" is passed`, () => {
     render(<MenuToggle status="danger">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-danger');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.danger);
   });
 
   test('split toggle passes onClick', async () => {