npm - @patternfly/react-core - Versions diffs - 6.0.0-alpha.5 → 6.0.0-alpha.51 - Mend

@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2000) hide show

package/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap CHANGED Viewed

@@ -3,68 +3,64 @@
 exports[`Drawer expands from bottom 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer pf-m-expanded pf-m-panel-bottom"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-5"
+        class="pf-v6-c-drawer__panel"
+        id="generated-id"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v6-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v6-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-4"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           drawer-panel
         </div>
@@ -77,22 +73,22 @@ exports[`Drawer expands from bottom 1`] = `
 exports[`Drawer has resizable callback and id 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer pf-m-expanded pf-m-panel-left"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel pf-m-resizable"
+        class="pf-v6-c-drawer__panel pf-m-resizable"
         id="test-id"
       >
         <div
@@ -102,62 +98,58 @@ exports[`Drawer has resizable callback and id 1`] = `
           aria-valuemax="100"
           aria-valuemin="0"
           aria-valuenow="0"
-          class="pf-v5-c-drawer__splitter pf-m-vertical"
+          class="pf-v6-c-drawer__splitter pf-m-vertical"
           role="separator"
           tabindex="0"
         >
           <div
             aria-hidden="true"
-            class="pf-v5-c-drawer__splitter-handle"
+            class="pf-v6-c-drawer__splitter-handle"
           />
         </div>
         <div
-          class="pf-v5-c-drawer__panel-main"
+          class="pf-v6-c-drawer__panel-main"
         >
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v6-c-drawer__head"
           >
+            <span>
+              drawer-panel
+            </span>
             <div
-              class="pf-v5-c-drawer__head"
+              class="pf-v6-c-drawer__actions"
             >
-              <span>
-                drawer-panel
-              </span>
               <div
-                class="pf-v5-c-drawer__actions"
+                class="pf-v6-c-drawer__close"
               >
-                <div
-                  class="pf-v5-c-drawer__close"
+                <button
+                  aria-disabled="false"
+                  aria-label="Close drawer panel"
+                  class="pf-v6-c-button pf-m-plain"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  type="button"
                 >
-                  <button
-                    aria-disabled="false"
-                    aria-label="Close drawer panel"
-                    class="pf-v5-c-button pf-m-plain"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-6"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
-                    type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 352 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                      />
-                    </svg>
-                  </button>
-                </div>
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v6-c-drawer__body"
           >
             drawer-panel
           </div>
@@ -171,88 +163,84 @@ exports[`Drawer has resizable callback and id 1`] = `
 exports[`Drawer has resizable css and color variants 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer pf-m-expanded pf-m-panel-left"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel pf-m-resizable pf-m-light-200"
-        id="pf-drawer-panel-6"
-        style="--pf-v5-c-drawer__panel--md--FlexBasis: 300px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 400px;"
+        class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
+        id="generated-id"
+        style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-6"
+          aria-controls="generated-id"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
           aria-valuemin="0"
           aria-valuenow="0"
-          class="pf-v5-c-drawer__splitter pf-m-vertical"
+          class="pf-v6-c-drawer__splitter pf-m-vertical"
           role="separator"
           tabindex="0"
         >
           <div
             aria-hidden="true"
-            class="pf-v5-c-drawer__splitter-handle"
+            class="pf-v6-c-drawer__splitter-handle"
           />
         </div>
         <div
-          class="pf-v5-c-drawer__panel-main"
+          class="pf-v6-c-drawer__panel-main"
         >
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v6-c-drawer__head"
           >
+            <span>
+              drawer-panel
+            </span>
             <div
-              class="pf-v5-c-drawer__head"
+              class="pf-v6-c-drawer__actions"
             >
-              <span>
-                drawer-panel
-              </span>
               <div
-                class="pf-v5-c-drawer__actions"
+                class="pf-v6-c-drawer__close"
               >
-                <div
-                  class="pf-v5-c-drawer__close"
+                <button
+                  aria-disabled="false"
+                  aria-label="Close drawer panel"
+                  class="pf-v6-c-button pf-m-plain"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  type="button"
                 >
-                  <button
-                    aria-disabled="false"
-                    aria-label="Close drawer panel"
-                    class="pf-v5-c-button pf-m-plain"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-5"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
-                    type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 352 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                      />
-                    </svg>
-                  </button>
-                </div>
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v6-c-drawer__body"
           >
             drawer-panel
           </div>
@@ -266,24 +254,24 @@ exports[`Drawer has resizable css and color variants 1`] = `
 exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer"
+    class="pf-v6-c-drawer"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel"
+        class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-1"
+        id="generated-id"
       />
     </div>
   </div>
@@ -293,24 +281,24 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
 exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer"
+    class="pf-v6-c-drawer"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel"
+        class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-3"
+        id="generated-id"
       />
     </div>
   </div>
@@ -320,68 +308,64 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
 exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-0"
+        class="pf-v6-c-drawer__panel"
+        id="generated-id"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v6-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v6-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           drawer-panel
         </div>
@@ -394,68 +378,64 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
 exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-4"
+        class="pf-v6-c-drawer__panel"
+        id="generated-id"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v6-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v6-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-3"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           drawer-panel
         </div>
@@ -468,68 +448,64 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
 exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded"
   >
     <div
-      class="pf-v5-c-drawer__main"
+      class="pf-v6-c-drawer__main"
     >
       <div
-        class="pf-v5-c-drawer__content"
+        class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-2"
+        class="pf-v6-c-drawer__panel"
+        id="generated-id"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v6-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v6-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v6-c-drawer__body"
         >
           drawer-panel
         </div>