@patternfly/react-core 6.0.0 → 6.1.0-prerelease.10

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

@@ -87,7 +87,7 @@ exports[`simple fileupload 1`] = `
       </span>
     </div>
     <input
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -37,9 +37,8 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
     >
       <DropdownList>

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -36,9 +36,8 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
     >
       <DropdownList>

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

@@ -200,8 +200,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const iconToggle = (
-    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen}>
-      {icon || 'Select'}
+    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen} icon={icon}>
+      {icon ? '' : 'Select'}
     </MenuToggle>
   );
 

package/src/components/Menu/MenuContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popper } from '../../helpers/Popper/Popper';
+import { onToggleArrowKeydownDefault, Popper } from '../../helpers';
 
 export interface MenuPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
@@ -17,6 +17,7 @@ export interface MenuPopperProps {
   /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
   preventOverflow?: boolean;
 }
+
 export interface MenuContainerProps {
   /** Menu to be rendered */
   menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -33,6 +34,8 @@ export interface MenuContainerProps {
   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[];
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
@@ -55,10 +58,11 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
   toggle,
   toggleRef,
   onOpenChange,
+  onToggleKeydown,
   zIndex = 9999,
   popperProps,
   onOpenChangeKeys = ['Escape', 'Tab'],
-  shouldFocusFirstItemOnOpen = true,
+  shouldFocusFirstItemOnOpen = false,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0
 }: MenuContainerProps) => {
@@ -90,6 +94,14 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
           toggleRef.current?.focus();
         }
       }
+
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen) {
+          onToggleArrowKeydownDefault(event, menuRef);
+        }
+      }
     };
 
     const handleClick = (event: MouseEvent) => {
@@ -108,7 +120,16 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [focusTimeoutDelay, isOpen, menuRef, onOpenChange, onOpenChangeKeys, shouldPreventScrollOnItemFocus, toggleRef]);
+  }, [
+    focusTimeoutDelay,
+    isOpen,
+    menuRef,
+    onOpenChange,
+    onOpenChangeKeys,
+    onToggleKeydown,
+    shouldPreventScrollOnItemFocus,
+    toggleRef
+  ]);
 
   return (
     <Popper

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -20,7 +20,7 @@ export interface MenuToggleCheckboxProps
   /** Flag to set the default checked value of the checkbox when it is uncontrolled by React state.
    * To make the checkbox controlled instead use the isChecked prop, but do not use both.
    */
-  defaultChecked?: boolean | null;
+  defaultChecked?: boolean;
   /** A callback for when the checkbox selection changes */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
   /** Element to be rendered inside the <span> */

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

@@ -81,36 +81,24 @@ For most basic icons, it is recommended to wrap it inside our [icon component](/
 
 ```ts
 import React from 'react';
-import { MenuToggle, Icon } from '@patternfly/react-core';
+import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="primary"
   >
     Icon
   </MenuToggle>{' '}
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="secondary"
   >
     Icon
   </MenuToggle>{' '}
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="secondary"
     isDisabled
   >

package/src/components/Modal/Modal.tsx

@@ -60,7 +60,6 @@ export enum ModalVariant {
 }
 
 interface ModalState {
-  container: HTMLElement;
   ouiaStateId: string;
 }
 
@@ -68,6 +67,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
   static displayName = 'Modal';
   static currentId = 0;
   boxId = '';
+  backdropId = '';
 
   static defaultProps: PickOptional<ModalProps> = {
     isOpen: false,
@@ -80,10 +80,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
   constructor(props: ModalProps) {
     super(props);
     const boxIdNum = Modal.currentId++;
+    const backdropId = boxIdNum + 1;
     this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
+    this.backdropId = `pf-modal-part-${backdropId}`;
 
     this.state = {
-      container: undefined,
       ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
     };
   }
@@ -107,7 +108,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
     const target: HTMLElement = this.getElement(appendTo);
     const bodyChildren = target.children;
     for (const child of Array.from(bodyChildren)) {
-      if (child !== this.state.container) {
+      if (child.id !== this.backdropId) {
         hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
       }
     }
@@ -118,36 +119,31 @@ class Modal extends React.Component<ModalProps, ModalState> {
   componentDidMount() {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    const container = document.createElement('div');
-    this.setState({ container });
-    target.appendChild(container);
     target.addEventListener('keydown', this.handleEscKeyClick, false);
 
     if (this.props.isOpen) {
       target.classList.add(css(styles.backdropOpen));
-    } else {
-      target.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: ModalProps) {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     if (this.props.isOpen) {
       target.classList.add(css(styles.backdropOpen));
       this.toggleSiblingsFromScreenReaders(true);
     } else {
-      target.classList.remove(css(styles.backdropOpen));
-      this.toggleSiblingsFromScreenReaders(false);
+      if (prevProps.isOpen !== this.props.isOpen) {
+        target.classList.remove(css(styles.backdropOpen));
+        this.toggleSiblingsFromScreenReaders(false);
+      }
     }
   }
 
   componentWillUnmount() {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
     target.removeEventListener('keydown', this.handleEscKeyClick, false);
     target.classList.remove(css(styles.backdropOpen));
     this.toggleSiblingsFromScreenReaders(false);
@@ -155,7 +151,6 @@ class Modal extends React.Component<ModalProps, ModalState> {
 
   render() {
     const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       appendTo,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onEscapePress,
@@ -168,15 +163,15 @@ class Modal extends React.Component<ModalProps, ModalState> {
       elementToFocus,
       ...props
     } = this.props;
-    const { container } = this.state;
 
-    if (!canUseDOM || !container) {
+    if (!canUseDOM || !this.getElement(appendTo)) {
       return null;
     }
 
     return ReactDOM.createPortal(
       <ModalContent
         boxId={this.boxId}
+        backdropId={this.backdropId}
         aria-label={ariaLabel}
         aria-describedby={ariaDescribedby}
         aria-labelledby={ariaLabelledby}
@@ -187,7 +182,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         backdropClassName={props.backdropClassName}
         {...props}
       />,
-      container
+      this.getElement(appendTo)
     ) as React.ReactElement;
   }
 }

package/src/components/Modal/ModalContent.tsx

@@ -16,6 +16,8 @@ export interface ModalContentProps extends OUIAProps {
   'aria-labelledby'?: string;
   /** Id of the modal box container. */
   boxId: string;
+  /** Id of the backdrop. */
+  backdropId?: string;
   /** Content rendered inside the modal. */
   children: React.ReactNode;
   /** Additional classes added to the modal box. */
@@ -63,6 +65,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   width,
   maxWidth,
   boxId,
+  backdropId,
   disableFocusTrap = false,
   ouiaId,
   ouiaSafe = true,
@@ -109,7 +112,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     </ModalBox>
   );
   return (
-    <Backdrop className={css(backdropClassName)}>
+    <Backdrop className={css(backdropClassName)} id={backdropId}>
       <FocusTrap
         active={!disableFocusTrap}
         focusTrapOptions={{

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { css } from '../../../../../react-styles/dist/js';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
@@ -38,6 +39,32 @@ const ModalWithSiblings = () => {
   );
 };
 
+const ModalWithAdjacentModal = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [isModalMounted, setIsModalMounted] = React.useState(true);
+  const modalProps = { ...props, isOpen, appendTo: target, onClose: () => setIsOpen(false) };
+
+  return (
+    <>
+      <aside>Aside sibling</aside>
+      <article>Section sibling</article>
+      {isModalMounted && (
+        <>
+          <Modal {...modalProps}>
+            <button onClick={() => setIsModalMounted(false)}>Unmount Modal</button>
+          </Modal>
+          <Modal isOpen={false} onClose={() => {}}>
+            Modal closed for test
+          </Modal>
+          <Modal isOpen={false} onClose={() => {}}>
+            modal closed for test
+          </Modal>
+        </>
+      )}
+    </>
+  );
+};
+
 describe('Modal', () => {
   test('Modal creates a container element once for div', () => {
     render(<Modal {...props} />);
@@ -128,4 +155,22 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+
+  test('modal siblings have the aria-hidden attribute when it has adjacent modals', async () => {
+    const user = userEvent.setup();
+
+    render(<ModalWithAdjacentModal />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+    const unmountButton = screen.getByRole('button', { name: 'Unmount Modal' });
+
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+
+    await user.click(unmountButton);
+
+    expect(asideSibling).not.toHaveAttribute('aria-hidden');
+    expect(articleSibling).not.toHaveAttribute('aria-hidden');
+  });
 });

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

@@ -9,7 +9,7 @@ exports[`MultipleFileUpload renders custom class names 1`] = `
   >
     <input
       multiple=""
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />
@@ -27,7 +27,7 @@ exports[`MultipleFileUpload renders with expected class names when horizontal 1`
   >
     <input
       multiple=""
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />
@@ -45,7 +45,7 @@ exports[`MultipleFileUpload renders with expected class names when not horizonta
   >
     <input
       multiple=""
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -95,9 +95,8 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                   variant="plain"
                   onClick={onToggle}
                   isExpanded={isOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={isOpen}
               onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx

@@ -99,9 +99,8 @@ export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -88,9 +88,8 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx

@@ -62,9 +62,8 @@ export const OverflowMenuPersistent: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx

@@ -62,9 +62,8 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/Select/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
 import { Popper } from '../../helpers/Popper/Popper';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers';
 
 export interface SelectPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
@@ -62,6 +62,10 @@ export interface SelectProps extends MenuProps, OUIAProps {
   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[];
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
+  /** Select variant. For typeahead variant focus won't shift to menu items when pressing up/down arrows. */
+  variant?: 'default' | 'typeahead';
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
   /** @hide Forwarded ref */
@@ -95,6 +99,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   shouldFocusFirstItemOnOpen = false,
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
+  onToggleKeydown,
+  variant,
   isPlain,
   innerRef,
   zIndex = 9999,
@@ -144,6 +150,14 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
           toggleRef.current?.focus();
         }
       }
+
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen && variant !== 'typeahead') {
+          onToggleArrowKeydownDefault(event, menuRef);
+        }
+      }
     };
 
     const handleClick = (event: MouseEvent) => {
@@ -168,6 +182,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     toggleRef,
     onOpenChange,
     onOpenChangeKeys,
+    onToggleKeydown,
     shouldPreventScrollOnItemFocus,
     shouldFocusFirstItemOnOpen,
     focusTimeoutDelay

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -247,7 +247,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -241,7 +241,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-checkbox-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -260,7 +260,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -244,7 +244,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -251,7 +251,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList id="select-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -133,7 +133,8 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
+          {labelGroupContentRef?.current?.firstElementChild !== null &&
+            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
         </React.Fragment>
       );
     }

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -229,9 +229,8 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={onKebabToggle}
                       isExpanded={kebabIsOpen}
-                    >
-                      <EllipsisVIcon />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon />}
+                    />
                   )}
                   isOpen={kebabIsOpen}
                 >

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -231,9 +231,8 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -47,9 +47,8 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
               onClick={onToggle}
               variant="plain"
               aria-label="Tree view with actions example kebab toggle"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
         >
           <DropdownList>

package/src/demos/CardView/examples/CardView.tsx

@@ -427,9 +427,8 @@ export const CardViewBasic: React.FunctionComponent = () => {
                   variant="plain"
                   onClick={onToolbarKebabDropdownToggle}
                   isExpanded={isLowerToolbarKebabDropdownOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={isLowerToolbarKebabDropdownOpen}
               onOpenChange={(isOpen) => setIsLowerToolbarDropdownOpen(isOpen)}
@@ -518,9 +517,8 @@ export const CardViewBasic: React.FunctionComponent = () => {
                                 onCardKebabDropdownToggle(e, key.toString());
                               }}
                               isExpanded={!!state[key]}
-                            >
-                              <EllipsisVIcon />
-                            </MenuToggle>
+                              icon={<EllipsisVIcon />}
+                            />
                           )}
                           popperProps={{ position: 'right' }}
                         >

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -215,9 +215,8 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           onClick={onToggleClick}
           isExpanded={isOpen}
           style={{ width: 'auto' }}
-        >
-          <ThIcon />
-        </MenuToggle>
+          icon={<ThIcon />}
+        />
       )}
       ref={menuRef}
       onActionClick={onFavorite}