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

package/src/components/Label/examples/LabelFilled.tsx

@@ -21,13 +21,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label href="#filled">Grey link</Label>
       <Label href="#filled" onClose={() => Function.prototype}>
         Grey link removable
-      </Label>
-      <Label onClick={() => logColor('grey')}>Grey clickable</Label>
+      </Label>{' '}
+      <Label onClick={() => logColor('grey')}>Grey clickable</Label>{' '}
       <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
-      </Label>
+      </Label>{' '}
       <Label icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Grey label with icon that overflows
+      </Label>{' '}
+      <Label isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Grey link removable (disabled)
+      </Label>{' '}
+      <Label isDisabled icon={<CubeIcon />} onClick={() => logColor('grey')} onClose={() => Function.prototype}>
+        Grey clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -46,15 +52,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <Label color="blue" href="#filled" onClose={() => Function.prototype}>
         Blue link removable
-      </Label>
+      </Label>{' '}
       <Label color="blue" onClick={() => logColor('blue')}>
         Blue clickable
       </Label>
       <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="blue" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Blue label with icon that overflows
+      </Label>{' '}
+      <Label color="blue" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Blue link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="blue"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('blue')}
+        onClose={() => Function.prototype}
+      >
+        Blue clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -73,15 +91,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <Label color="green" href="#filled" onClose={() => Function.prototype}>
         Green link removable
-      </Label>
+      </Label>{' '}
       <Label color="green" onClick={() => logColor('green')}>
         Green clickable
       </Label>
       <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="green" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Green label with icon that overflows
+      </Label>{' '}
+      <Label color="green" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Green link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="green"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('green')}
+        onClose={() => Function.prototype}
+      >
+        Green clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -100,15 +130,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <Label color="orange" href="#filled" onClose={() => Function.prototype}>
         Orange link removable
-      </Label>
+      </Label>{' '}
       <Label color="orange" onClick={() => logColor('orange')}>
         Orange clickable
       </Label>
       <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="orange" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Orange label with icon that overflows
+      </Label>{' '}
+      <Label color="orange" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Orange link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="orange"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
+        Orange clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -127,15 +169,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <Label color="red" href="#filled" onClose={() => Function.prototype}>
         Red link removable
-      </Label>
+      </Label>{' '}
       <Label color="red" onClick={() => logColor('red')}>
         Red clickable
       </Label>
       <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="red" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Red label with icon that overflows
+      </Label>{' '}
+      <Label color="red" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Red link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="red"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('red')}
+        onClose={() => Function.prototype}
+      >
+        Red clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -181,15 +235,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <Label color="purple" href="#filled" onClose={() => Function.prototype}>
         Purple link removable
-      </Label>
+      </Label>{' '}
       <Label color="purple" onClick={() => logColor('purple')}>
         Purple clickable
       </Label>
       <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="purple" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Purple label with icon that overflows
+      </Label>{' '}
+      <Label color="purple" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Purple link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="purple"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
+        Purple clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -208,15 +274,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
         Cyan link removable
-      </Label>
+      </Label>{' '}
       <Label color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
       </Label>
       <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Cyan label with icon that overflows
+      </Label>{' '}
+      <Label color="cyan" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Cyan link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="cyan"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('cyan')}
+        onClose={() => Function.prototype}
+      >
+        Cyan clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -235,15 +313,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <Label color="gold" href="#filled" onClose={() => Function.prototype}>
         Gold link removable
-      </Label>
+      </Label>{' '}
       <Label color="gold" onClick={() => logColor('gold')}>
         Gold clickable
       </Label>
       <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Gold label with icon that overflows
+      </Label>{' '}
+      <Label color="gold" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Gold link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="gold"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('gold')}
+        onClose={() => Function.prototype}
+      >
+        Gold clickable removable (disabled)
       </Label>
       <br />
       <br />

package/src/components/Label/examples/LabelOutline.tsx

@@ -27,7 +27,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
         Grey link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" onClick={() => logColor('grey')}>
         Grey clickable
       </Label>
@@ -36,6 +36,18 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Grey label with icon that overflows
+      </Label>{' '}
+      <Label variant="outline" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Grey link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('grey')}
+        onClose={() => Function.prototype}
+      >
+        Grey clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -56,7 +68,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
         Blue link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
         Blue clickable
       </Label>
@@ -65,6 +77,26 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="blue" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Blue label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="blue"
+        isDisabled
+        icon={<CubeIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Blue link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="blue"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('blue')}
+        onClose={() => Function.prototype}
+      >
+        Blue clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -85,7 +117,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
         Green link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="green" onClick={() => logColor('green')}>
         Green clickable
       </Label>
@@ -94,6 +126,26 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="green" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Green label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="green"
+        isDisabled
+        icon={<CubeIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Green link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="green"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('green')}
+        onClose={() => Function.prototype}
+      >
+        Green clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -114,13 +166,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
         Orange link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
         Orange clickable
       </Label>
       <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="orange"
