@patternfly/react-core 6.0.0-alpha.24 → 6.0.0-alpha.26

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

@@ -22,44 +22,40 @@ exports[`Drawer expands from bottom 1`] = `
         id="pf-drawer-panel-5"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <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"
               >
-                <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-v5-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>
@@ -115,44 +111,40 @@ exports[`Drawer has resizable callback and id 1`] = `
           class="pf-v5-c-drawer__panel-main"
         >
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v5-c-drawer__head"
           >
+            <span>
+              drawer-panel
+            </span>
             <div
-              class="pf-v5-c-drawer__head"
+              class="pf-v5-c-drawer__actions"
             >
-              <span>
-                drawer-panel
-              </span>
               <div
-                class="pf-v5-c-drawer__actions"
+                class="pf-v5-c-drawer__close"
               >
-                <div
-                  class="pf-v5-c-drawer__close"
+                <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"
                 >
-                  <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-v5-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>
@@ -186,7 +178,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel pf-m-resizable pf-m-light-200"
+        class="pf-v5-c-drawer__panel pf-m-resizable pf-m-secondary"
         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;"
       >
@@ -210,44 +202,40 @@ exports[`Drawer has resizable css and color variants 1`] = `
           class="pf-v5-c-drawer__panel-main"
         >
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v5-c-drawer__head"
           >
+            <span>
+              drawer-panel
+            </span>
             <div
-              class="pf-v5-c-drawer__head"
+              class="pf-v5-c-drawer__actions"
             >
-              <span>
-                drawer-panel
-              </span>
               <div
-                class="pf-v5-c-drawer__actions"
+                class="pf-v5-c-drawer__close"
               >
-                <div
-                  class="pf-v5-c-drawer__close"
+                <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"
                 >
-                  <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-v5-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>
@@ -339,44 +327,40 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
         id="pf-drawer-panel-0"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <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"
               >
-                <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-v5-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>
@@ -413,44 +397,40 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
         id="pf-drawer-panel-4"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <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"
               >
-                <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-v5-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>
@@ -487,44 +467,40 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
         id="pf-drawer-panel-2"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <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"
               >
-                <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-v5-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>

package/src/components/Drawer/__tests__/__snapshots__/DrawerPanelDescription.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-drawer__description"
+  >
+    description content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Drawer/examples/Drawer.md

@@ -4,15 +4,15 @@ cssPrefix: pf-v5-c-drawer
 propComponents:
   [
     Drawer,
+    DrawerSection,
     DrawerContent,
-    DrawerPanelContent,
     DrawerContentBody,
-    DrawerPanelBody,
-    DrawerSection,
+    DrawerPanelContent,
     DrawerHead,
     DrawerActions,
     DrawerCloseButton,
-    DrawerColorVariant,
+    DrawerPanelDescription,
+    DrawerPanelBody,
     DrawerPanelFocusTrapObject
   ]
 section: components

package/src/components/Drawer/examples/DrawerBasic.tsx

@@ -7,6 +7,8 @@ import {
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
+  DrawerPanelBody,
+  DrawerPanelDescription,
   Button
 } from '@patternfly/react-core';
 
@@ -30,12 +32,14 @@ export const DrawerBasic: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>
       </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
     </DrawerPanelContent>
   );
 

package/src/components/Drawer/examples/DrawerBasicInline.tsx

@@ -30,7 +30,7 @@ export const DrawerBasicInline: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerBreakpoint.tsx

@@ -30,7 +30,7 @@ export const DrawerBreakpoint: React.FunctionComponent = () => {
     <DrawerPanelContent widths={{ default: 'width_33' }}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerFocusTrap.tsx

@@ -32,7 +32,7 @@ export const DrawerFocusTrap: React.FunctionComponent = () => {
   const panelContent = (
     <DrawerPanelContent focusTrap={{ enabled: true }}>
       <DrawerHead>
-        <span>drawer-panel</span>
+        <span>Drawer panel header</span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>

package/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx

@@ -30,7 +30,7 @@ export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerInlinePanelStart.tsx

@@ -30,7 +30,7 @@ export const DrawerInlinePanelStart: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx

@@ -30,7 +30,7 @@ export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx

@@ -28,9 +28,9 @@ export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
 
   const panelContent = (
     <DrawerPanelContent>
-      <DrawerHead hasNoPadding>
+      <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerPanelBottom.tsx

@@ -30,7 +30,7 @@ export const DrawerPanelBottom: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerPanelEnd.tsx

@@ -30,7 +30,7 @@ export const DrawerPanelEnd: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerPanelStart.tsx

@@ -30,7 +30,7 @@ export const DrawerPanelStart: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerResizableAtEnd.tsx

@@ -35,7 +35,7 @@ export const DrawerResizableAtEnd: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable onResize={onResize} id="end-resize-panel" defaultSize={'500px'} minSize={'150px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerResizableAtStart.tsx

@@ -30,7 +30,7 @@ export const DrawerResizableAtStart: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'200px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerResizableOnBottom.tsx

@@ -29,7 +29,7 @@ export const DrawerResizableOnBottom: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable defaultSize={'200px'} minSize={'100px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/examples/DrawerResizableOnInline.tsx

@@ -29,7 +29,7 @@ export const DrawerResizableOnInline: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'150px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />