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

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

@@ -12,34 +12,47 @@ exports[`With popover opened 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value=""
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <div
+            class="pf-v5-c-form-control"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+            <input
+              aria-invalid="false"
+              aria-label="Date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-type="PF5/TextInput"
+              data-ouia-safe="true"
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value=""
             />
-          </svg>
-        </button>
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
     <div
@@ -74,7 +87,7 @@ exports[`With popover opened 1`] = `
                   aria-label="Previous month"
                   class="pf-v5-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                  data-ouia-component-type="PF4/Button"
+                  data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
                   type="button"
                 >
@@ -82,8 +95,10 @@ exports[`With popover opened 1`] = `
                     aria-hidden="true"
                     class="pf-v5-svg"
                     fill="currentColor"
+                    height="1em"
                     role="img"
                     viewBox="0 0 256 512"
+                    width="1em"
                   >
                     <path
                       d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
@@ -95,15 +110,17 @@ exports[`With popover opened 1`] = `
                 class="pf-v5-c-input-group"
               >
                 <div
-                  class="pf-v5-c-calendar-month__header-month"
+                  class="pf-v5-c-input-group__item pf-m-fill"
                 >
-                  <span
-                    hidden=""
-                    id="unique_id_mock"
+                  <div
+                    class="pf-v5-c-calendar-month__header-month"
                   >
-                    Month
-                  </span>
-                  <div>
+                    <span
+                      hidden=""
+                      id="unique_id_mock"
+                    >
+                      Month
+                    </span>
                     <button
                       aria-expanded="false"
                       class="pf-v5-c-menu-toggle"
@@ -125,8 +142,10 @@ exports[`With popover opened 1`] = `
                             aria-hidden="true"
                             class="pf-v5-svg"
                             fill="currentColor"
+                            height="1em"
                             role="img"
                             viewBox="0 0 320 512"
+                            width="1em"
                           >
                             <path
                               d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -138,18 +157,25 @@ exports[`With popover opened 1`] = `
                   </div>
                 </div>
                 <div
-                  class="pf-v5-c-calendar-month__header-year"
+                  class="pf-v5-c-input-group__item"
                 >
-                  <input
-                    aria-invalid="false"
-                    aria-label="Select year"
-                    class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    type="number"
-                    value="1969"
-                  />
+                  <div
+                    class="pf-v5-c-calendar-month__header-year"
+                  >
+                    <div
+                      class="pf-v5-c-form-control"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="Select year"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                        data-ouia-component-type="PF5/TextInput"
+                        data-ouia-safe="true"
+                        type="number"
+                        value="1969"
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
               <div
@@ -160,7 +186,7 @@ exports[`With popover opened 1`] = `
                   aria-label="Next month"
                   class="pf-v5-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                  data-ouia-component-type="PF4/Button"
+                  data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
                   type="button"
                 >
@@ -168,8 +194,10 @@ exports[`With popover opened 1`] = `
                     aria-hidden="true"
                     class="pf-v5-svg"
                     fill="currentColor"
+                    height="1em"
                     role="img"
                     viewBox="0 0 256 512"
+                    width="1em"
                   >
                     <path
                       d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -755,38 +783,51 @@ exports[`disabled date picker 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="disabled date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          disabled=""
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value="2020-11-20"
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          disabled=""
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <div
+            class="pf-v5-c-form-control pf-m-disabled"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+            <input
+              aria-invalid="false"
+              aria-label="disabled date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF5/TextInput"
+              data-ouia-safe="true"
+              disabled=""
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value="2020-11-20"
             />
-          </svg>
-        </button>
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            disabled=""
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </DocumentFragment>
-`;
+`;

package/src/components/DatePicker/examples/DatePicker.md

@@ -2,9 +2,8 @@
 id: Date picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-date-picker
+cssPrefix: pf-v5-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
-beta: true
 ---
 
 ## Examples

package/src/components/DatePicker/examples/DatePickerControlled.tsx

@@ -6,8 +6,10 @@ export const DatePickerControlled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(initialValue);
   return (
     <React.Fragment>
-      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
       <DatePicker value={value} onChange={(_event, value) => setValue(value)} />
+      <br />
+      <br />
+      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
     </React.Fragment>
   );
 };

package/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx

@@ -10,8 +10,10 @@ export const DatePickerControlledCalendar: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Button onClick={onClick}>Toggle calendar</Button>
       <DatePicker ref={dateRef} />
+      <br />
+      <br />
+      <Button onClick={onClick}>Toggle calendar</Button>
     </React.Fragment>
   );
 };

package/src/components/DescriptionList/DescriptionListDescription.tsx

@@ -15,7 +15,7 @@ export const DescriptionListDescription: React.FunctionComponent<DescriptionList
   ...props
 }: DescriptionListDescriptionProps) => (
   <dd className={css(styles.descriptionListDescription, className)} {...props}>
-    <div className={'pf-c-description-list__text'}>{children}</div>
+    <div className={css(styles.descriptionListText)}>{children}</div>
   </dd>
 );
 DescriptionListDescription.displayName = 'DescriptionListDescription';

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

@@ -72,7 +72,7 @@ exports[`Description List Description 1`] = `
     class="pf-v5-c-description-list__description custom-description-list-description"
   >
     <div
-      class="pf-c-description-list__text"
+      class="pf-v5-c-description-list__text"
     >
       test
     </div>

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -1,7 +1,7 @@
 ---
 id: 'Description list'
 section: components
-cssPrefix: 'pf-c-description-list'
+cssPrefix: 'pf-v5-c-description-list'
 propComponents:
   [
     'DescriptionList',

package/src/components/Divider/examples/Divider.md

@@ -1,7 +1,7 @@
 ---
 id: Divider
 section: components
-cssPrefix: pf-c-divider
+cssPrefix: pf-v5-c-divider
 propComponents: ['Divider']
 ---
 

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

@@ -41,7 +41,7 @@ exports[`Drawer expands from bottom 1`] = `
                   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="PF4/Button"
+                  data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
                   type="button"
                 >
@@ -49,8 +49,10 @@ exports[`Drawer expands from bottom 1`] = `
                     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"
@@ -132,7 +134,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                     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="PF4/Button"
+                    data-ouia-component-type="PF5/Button"
                     data-ouia-safe="true"
                     type="button"
                   >
@@ -140,8 +142,10 @@ exports[`Drawer has resizable callback and id 1`] = `
                       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"
@@ -225,7 +229,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                     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="PF4/Button"
+                    data-ouia-component-type="PF5/Button"
                     data-ouia-safe="true"
                     type="button"
                   >
@@ -233,8 +237,10 @@ exports[`Drawer has resizable css and color variants 1`] = `
                       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"
@@ -352,7 +358,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
                   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="PF4/Button"
+                  data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
                   type="button"
                 >
@@ -360,8 +366,10 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
                     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"
@@ -424,7 +432,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
                   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="PF4/Button"
+                  data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
                   type="button"
                 >
@@ -432,8 +440,10 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
                     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"
@@ -496,7 +506,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
                   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="PF4/Button"
+                  data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
                   type="button"
                 >
@@ -504,8 +514,10 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
                     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"

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

@@ -1,6 +1,6 @@
 ---
 id: Drawer
-cssPrefix: pf-c-drawer
+cssPrefix: pf-v5-c-drawer
 propComponents:
   [
     Drawer,
@@ -106,7 +106,7 @@ section: components
 ```ts file="DrawerResizableOnInline.tsx"
 ```
 
-### Panel with light-200 background
+### Panel with secondary background
 
-```ts file="DrawerLightGray.tsx"
+```ts file="DrawerSecondaryBackground.tsx"
 ```

package/src/components/Drawer/examples/{DrawerLightGray.tsx → DrawerSecondaryBackground.tsx}

@@ -13,13 +13,13 @@ import {
   DrawerColorVariant
 } from '@patternfly/react-core';
 
-export const DrawerLightGray: React.FunctionComponent = () => {
+export const DrawerSecondaryBackground: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const [panelGray, setPanelGray] = React.useState(true);
-  const [contentGray, setContentGray] = React.useState(false);
-  const [sectionGray, setSectionGray] = React.useState(false);
+  const [panelSecondary, setPanelSecondary] = React.useState(true);
+  const [contentSecondary, setContentSecondary] = React.useState(false);
+  const [sectionSecondary, setSectionSecondary] = React.useState(false);
 
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
@@ -33,20 +33,20 @@ export const DrawerLightGray: React.FunctionComponent = () => {
     setIsExpanded(false);
   };
 
-  const togglePanelGray = (checked: boolean) => {
-    setPanelGray(checked);
+  const togglePanelSecondary = (checked: boolean) => {
+    setPanelSecondary(checked);
   };
 
-  const toggleSectionGray = (checked: boolean) => {
-    setSectionGray(checked);
+  const toggleSectionSecondary = (checked: boolean) => {
+    setSectionSecondary(checked);
   };
 
-  const toggleContentGray = (checked: boolean) => {
-    setContentGray(checked);
+  const toggleContentSecondary = (checked: boolean) => {
+    setContentSecondary(checked);
   };
 
   const panelContent = (
-    <DrawerPanelContent colorVariant={panelGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -64,39 +64,39 @@ export const DrawerLightGray: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Checkbox
-        label="Gray panel"
-        isChecked={panelGray}
-        onChange={(_event, checked) => togglePanelGray(checked)}
-        aria-label="Gray panel checkbox"
-        id="toggle-gray-panel"
-        name="toggle-gray-panel"
+        label="Secondary panel"
+        isChecked={panelSecondary}
+        onChange={(_event, checked) => togglePanelSecondary(checked)}
+        aria-label="Secondary panel checkbox"
+        id="toggle-secondary-panel"
+        name="toggle-secondary-panel"
       />
       <Checkbox
-        label="Gray content"
-        isChecked={contentGray}
-        onChange={(_event, checked) => toggleContentGray(checked)}
-        aria-label="Gray content checkbox"
-        id="toggle-gray-content"
-        name="toggle-gray-content"
+        label="Secondary content"
+        isChecked={contentSecondary}
+        onChange={(_event, checked) => toggleContentSecondary(checked)}
+        aria-label="Secondary content checkbox"
+        id="toggle-secondary-content"
+        name="toggle-secondary-content"
       />
       <Checkbox
-        label="Gray section"
-        isChecked={sectionGray}
-        onChange={(_event, checked) => toggleSectionGray(checked)}
-        aria-label="Gray section checkbox"
-        id="toggle-gray-section"
-        name="toggle-gray-section"
+        label="Secondary section"
+        isChecked={sectionSecondary}
+        onChange={(_event, checked) => toggleSectionSecondary(checked)}
+        aria-label="Secondary section checkbox"
+        id="toggle-secondary-section"
+        name="toggle-secondary-section"
       />
       <br />
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
       <Drawer isExpanded={isExpanded} onExpand={onExpand}>
-        <DrawerSection colorVariant={sectionGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
           drawer-section
         </DrawerSection>
         <DrawerContent
-          colorVariant={contentGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>