@patternfly/react-core 6.0.0-alpha.99 → 6.0.0-prerelease.2

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

@@ -49,6 +49,8 @@ export interface MenuToggleProps
   isFullHeight?: boolean;
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
+  /** Flag indicating the toggle contains placeholder text */
+  isPlaceholder?: boolean;
   /** Object used to configure a split button menu toggle */
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
@@ -85,6 +87,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    isPlaceholder: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -103,6 +106,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isDisabled,
       isFullHeight,
       isFullWidth,
+      isPlaceholder,
       splitButtonOptions,
       variant,
       status,
@@ -179,6 +183,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,
+      isPlaceholder && styles.modifiers.placeholder,
       size === MenuToggleSize.sm && styles.modifiers.small,
       className
     );

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

@@ -100,4 +100,9 @@ describe('menu toggle', () => {
     await user.click(screen.getByRole(`button`) as Element);
     expect(mockClick).toHaveBeenCalled();
   });
+
+  test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => {
+    render(<MenuToggle isPlaceholder>Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.placeholder);
+  });
 });

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -296,3 +296,11 @@ When the status value is "warning" or "danger", you must include helper text tha
 ```ts file='MenuToggleStatus.tsx'
 
 ```
+
+### Placeholder text in toggle
+
+To indicate the toggle contains placeholder text, pass the `isPlaceholder` property to the `MenuToggle`.
+
+```ts file='MenuTogglePlaceholder.tsx'
+
+```

package/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuTogglePlaceholder: React.FunctionComponent = () => (
+  <MenuToggle isPlaceholder>Placeholder text</MenuToggle>
+);

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -106,7 +106,7 @@ exports[`Modal Content Test with onclose 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/Modal/examples/Modal.md

@@ -4,7 +4,6 @@ section: components
 cssPrefix: pf-v5-c-modal-box
 propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
 ouia: true
-beta: true
 ---
 
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';