@patternfly/react-core 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -56,14 +56,17 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     }
     event.stopImmediatePropagation();
     const validOptions = isTree
-      ? (Array.from(
-          menuRef.current.querySelectorAll(
-            `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
-          )
-        ) as Element[])
+      ? (
+          Array.from(
+            menuRef.current.querySelectorAll(
+              `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
+            )
+          ) as Element[]
+        ).filter((item) => !item.closest(`.${styles.dualListSelectorList}[inert]`))
       : (Array.from(menuRef.current.getElementsByTagName('LI')) as Element[]).filter(
           (el) => !el.classList.contains('pf-m-disabled')
         );
+
     const activeElement = document.activeElement;
     handleArrows(
       event,

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -1,5 +1,7 @@
+import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorContext } from './DualListSelectorContext';
 import { DualListSelectorTreeItem } from './DualListSelectorTreeItem';
 
 export interface DualListSelectorTreeItemData {
@@ -68,11 +70,13 @@ export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeP
   isDisabled = false,
   ...props
 }: DualListSelectorTreeProps) => {
+  const { hasAnimations } = useContext(DualListSelectorContext);
   const dataToRender = typeof data === 'function' ? data() : data;
   const tree = dataToRender.map((item) => (
     <DualListSelectorTreeItem
       key={item.id}
       text={item.text}
+      hasAnimations={hasAnimations}
       id={item.id}
       defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
       onOptionCheck={onOptionCheck}

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -1,4 +1,4 @@
-import { memo, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useContext, useEffect, useRef, useState, cloneElement, Children, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
@@ -38,6 +38,11 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   isDisabled?: boolean;
   /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */
   useMemo?: boolean;
+  /** Flag indicating whether a tree dual list selector has animations. This will always render
+   * nested dual list selector items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
@@ -53,6 +58,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
+  hasAnimations,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -65,6 +71,15 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
 
+  const clonedChildren = Children.map(
+    children,
+    (child) =>
+      isValidElement(child) &&
+      cloneElement(child as React.ReactElement<any>, {
+        inert: isExpanded ? undefined : ''
+      })
+  );
+
   return (
     <li
       className={css(
@@ -156,7 +171,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
           </span>
         </div>
       </div>
-      {isExpanded && children}
+      {(isExpanded || hasAnimations) && clonedChildren}
     </li>
   );
 };

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

@@ -1,6 +1,37 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelector } from '../DualListSelector';
 import { DualListSelectorPane } from '../DualListSelectorPane';
 import { SearchInput } from '../../SearchInput';
+
+// The following tests can be removed as part of https://github.com/patternfly/patternfly-react/issues/11838
+describe('Opt-in animations', () => {
+  test(`Does not render with class ${styles.modifiers.animateExpand} by default`, () => {
+    render(<DualListSelector data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Does not render with class ${styles.modifiers.animateExpand} when hasAnimations is true and isTree is false`, () => {
+    render(<DualListSelector hasAnimations data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Does not render with class ${styles.modifiers.animateExpand} by default when isTree is true`, () => {
+    render(<DualListSelector isTree data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Renders with class ${styles.modifiers.animateExpand} when both isTree and hasAnimations are true`, () => {
+    render(<DualListSelector isTree hasAnimations data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
+  });
+});
+
+// Following tests should be moved to a separate DualListSelectorPane test file
 describe('DualListSelector', () => {
   test('basic', () => {
     const { asFragment } = render(<DualListSelectorPane id="basicTest" />);

package/src/components/DualListSelector/__tests__/DualListSelectorTreeItem.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorTreeItem } from '../DualListSelectorTreeItem';
+
+// The following tests checking for children to not be/to be rendered will need to be refactored
+// as part of https://github.com/patternfly/patternfly-react/issues/11838
+test('Does not render children by default', () => {
+  render(
+    <DualListSelectorTreeItem id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.queryByText('Children content')).not.toBeInTheDocument();
+});
+
+test('Renders children when defaultExpanded is true', () => {
+  render(
+    <DualListSelectorTreeItem defaultExpanded id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toBeVisible();
+});
+
+test('Renders children when hasAnimations is true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toBeVisible();
+});
+
+test('Renders children with inert attribute by default when hasAnimations is true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toHaveAttribute('inert', '');
+});
+
+test('Does not render children with inert attribute when hasAnimations and defaultExpanded are true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations defaultExpanded id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).not.toHaveAttribute('inert');
+});

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -283,7 +283,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   };
 
   return (
-    <DualListSelector isTree>
+    <DualListSelector hasAnimations isTree>
       {buildPane(false)}
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -12,6 +12,11 @@ export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTML
   isExpanded?: boolean;
   /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
+  /** Flag indicating whether an expandable form field group has animations. This will always render
+   * nested field group content rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExpandableProps> = ({
@@ -20,6 +25,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
   header,
   isExpanded = false,
   toggleAriaLabel,
+  hasAnimations,
   ...props
 }: FormFieldGroupExpandableProps) => {
   const [localIsExpanded, setIsExpanded] = useState(isExpanded);
@@ -32,6 +38,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
       isExpanded={localIsExpanded}
       toggleAriaLabel={toggleAriaLabel}
       onToggle={() => setIsExpanded(!localIsExpanded)}
+      hasAnimations={hasAnimations}
       {...props}
     >
       {children}

package/src/components/Form/FormGroupLabelHelp.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useRef } from 'react';
 import { Button, ButtonProps } from '../Button';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import { KeyTypes } from '../../helpers/constants';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 /** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
  * to our Popover component.
@@ -45,7 +45,7 @@ const FormGroupLabelHelpBase: React.FunctionComponent<FormGroupLabelHelpProps> =
       variant="plain"
       hasNoPadding
       {...props}
-      icon={<QuestionCircleIcon />}
+      icon={<HelpIcon />}
     />
   );
 };

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -18,6 +18,11 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
   onToggle?: () => void;
   /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
+  /** Flag indicating whether an expandable form field group has animations. This will always render
+   * nested field group content rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGroupProps> = ({
@@ -28,6 +33,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   isExpanded,
   onToggle,
   toggleAriaLabel,
+  hasAnimations,
   ...props
 }: InternalFormFieldGroupProps) => {
   const headerTitleText = header ? header.props.titleText : null;
@@ -40,7 +46,12 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   }
   return (
     <div
-      className={css(styles.formFieldGroup, isExpanded && isExpandable && styles.modifiers.expanded, className)}
+      className={css(
+        styles.formFieldGroup,
+        isExpanded && isExpandable && styles.modifiers.expanded,
+        hasAnimations && isExpandable && styles.modifiers.expandable,
+        className
+      )}
       role="group"
       {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id}` })}
       {...props}
@@ -59,8 +70,13 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
         </GenerateId>
       )}
       {header && header}
-      {(!isExpandable || (isExpandable && isExpanded)) && (
-        <div className={css(styles.formFieldGroupBody)}>{children}</div>
+      {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
+        <div
+          className={css(styles.formFieldGroupBody)}
+          {...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
+        >
+          {children}
+        </div>
       )}
     </div>
   );

package/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
+import styles from '@patternfly/react-styles/css/components/Form/form';
+
+test('Does not render children by default', () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.queryByText('Child content')).not.toBeInTheDocument();
+});
+
+test('Renders children when isExpanded is true', () => {
+  render(
+    <FormFieldGroupExpandable isExpanded toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).toBeInTheDocument();
+});
+
+test('Renders children with inert attribute by default when hasAnimations is true', () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).toHaveAttribute('inert', '');
+});
+
+test('Does not render children with inert attribute when hasAnimations and isExpanded are true', () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations isExpanded toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).not.toHaveAttribute('inert');
+});
+
+test(`Does not render with class ${styles.modifiers.expandable} by default`, () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});
+
+test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is true`, () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
+});

package/src/components/Form/examples/FormFieldGroups.tsx

@@ -52,6 +52,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         <TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
       </FormGroup>
       <FormFieldGroupExpandable
+        hasAnimations
         isExpanded
         toggleAriaLabel="Details"
         header={
@@ -67,6 +68,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         }
       >
         <FormFieldGroupExpandable
+          hasAnimations
           isExpanded
           toggleAriaLabel="Details"
           header={
@@ -97,6 +99,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           </FormGroup>
         </FormFieldGroupExpandable>
         <FormFieldGroupExpandable
+          hasAnimations
           toggleAriaLabel="Details"
           header={
             <FormFieldGroupHeader
@@ -125,6 +128,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           </FormGroup>
         </FormFieldGroupExpandable>
         <FormFieldGroupExpandable
+          hasAnimations
           toggleAriaLabel="Details"
           header={
             <FormFieldGroupHeader
@@ -173,6 +177,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         </FormGroup>
       </FormFieldGroupExpandable>
       <FormFieldGroupExpandable
+        hasAnimations
         toggleAriaLabel="Details"
         header={
           <FormFieldGroupHeader
@@ -194,6 +199,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         </FormGroup>
       </FormFieldGroupExpandable>
       <FormFieldGroupExpandable
+        hasAnimations
         isExpanded
         toggleAriaLabel="Details"
         header={
@@ -273,7 +279,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         header={
           <FormFieldGroupHeader
             titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
-            titleDescription="Field group 4 description text."
+            titleDescription="Field group 4 description text fdgsdg."
             actions={
               <>
                 <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -116,7 +116,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -189,7 +189,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -117,7 +117,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/Masthead/examples/MastheadBasic.tsx

@@ -7,13 +7,12 @@ import {
   MastheadContent,
   Button
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadBasic: React.FunctionComponent = () => (
   <Masthead id="basic-example">
     <MastheadMain>
       <MastheadToggle>
-        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>

package/src/components/Masthead/examples/MastheadBasicMixedContent.tsx

@@ -9,13 +9,12 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadBasicMixedContent: React.FunctionComponent = () => (
   <Masthead id="basic-mixed">
     <MastheadMain>
       <MastheadToggle>
-        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>

package/src/components/Masthead/examples/MastheadDisplayInline.tsx

@@ -7,13 +7,12 @@ import {
   MastheadContent,
   Button
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayInline: React.FunctionComponent = () => (
   <Masthead id="inline-masthead" display={{ default: 'inline' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>

package/src/components/Masthead/examples/MastheadDisplayStack.tsx

@@ -7,13 +7,12 @@ import {
   MastheadContent,
   Button
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayStack: React.FunctionComponent = () => (
   <Masthead id="stack-masthead" display={{ default: 'stack' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>

package/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx

@@ -7,13 +7,12 @@ import {
   MastheadContent,
   Button
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
   <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>

package/src/components/Masthead/examples/MastheadInsets.tsx

@@ -7,13 +7,12 @@ import {
   MastheadContent,
   Button
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadInsets: React.FunctionComponent = () => (
   <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>

package/src/components/Masthead/examples/MastheadLogoCustomComponent.tsx

@@ -8,14 +8,13 @@ import {
   Button,
   Brand
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const MastheadLogoCustomComponent: React.FunctionComponent = () => (
   <Masthead id="icon-router-link">
     <MastheadMain>
       <MastheadToggle>
-        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component={(props) => <a {...props} href="#" />}>

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,6 +3,7 @@ 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 CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 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';
@@ -44,6 +45,8 @@ export interface MenuToggleProps
   isFullWidth?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
+  /** Flag indicating whether the toggle is a settings toggle. This will override the icon property */
+  isSettings?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
@@ -100,6 +103,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
       isFullHeight,
       isFullWidth,
       isPlaceholder,
+      isSettings,
       splitButtonItems,
       variant,
       status,
@@ -144,7 +148,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
 
     const content = (
       <>
-        {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
+        {(icon || isSettings) && <span className={css(styles.menuToggleIcon)}>{isSettings ? <CogIcon /> : icon}</span>}
         {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
         {isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (
@@ -177,6 +181,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,
       isPlaceholder && styles.modifiers.placeholder,
+      isSettings && styles.modifiers.settings,
       size === MenuToggleSize.sm && styles.modifiers.small,
       className
     );