@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.91

package/src/components/Nav/examples/nav.css

@@ -8,7 +8,7 @@
 #ws-react-c-navigation-horizontal-subnav,
 #ws-react-c-navigation-flyout,
 #ws-react-c-navigation-drilldown {
-  background-color: var(--pf-global--BackgroundColor--dark-300);
+  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-react-c-navigation-flyout,

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

@@ -5,18 +5,18 @@ exports[`NotificationBadge count 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-c-button pf-m-plain"
+    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-safe="true"
     type="button"
   >
     <span
-      class="pf-c-notification-badge pf-m-read"
+      class="pf-v5-c-notification-badge pf-m-read"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 896 1024"
@@ -26,7 +26,7 @@ exports[`NotificationBadge count 1`] = `
         />
       </svg>
       <span
-        class="pf-c-notification-badge__count"
+        class="pf-v5-c-notification-badge__count"
       >
         3
       </span>
@@ -40,14 +40,14 @@ exports[`false NotificationBadge needs attention 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-c-button pf-m-plain"
+    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-safe="true"
     type="button"
   >
     <span
-      class="pf-c-notification-badge pf-m-attention"
+      class="pf-v5-c-notification-badge pf-m-attention"
     >
       does not need attention Badge
     </span>
@@ -60,14 +60,14 @@ exports[`true NotificationBadge needs attention 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-c-button pf-m-plain"
+    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-safe="true"
     type="button"
   >
     <span
-      class="pf-c-notification-badge pf-m-attention"
+      class="pf-v5-c-notification-badge pf-m-attention"
     >
       needs attention Badge
     </span>

package/src/components/NotificationBadge/examples/notificationBadge.css

@@ -1,4 +1,4 @@
 #ws-react-c-notification-badge-basic,
-#ws-react-c-notification-badge-with-count{
-  background-color: var(--pf-global--BackgroundColor--dark-100);
+#ws-react-c-notification-badge-with-count {
+  background-color: var(--pf-v5-global--BackgroundColor--dark-100);
 }

package/src/components/NotificationDrawer/NotificationDrawerGroup.tsx

@@ -92,8 +92,8 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
         <button
           className={css(styles.notificationDrawerGroupToggle)}
           aria-expanded={isExpanded}
-          onClick={e => onExpand(e, !isExpanded)}
-          onKeyDown={e => {
+          onClick={(e) => onExpand(e, !isExpanded)}
+          onKeyDown={(e) => {
             if (e.key === 'Enter' || e.key === ' ') {
               e.preventDefault();
               onExpand(e, !isExpanded);
@@ -111,7 +111,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
             <Badge isRead={isRead}>{count}</Badge>
           </div>
 
-          <span className="pf-c-notification-drawer__group-toggle-icon">
+          <span className="pf-v5-c-notification-drawer__group-toggle-icon">
             <AngleRightIcon />
           </span>
         </button>

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

@@ -3,7 +3,7 @@
 exports[`NotificationDrawer renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer"
+    class="pf-v5-c-notification-drawer"
   />
 </DocumentFragment>
 `;

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NotificationDrawerBody renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__body"
+    class="pf-v5-c-notification-drawer__body"
   />
 </DocumentFragment>
 `;

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap

@@ -3,33 +3,33 @@
 exports[`NotificationDrawerGroup drawer group with isExpanded applied  1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-notification-drawer__group pf-m-expanded"
+    class="pf-v5-c-notification-drawer__group pf-m-expanded"
   >
     <h1>
       <button
         aria-expanded="true"
-        class="pf-c-notification-drawer__group-toggle"
+        class="pf-v5-c-notification-drawer__group-toggle"
       >
         <div
-          class="pf-c-notification-drawer__group-toggle-title"
+          class="pf-v5-c-notification-drawer__group-toggle-title"
         >
           Critical Alerts
         </div>
         <div
-          class="pf-c-notification-drawer__group-toggle-count"
+          class="pf-v5-c-notification-drawer__group-toggle-count"
         >
           <span
-            class="pf-c-badge pf-m-unread"
+            class="pf-v5-c-badge pf-m-unread"
           >
             2
           </span>
         </div>
         <span
-          class="pf-c-notification-drawer__group-toggle-icon"
+          class="pf-v5-c-notification-drawer__group-toggle-icon"
         >
           <svg
             aria-hidden="true"
-            class="pf-svg"
+            class="pf-v5-svg"
             fill="currentColor"
             role="img"
             viewBox="0 0 256 512"
@@ -48,33 +48,33 @@ exports[`NotificationDrawerGroup drawer group with isExpanded applied  1`] = `
 exports[`NotificationDrawerGroup drawer group with isRead applied  1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-notification-drawer__group"
+    class="pf-v5-c-notification-drawer__group"
   >
     <h1>
       <button
         aria-expanded="false"
-        class="pf-c-notification-drawer__group-toggle"
+        class="pf-v5-c-notification-drawer__group-toggle"
       >
         <div
-          class="pf-c-notification-drawer__group-toggle-title"
+          class="pf-v5-c-notification-drawer__group-toggle-title"
         >
           Critical Alerts
         </div>
         <div
-          class="pf-c-notification-drawer__group-toggle-count"
+          class="pf-v5-c-notification-drawer__group-toggle-count"
         >
           <span
-            class="pf-c-badge pf-m-read"
+            class="pf-v5-c-badge pf-m-read"
           >
             2
           </span>
         </div>
         <span
-          class="pf-c-notification-drawer__group-toggle-icon"
+          class="pf-v5-c-notification-drawer__group-toggle-icon"
         >
           <svg
             aria-hidden="true"
-            class="pf-svg"
+            class="pf-v5-svg"
             fill="currentColor"
             role="img"
             viewBox="0 0 256 512"
@@ -93,33 +93,33 @@ exports[`NotificationDrawerGroup drawer group with isRead applied  1`] = `
 exports[`NotificationDrawerGroup renders correct heading level 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-notification-drawer__group"
+    class="pf-v5-c-notification-drawer__group"
   >
     <h2>
       <button
         aria-expanded="false"
-        class="pf-c-notification-drawer__group-toggle"
+        class="pf-v5-c-notification-drawer__group-toggle"
       >
         <div
-          class="pf-c-notification-drawer__group-toggle-title"
+          class="pf-v5-c-notification-drawer__group-toggle-title"
         >
           Critical Alerts
         </div>
         <div
-          class="pf-c-notification-drawer__group-toggle-count"
+          class="pf-v5-c-notification-drawer__group-toggle-count"
         >
           <span
-            class="pf-c-badge pf-m-unread"
+            class="pf-v5-c-badge pf-m-unread"
           >
             2
           </span>
         </div>
         <span
-          class="pf-c-notification-drawer__group-toggle-icon"
+          class="pf-v5-c-notification-drawer__group-toggle-icon"
         >
           <svg
             aria-hidden="true"
-            class="pf-svg"
+            class="pf-v5-svg"
             fill="currentColor"
             role="img"
             viewBox="0 0 256 512"
@@ -138,33 +138,33 @@ exports[`NotificationDrawerGroup renders correct heading level 1`] = `
 exports[`NotificationDrawerGroup renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-notification-drawer__group"
+    class="pf-v5-c-notification-drawer__group"
   >
     <h1>
       <button
         aria-expanded="false"
-        class="pf-c-notification-drawer__group-toggle"
+        class="pf-v5-c-notification-drawer__group-toggle"
       >
         <div
-          class="pf-c-notification-drawer__group-toggle-title"
+          class="pf-v5-c-notification-drawer__group-toggle-title"
         >
           Critical Alerts
         </div>
         <div
-          class="pf-c-notification-drawer__group-toggle-count"
+          class="pf-v5-c-notification-drawer__group-toggle-count"
         >
           <span
-            class="pf-c-badge pf-m-unread"
+            class="pf-v5-c-badge pf-m-unread"
           >
             2
           </span>
         </div>
         <span
-          class="pf-c-notification-drawer__group-toggle-icon"
+          class="pf-v5-c-notification-drawer__group-toggle-icon"
         >
           <svg
             aria-hidden="true"
-            class="pf-svg"
+            class="pf-v5-svg"
             fill="currentColor"
             role="img"
             viewBox="0 0 256 512"

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroupList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NotificationDrawerGroupList renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__group-list"
+    class="pf-v5-c-notification-drawer__group-list"
   />
 </DocumentFragment>
 `;

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__header"
+    class="pf-v5-c-notification-drawer__header"
   >
     <h1
-      class="pf-c-notification-drawer__header-title"
+      class="pf-v5-c-notification-drawer__header-title"
       data-ouia-component-id="OUIA-Generated-Text-3"
       data-ouia-component-type="PF4/Text"
       data-ouia-safe="true"
@@ -15,7 +15,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
       Notifications
     </h1>
     <span
-      class="pf-c-notification-drawer__header-status"
+      class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread
     </span>
@@ -26,10 +26,10 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
 exports[`NotificationDrawerHeader drawer header with custom unread text applied 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__header"
+    class="pf-v5-c-notification-drawer__header"
   >
     <h1
-      class="pf-c-notification-drawer__header-title"
+      class="pf-v5-c-notification-drawer__header-title"
       data-ouia-component-id="OUIA-Generated-Text-5"
       data-ouia-component-type="PF4/Text"
       data-ouia-safe="true"
@@ -38,7 +38,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
       Notifications
     </h1>
     <span
-      class="pf-c-notification-drawer__header-status"
+      class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread alerts
     </span>
@@ -49,10 +49,10 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
 exports[`NotificationDrawerHeader drawer header with title applied 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__header"
+    class="pf-v5-c-notification-drawer__header"
   >
     <h1
-      class="pf-c-notification-drawer__header-title"
+      class="pf-v5-c-notification-drawer__header-title"
       data-ouia-component-id="OUIA-Generated-Text-4"
       data-ouia-component-type="PF4/Text"
       data-ouia-safe="true"
@@ -67,10 +67,10 @@ exports[`NotificationDrawerHeader drawer header with title applied 1`] = `
 exports[`NotificationDrawerHeader renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__header"
+    class="pf-v5-c-notification-drawer__header"
   >
     <h1
-      class="pf-c-notification-drawer__header-title"
+      class="pf-v5-c-notification-drawer__header-title"
       data-ouia-component-id="OUIA-Generated-Text-1"
       data-ouia-component-type="PF4/Text"
       data-ouia-safe="true"

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NotificationDrawerListItem renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <li
-    class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
+    class="pf-v5-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
     tabindex="0"
   />
 </DocumentFragment>

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemBody.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`NotificationDrawerListItemBody list item body with timestamp property applied 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__list-item-description"
+    class="pf-v5-c-notification-drawer__list-item-description"
   />
   <div
-    class="pf-c-notification-drawer__list-item-timestamp"
+    class="pf-v5-c-notification-drawer__list-item-timestamp"
   >
     5 minutes ago
   </div>
@@ -16,7 +16,7 @@ exports[`NotificationDrawerListItemBody list item body with timestamp property a
 exports[`NotificationDrawerListItemBody renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__list-item-description"
+    class="pf-v5-c-notification-drawer__list-item-description"
   />
 </DocumentFragment>
 `;

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap

@@ -3,14 +3,14 @@
 exports[`NotificationDrawerListItemHeader list item header with custom icon applied  1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__list-item-header"
+    class="pf-v5-c-notification-drawer__list-item-header"
   >
     <span
-      class="pf-c-notification-drawer__list-item-header-icon"
+      class="pf-v5-c-notification-drawer__list-item-header-icon"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 896 1024"
@@ -21,7 +21,7 @@ exports[`NotificationDrawerListItemHeader list item header with custom icon appl
       </svg>
     </span>
     <h2
-      class="pf-c-notification-drawer__list-item-header-title"
+      class="pf-v5-c-notification-drawer__list-item-header-title"
     >
       Pod quit unexpectedly
     </h2>
@@ -32,14 +32,14 @@ exports[`NotificationDrawerListItemHeader list item header with custom icon appl
 exports[`NotificationDrawerListItemHeader list item header with srTitle applied  1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__list-item-header"
+    class="pf-v5-c-notification-drawer__list-item-header"
   >
     <span
-      class="pf-c-notification-drawer__list-item-header-icon"
+      class="pf-v5-c-notification-drawer__list-item-header-icon"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 896 1024"
@@ -50,10 +50,10 @@ exports[`NotificationDrawerListItemHeader list item header with srTitle applied
       </svg>
     </span>
     <h2
-      class="pf-c-notification-drawer__list-item-header-title"
+      class="pf-v5-c-notification-drawer__list-item-header-title"
     >
       <span
-        class="pf-u-screen-reader"
+        class="pf-v5-u-screen-reader"
       >
         screen reader title
       </span>
@@ -66,14 +66,14 @@ exports[`NotificationDrawerListItemHeader list item header with srTitle applied
 exports[`NotificationDrawerListItemHeader list item header with variant applied  1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__list-item-header"
+    class="pf-v5-c-notification-drawer__list-item-header"
   >
     <span
-      class="pf-c-notification-drawer__list-item-header-icon"
+      class="pf-v5-c-notification-drawer__list-item-header-icon"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 512 512"
@@ -84,7 +84,7 @@ exports[`NotificationDrawerListItemHeader list item header with variant applied
       </svg>
     </span>
     <h2
-      class="pf-c-notification-drawer__list-item-header-title"
+      class="pf-v5-c-notification-drawer__list-item-header-title"
     >
       Pod quit unexpectedly
     </h2>
@@ -95,14 +95,14 @@ exports[`NotificationDrawerListItemHeader list item header with variant applied
 exports[`NotificationDrawerListItemHeader renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__list-item-header"
+    class="pf-v5-c-notification-drawer__list-item-header"
   >
     <span
-      class="pf-c-notification-drawer__list-item-header-icon"
+      class="pf-v5-c-notification-drawer__list-item-header-icon"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 896 1024"
@@ -113,7 +113,7 @@ exports[`NotificationDrawerListItemHeader renders with PatternFly Core styles 1`
       </svg>
     </span>
     <h2
-      class="pf-c-notification-drawer__list-item-header-title"
+      class="pf-v5-c-notification-drawer__list-item-header-title"
     >
       Pod quit unexpectedly
     </h2>
@@ -124,14 +124,14 @@ exports[`NotificationDrawerListItemHeader renders with PatternFly Core styles 1`
 exports[`NotificationDrawerListItemHeader renders with correct heading level 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-notification-drawer__list-item-header"
+    class="pf-v5-c-notification-drawer__list-item-header"
   >
     <span
-      class="pf-c-notification-drawer__list-item-header-icon"
+      class="pf-v5-c-notification-drawer__list-item-header-icon"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 896 1024"
@@ -142,7 +142,7 @@ exports[`NotificationDrawerListItemHeader renders with correct heading level 1`]
       </svg>
     </span>
     <h3
-      class="pf-c-notification-drawer__list-item-header-title"
+      class="pf-v5-c-notification-drawer__list-item-header-title"
     >
       Pod quit unexpectedly
     </h3>

package/src/components/NumberInput/NumberInput.tsx

@@ -108,7 +108,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
       className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
       {...(widthChars && {
         style: {
-          '--pf-c-number-input--c-form-control--width-chars': widthChars,
+          '--pf-v5-c-number-input--c-form-control--width-chars': widthChars,
           ...props.style
         } as React.CSSProperties
       })}
@@ -120,7 +120,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           variant="control"
           aria-label={minusBtnAriaLabel}
           isDisabled={isDisabled || value <= min}
-          onClick={evt => onMinus(evt, inputName)}
+          onClick={(evt) => onMinus(evt, inputName)}
           {...minusBtnProps}
         >
           <span className={css(styles.numberInputIcon)}>
@@ -144,7 +144,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           variant="control"
           aria-label={plusBtnAriaLabel}
           isDisabled={isDisabled || value >= max}
-          onClick={evt => onPlus(evt, inputName)}
+          onClick={(evt) => onPlus(evt, inputName)}
           {...plusBtnProps}
         >
           <span className={css(styles.numberInputIcon)}>