@@ -129,6 +181,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Orange label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="orange"
+        isDisabled
+        icon={<CubeIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Orange link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="orange"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
+        Orange clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -149,7 +221,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
         Red link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="red" onClick={() => logColor('red')}>
         Red clickable
       </Label>
@@ -218,13 +290,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
         Purple link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
         Purple clickable
       </Label>
       <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="purple"
@@ -233,6 +305,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Purple label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="purple"
+        isDisabled
+        icon={<CubeIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Purple link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="purple"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
+        Purple clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -253,7 +345,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
         Cyan link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
       </Label>
@@ -262,6 +354,26 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Cyan label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="cyan"
+        isDisabled
+        icon={<CubeIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Cyan link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="cyan"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('cyan')}
+        onClose={() => Function.prototype}
+      >
+        Cyan clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -282,7 +394,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
         Gold link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
         Gold clickable
       </Label>
@@ -291,6 +403,26 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label variant="outline" color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Gold label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="gold"
+        isDisabled
+        icon={<CubeIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Gold link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="gold"
+        isDisabled
+        icon={<CubeIcon />}
+        onClick={() => logColor('gold')}
+        onClose={() => Function.prototype}
+      >
+        Gold clickable removable (disabled)
       </Label>
       <br />
       <br />

package/src/components/Menu/Menu.tsx

@@ -156,8 +156,11 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       this.setState({ transitionMoveTarget: null });
     } else {
       const nextMenu = current.querySelector('#' + this.props.activeMenu) || current || null;
-      const nextMenuChildren = Array.from(nextMenu.getElementsByTagName('UL')[0].children);
-
+      const nextMenuLists = nextMenu.getElementsByTagName('UL');
+      if (nextMenuLists.length === 0) {
+        return;
+      }
+      const nextMenuChildren = Array.from(nextMenuLists[0].children);
       if (!this.state.currentDrilldownMenuId || nextMenu.id !== this.state.currentDrilldownMenuId) {
         this.setState({ currentDrilldownMenuId: nextMenu.id });
       } else {
@@ -167,7 +170,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       const nextTarget = nextMenuChildren.filter(
         (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
       )[0].firstChild;
-
       (nextTarget as HTMLElement).focus();
       (nextTarget as HTMLElement).tabIndex = 0;
     }

package/src/components/Menu/MenuContainer.tsx

@@ -69,8 +69,8 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
     };
 
     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) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,6 +3,15 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+
+export enum MenuToggleStatus {
+  success = 'success',
+  danger = 'danger',
+  warning = 'warning'
+}
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
@@ -37,9 +46,12 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
-  /** Icon or image rendered inside the toggle, before the children content. It is
-   * recommended to wrap icons in our icon component. For menu toggles that contain only an icon, we
-   * recommend passing the icon to this prop instead of passing it as children.
+  /** @beta Status styles of the menu toggle */
+  status?: 'success' | 'warning' | 'danger';
+  /** Overrides the status icon */
+  statusIcon?: React.ReactNode;
+  /** Optional icon or image rendered inside the toggle, before the children content. It is
+   * recommended to wrap most basic icons in our icon component.
    */
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
@@ -70,6 +82,8 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       isFullWidth,
       splitButtonOptions,
       variant,
+      status,
+      statusIcon,
       innerRef,
       onClick,
       'aria-label': ariaLabel,
@@ -78,8 +92,25 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
     const isPlain = variant === 'plain';
     const isPlainText = variant === 'plainText';
     const isTypeahead = variant === 'typeahead';
+
+    let _statusIcon = statusIcon;
+    if (!statusIcon) {
+      switch (status) {
+        case MenuToggleStatus.success:
+          _statusIcon = <CheckCircleIcon aria-hidden="true" />;
+          break;
+        case MenuToggleStatus.warning:
+          _statusIcon = <ExclamationTriangleIcon aria-hidden="true" />;
+          break;
+        case MenuToggleStatus.danger:
+          _statusIcon = <ExclamationCircleIcon aria-hidden="true" />;
+          break;
+      }
+    }
+
     const toggleControls = (
       <span className={css(styles.menuToggleControls)}>
+        {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
         <span className={css(styles.menuToggleToggleIcon)}>
           <CaretDownIcon aria-hidden />
         </span>
@@ -112,6 +143,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       isExpanded && styles.modifiers.expanded,
       variant === 'primary' && styles.modifiers.primary,
       variant === 'secondary' && styles.modifiers.secondary,
+      status && styles.modifiers[status],
       (isPlain || isPlainText) && styles.modifiers.plain,
       isPlainText && 'pf-m-text',
       isFullHeight && styles.modifiers.fullHeight,
@@ -154,8 +186,10 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             aria-label={ariaLabel}
             disabled={isDisabled}
             onClick={onClick}
+            {...(children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } })}
             {...otherProps}
           >
+            {children && <span className={css(styles.menuToggleText)}>{children}</span>}
             {toggleControls}
           </button>
         </div>

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -84,7 +84,7 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
       </span>
     );
     return (
-      <label className={css(styles.check, !children && styles.modifiers.standalone, className)} htmlFor={id}>
+      <label className={css(styles.check, !children && styles.modifiers.standalone, className)}>
         <input
           className={css(styles.checkInput)}
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
@@ -93,7 +93,7 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
           ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
           aria-invalid={!isValid}
           disabled={isDisabled}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
+          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}
           {...getOUIAProps(
             MenuToggleCheckbox.displayName,
             ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,

package/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -53,6 +53,21 @@ describe('menu toggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('shows success status', () => {
+    render(<MenuToggle status="success">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-success');
+  });
+
+  test('shows warning status', () => {
+    render(<MenuToggle status="warning">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-warning');
+  });
+
+  test('shows danger status', () => {
+    render(<MenuToggle status="danger">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-danger');
+  });
+
   test('split toggle passes onClick', async () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();