@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

package/src/components/Menu/Menu.tsx

@@ -139,12 +139,11 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
   handleDrilldownTransition = (event: TransitionEvent) => {
     const current = this.menuRef.current;
-
     if (
       !current ||
-      (current !== (event.target as HTMLElement).closest('.pf-c-menu') &&
-        !Array.from(current.getElementsByClassName('pf-v5-c-menu')).includes(
-          (event.target as HTMLElement).closest('.pf-c-menu')
+      (current !== (event.target as HTMLElement).closest(`.${styles.menu}`) &&
+        !Array.from(current.getElementsByClassName(styles.menu)).includes(
+          (event.target as HTMLElement).closest(`.${styles.menu}`)
         ))
     ) {
       return;
@@ -163,9 +162,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
         // if the drilldown transition ends on the same menu, do not focus the first item
         return;
       }
-
       const nextTarget = nextMenuChildren.filter(
-        (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+        (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
       )[0].firstChild;
 
       (nextTarget as HTMLElement).focus();
@@ -178,10 +176,10 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const activeElement = document.activeElement;
 
     if (
-      (event.target as HTMLElement).closest('.pf-c-menu') !== this.activeMenu &&
-      !(event.target as HTMLElement).classList.contains('pf-c-breadcrumb__link')
+      (event.target as HTMLElement).closest(`.${styles.menu}`) !== this.activeMenu &&
+      !(event.target as HTMLElement).classList.contains('pf-v5-c-breadcrumb__link')
     ) {
-      this.activeMenu = (event.target as HTMLElement).closest('.pf-c-menu');
+      this.activeMenu = (event.target as HTMLElement).closest(`.${styles.menu}`);
       this.setState({ disableHover: true });
     }
 
@@ -192,8 +190,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const parentMenu = this.activeMenu;
     const key = event.key;
     const isFromBreadcrumb =
-      activeElement.classList.contains('pf-c-breadcrumb__link') ||
-      activeElement.classList.contains('pf-c-dropdown__toggle');
+      activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
+      activeElement.classList.contains('pf-v5-c-dropdown__toggle');
 
     if (key === ' ' || key === 'Enter') {
       event.preventDefault();
@@ -204,10 +202,10 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
           (parentMenu.parentElement.firstChild as HTMLElement).tabIndex = 0;
           this.setState({ transitionMoveTarget: parentMenu.parentElement.firstChild as HTMLElement });
         } else {
-          if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains('pf-c-menu')) {
+          if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains(styles.menu)) {
             const childItems = Array.from(
               activeElement.nextElementSibling.getElementsByTagName('UL')[0].children
-            ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+            ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
 
             (activeElement as HTMLElement).tabIndex = -1;
             (childItems[0].firstChild as HTMLElement).tabIndex = 0;
@@ -225,13 +223,13 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     if (isDrilldown) {
       return this.activeMenu
         ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter(
-            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
           )
         : [];
     } else {
       return this.menuRef.current
         ? Array.from(this.menuRef.current.getElementsByTagName('LI')).filter(
-            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
           )
         : [];
     }
@@ -297,19 +295,19 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             isActiveElement={(element: Element) =>
               document.activeElement.closest('li') === element || // if element is a basic MenuItem
               document.activeElement.parentElement === element ||
-              document.activeElement.closest('.pf-c-menu__search') === element || // if element is a MenuSearch
+              document.activeElement.closest(`.${styles.menuSearch}`) === element || // if element is a MenuSearch
               (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element)
             }
             getFocusableElement={(navigableElement: Element) =>
-              (navigableElement.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
-              ((navigableElement.firstChild as Element).tagName === 'LABEL' &&
+              (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
+              ((navigableElement.firstChild as Element)?.tagName === 'LABEL' &&
                 navigableElement.querySelector('input')) || // for MenuItem checkboxes
               (navigableElement.firstChild as Element)
             }
             noHorizontalArrowHandling={
               document.activeElement &&
-              (document.activeElement.classList.contains('pf-c-breadcrumb__link') ||
-                document.activeElement.classList.contains('pf-c-dropdown__toggle'))
+              (document.activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
+                document.activeElement.classList.contains('pf-v5-c-dropdown__toggle'))
             }
             noEnterHandling
             noSpaceHandling

package/src/components/Menu/MenuContainer.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Popper } from '../../helpers/Popper/Popper';
+
+export interface MenuPopperProps {
+  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+}
+export interface MenuContainerProps {
+  /** Menu to be rendered */
+  menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  /** Reference to the menu */
+  menuRef: React.RefObject<any>;
+  /** Toggle to be rendered */
+  toggle: React.ReactNode;
+  /** Reference to the toggle */
+  toggleRef: React.RefObject<any>;
+  /** Flag to indicate if menu is opened.*/
+  isOpen: boolean;
+  /** Callback to change the open state of the menu.
+   * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onOpenChangeKeys?: string[];
+  /** z-index of the dropdown menu */
+  zIndex?: number;
+  /** Additional properties to pass to the Popper */
+  popperProps?: MenuPopperProps;
+}
+
+/**
+ * Container that links a menu and menu toggle together, to handle basic keyboard input and control the opening and closing of a menu.
+ * This component is currently in beta and is subject to change.
+ */
+export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
+  menu,
+  menuRef,
+  isOpen,
+  toggle,
+  toggleRef,
+  onOpenChange,
+  zIndex = 9999,
+  popperProps,
+  onOpenChangeKeys = ['Escape', 'Tab']
+}: MenuContainerProps) => {
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      // Close the menu on tab or escape if onOpenChange is provided
+      if (
+        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
+      ) {
+        if (onOpenChangeKeys.includes(event.key)) {
+          onOpenChange(false);
+          toggleRef.current?.focus();
+        }
+      }
+    };
+
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector(
+            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+          );
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
+      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
+      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
+        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+          onOpenChange(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
+    };
+  }, [isOpen, menuRef, onOpenChange, onOpenChangeKeys, toggleRef]);
+
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      zIndex={zIndex}
+      {...popperProps}
+    />
+  );
+};
+MenuContainer.displayName = 'MenuContainer';

package/src/components/Menu/MenuGroup.tsx

@@ -28,7 +28,7 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
 }: MenuGroupProps) => {
   const Wrapper = typeof label === 'function' ? label : HeadingLevel;
   return (
-    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+    <section {...props} className={css(styles.menuGroup, className)} ref={innerRef}>
       <>
         {['function', 'string'].includes(typeof label) ? (
           <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>

package/src/components/Menu/MenuItem.tsx

@@ -24,7 +24,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** @beta Flag indicating the item has a checkbox */
+  /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;
@@ -193,7 +193,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
         const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
-          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
         );
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
@@ -348,7 +348,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
               {hasCheckbox && (
-                <span className={css('pf-c-menu__item-check')}>
+                <span className={css(styles.menuItemCheck)}>
                   <Checkbox
                     id={randomId}
                     component="span"

package/src/components/Menu/MenuSearchInput.tsx

@@ -10,6 +10,6 @@ export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
 
 export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
   // Update to use the styles object when core adds the class
-  <div {...props} className={css('pf-c-menu__search-input', props.className)} ref={ref} />
+  <div {...props} className={css('pf-v5-c-menu__search-input', props.className)} ref={ref} />
 ));
 MenuSearchInput.displayName = 'MenuSearchInput';

package/src/components/Menu/examples/Menu.md

@@ -2,8 +2,20 @@
 id: Menu
 section: components
 subsection: menus
-cssPrefix: pf-c-menu
-propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent', 'MenuSearch', 'MenuSearchInput', 'MenuGroup']
+cssPrefix: pf-v5-c-menu
+propComponents:
+  [
+    'Menu',
+    'MenuList',
+    'MenuItem',
+    'MenuItemAction',
+    'MenuContent',
+    'MenuSearch',
+    'MenuSearchInput',
+    'MenuGroup',
+    'MenuContainer',
+    'MenuPopperProps'
+  ]
 ouia: true
 ---
 
@@ -81,7 +93,7 @@ Use the `description` property to add short descriptive text below any menu item
 
 Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
 
-```ts file="./MenuWithCheckbox.tsx" isBeta
+```ts file="./MenuWithCheckbox.tsx"
 
 ```
 

package/src/components/Menu/index.ts

@@ -9,3 +9,4 @@ export * from './MenuList';
 export * from './MenuItemAction';
 export * from './DrilldownMenu';
 export * from './MenuBreadcrumb';
+export * from './MenuContainer';

package/src/components/MenuToggle/examples/MenuToggle.css

@@ -1,3 +1,3 @@
-#ws-react-c-menu-toggle-primary .pf-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-c-menu-toggle {
+#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
     vertical-align: bottom;
 }

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

@@ -2,7 +2,7 @@
 id: Menu toggle
 section: components
 subsection: menus
-cssPrefix: pf-c-menu-toggle
+cssPrefix: pf-v5-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 ---
 

package/src/components/Modal/examples/Modal.md

@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-c-modal-box
+cssPrefix: pf-v5-c-modal-box
 propComponents: ['Modal']
 ouia: true
 ---

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -81,11 +81,11 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
             )}
           >
             <DropdownList>
-              <DropdownItem itemId={0} key="action">
+              <DropdownItem value={0} key="action">
                 Action
               </DropdownItem>
               <DropdownItem
-                itemId={1}
+                value={1}
                 key="link"
                 to="#default-link2"
                 // Prevent the default onClick functionality for example purposes
@@ -93,10 +93,10 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
               >
                 Link
               </DropdownItem>
-              <DropdownItem itemId={2} isDisabled key="disabled action">
+              <DropdownItem value={2} isDisabled key="disabled action">
                 Disabled Action
               </DropdownItem>
-              <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+              <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
                 Disabled Link
               </DropdownItem>
             </DropdownList>

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { DropEvent, DropzoneOptions, useDropzone } from 'react-dropzone';
+import { DropzoneOptions, useDropzone } from 'react-dropzone';
+import { DropEvent } from '../../helpers/typeUtils';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -66,7 +66,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
       <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+        <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
           {children}
         </ul>
       </ExpandableSection>

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -54,7 +54,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
-  /** @beta Additional content related to the status item. */
+  /** Additional content related to the status item. */
   progressHelperText?: React.ReactNode;
 }
 

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -48,7 +48,7 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -119,7 +119,7 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -180,7 +180,7 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -239,7 +239,7 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -2,7 +2,7 @@
 id: Multiple file upload
 section: components
 subsection: file-upload
-cssPrefix: pf-c-multiple-file-upload
+cssPrefix: pf-v5-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 ---
@@ -55,7 +55,9 @@ The "Demonstrate error reporting by forcing uploads to fail" checkbox shows how
 
 ## Types
 
-Multiple file upload uses both the `DropEvent` and `DropzoneOptions` types from react-dropzone. The `DropEvent` type is a union comprised of the following types:
+Multiple file upload uses the `DropzoneOptions` type from react-dropzone. It is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).
+
+Additionally, it calls the `onFileDrop` callback with an event of type `DropEvent`. `DropEvent` is a union comprised of the following types:
 
 ```noLive
  React.DragEvent<HTMLElement>
@@ -63,5 +65,3 @@ Multiple file upload uses both the `DropEvent` and `DropzoneOptions` types from
  | DragEvent
  | Event
 ```
-
-`DropzoneOptions` is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -6,9 +6,9 @@ import {
   MultipleFileUploadStatusItem,
   Checkbox,
   HelperText,
-  HelperTextItem
+  HelperTextItem,
+  DropEvent
 } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {

package/src/components/Nav/NavItem.tsx

@@ -85,7 +85,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   };
 
   const onMouseOver = (event: React.MouseEvent) => {
-    const evtContainedInFlyout = (event.target as HTMLElement).closest('.pf-c-nav__item.pf-m-flyout');
+    const evtContainedInFlyout = (event.target as HTMLElement).closest(`.${styles.navItem}.pf-m-flyout`);
     if (hasFlyout && !flyoutVisible) {
       showFlyout(true);
     } else if (flyoutRef !== null && !evtContainedInFlyout) {
@@ -120,7 +120,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
     // We only want the NavItem to handle closing a flyout menu if only the first level flyout is open.
     // Otherwise, MenuItem should handle closing its flyouts
-    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll('.pf-c-menu').length === 1) {
+    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll(`.${styles.menu}`).length === 1) {
       if (flyoutVisible) {
         event.stopPropagation();
         event.preventDefault();
@@ -145,7 +145,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       if (flyoutVisible) {
         const flyoutItems = Array.from(
           (popperRef.current as HTMLElement).getElementsByTagName('UL')[0].children
-        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
         flyoutTarget.focus();

package/src/components/Nav/examples/Nav.md

@@ -1,7 +1,7 @@
 ---
 id: Navigation
 section: components
-cssPrefix: pf-c-nav
+cssPrefix: pf-v5-c-nav
 propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'NavExpandable']
 ouia: true
 ---

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -1,7 +1,7 @@
 ---
 id: Notification badge
 section: components
-cssPrefix: pf-c-notification-badge
+cssPrefix: pf-v5-c-notification-badge
 propComponents: ['NotificationBadge']
 ---
 

package/src/components/NotificationDrawer/NotificationDrawerList.tsx

@@ -22,7 +22,7 @@ export const NotificationDrawerList: React.FunctionComponent<NotificationDrawerL
 }: NotificationDrawerListProps) => (
   <ul
     {...props}
-    className={css('pf-c-notification-drawer__list', className)}
+    className={css('pf-v5-c-notification-drawer__list', className)}
     hidden={isHidden}
     role="list"
     aria-label={ariaLabel}

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

@@ -3,7 +3,7 @@
 exports[`NotificationDrawerList drawer list with hidden applied  1`] = `
 <DocumentFragment>
   <ul
-    class="pf-c-notification-drawer__list"
+    class="pf-v5-c-notification-drawer__list"
     hidden=""
     role="list"
   />
@@ -13,7 +13,7 @@ exports[`NotificationDrawerList drawer list with hidden applied  1`] = `
 exports[`NotificationDrawerList renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <ul
-    class="pf-c-notification-drawer__list"
+    class="pf-v5-c-notification-drawer__list"
     role="list"
   />
 </DocumentFragment>

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -1,7 +1,7 @@
 ---
 id: Notification drawer
 section: components
-cssPrefix: pf-c-notification-drawer
+cssPrefix: pf-v5-c-notification-drawer
 propComponents:
   [
     'NotificationDrawer',

package/src/components/NumberInput/NumberInput.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/NumberInput/number-i
 import { css } from '@patternfly/react-styles';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
 import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
@@ -116,41 +116,47 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
     >
       {unit && unitPosition === 'before' && numberInputUnit}
       <InputGroup>
-        <Button
-          variant="control"
-          aria-label={minusBtnAriaLabel}
-          isDisabled={isDisabled || value <= min}
-          onClick={(evt) => onMinus(evt, inputName)}
-          {...minusBtnProps}
-        >
-          <span className={css(styles.numberInputIcon)}>
-            <MinusIcon aria-hidden="true" />
-          </span>
-        </Button>
-        <TextInput
-          {...inputProps}
-          type="number"
-          value={value}
-          name={inputName}
-          aria-label={inputAriaLabel}
-          {...(isDisabled && { isDisabled })}
-          {...(onChange && { onChange: (event, _value) => onChange(event) })}
-          onBlur={handleBlur}
-          {...(!onChange && { isReadOnly: true })}
-          onKeyDown={keyDownHandler}
-          validated={validated}
-        />
-        <Button
-          variant="control"
-          aria-label={plusBtnAriaLabel}
-          isDisabled={isDisabled || value >= max}
-          onClick={(evt) => onPlus(evt, inputName)}
-          {...plusBtnProps}
-        >
-          <span className={css(styles.numberInputIcon)}>
-            <PlusIcon aria-hidden="true" />
-          </span>
-        </Button>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            aria-label={minusBtnAriaLabel}
+            isDisabled={isDisabled || value <= min}
+            onClick={(evt) => onMinus(evt, inputName)}
+            {...minusBtnProps}
+          >
+            <span className={css(styles.numberInputIcon)}>
+              <MinusIcon aria-hidden="true" />
+            </span>
+          </Button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <TextInput
+            {...inputProps}
+            type="number"
+            value={value}
+            name={inputName}
+            aria-label={inputAriaLabel}
+            {...(isDisabled && { isDisabled })}
+            {...(onChange && { onChange: (event, _value) => onChange(event) })}
+            onBlur={handleBlur}
+            {...(!onChange && { isReadOnly: true })}
+            onKeyDown={keyDownHandler}
+            validated={validated}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            aria-label={plusBtnAriaLabel}
+            isDisabled={isDisabled || value >= max}
+            onClick={(evt) => onPlus(evt, inputName)}
+            {...plusBtnProps}
+          >
+            <span className={css(styles.numberInputIcon)}>
+              <PlusIcon aria-hidden="true" />
+            </span>
+          </Button>
+        </InputGroupItem>
       </InputGroup>
       {unit && unitPosition === 'after' && numberInputUnit}
     </div>