@patternfly/react-core 6.3.0-prerelease.3 → 6.3.0-prerelease.30

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
     );

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

@@ -8,7 +8,7 @@ import { render, screen } from '@testing-library/react';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 import '@testing-library/jest-dom';
 
-describe('menu toggle', () => {
+describe('Old Snapshot tests - remove when refactoring', () => {
   test('renders successfully', () => {
     const { asFragment } = render(<MenuToggle>Toggle</MenuToggle>);
     expect(asFragment()).toMatchSnapshot();
@@ -53,54 +53,68 @@ describe('menu toggle', () => {
     const { asFragment } = render(<MenuToggle badge={<Badge>badge</Badge>}>Toggle</MenuToggle>);
     expect(asFragment()).toMatchSnapshot();
   });
+});
 
-  // Old snapshot tests end here; following tests should be kept when refactoring
-  test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
-    render(<MenuToggle size="sm">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
-  });
+test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
+  render(<MenuToggle size="sm">Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
+});
 
-  test(`Renders with class ${styles.modifiers.success} when status="success" is passed`, () => {
-    render(<MenuToggle status="success">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
-  });
+test(`Renders with class ${styles.modifiers.success} when status="success" is passed`, () => {
+  render(<MenuToggle status="success">Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
+});
 
-  test(`Renders with class ${styles.modifiers.warning} when status="success" is passed`, () => {
-    render(<MenuToggle status="warning">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.warning);
-  });
+test(`Renders with class ${styles.modifiers.warning} when status="success" is passed`, () => {
+  render(<MenuToggle status="warning">Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.warning);
+});
 
-  test(`Renders with class ${styles.modifiers.danger} when status="success" is passed`, () => {
-    render(<MenuToggle status="danger">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.danger);
-  });
+test(`Renders with class ${styles.modifiers.danger} when status="success" is passed`, () => {
+  render(<MenuToggle status="danger">Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.danger);
+});
 
-  test('split toggle passes onClick', async () => {
-    const mockClick = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <MenuToggle
-        onClick={mockClick}
-        splitButtonItems={[
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-disabled-example"
-            key="split-checkbox-with-text-disabled"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]}
-        aria-label="Menu toggle with checkbox split button and text"
-      />
-    );
-
-    await user.click(screen.getByRole(`button`) as Element);
-    expect(mockClick).toHaveBeenCalled();
-  });
+test('split toggle passes onClick', async () => {
+  const mockClick = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <MenuToggle
+      onClick={mockClick}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-with-text-disabled-example"
+          key="split-checkbox-with-text-disabled"
+          aria-label="Select all"
+        >
+          10 selected
+        </MenuToggleCheckbox>
+      ]}
+      aria-label="Menu toggle with checkbox split button and text"
+    />
+  );
+
+  await user.click(screen.getByRole(`button`) as Element);
+  expect(mockClick).toHaveBeenCalled();
+});
 
-  test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => {
-    render(<MenuToggle isPlaceholder>Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.placeholder);
-  });
+test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => {
+  render(<MenuToggle isPlaceholder>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.placeholder);
+});
+
+test(`Renders with class ${styles.modifiers.settings} when isSettings is passed`, () => {
+  render(<MenuToggle isSettings>Settings</MenuToggle>);
+
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.settings);
+});
+
+test('Does not render custom icon when icon prop and isSettings are passed', () => {
+  render(
+    <MenuToggle isSettings icon={<div>Custom icon</div>}>
+      Settings
+    </MenuToggle>
+  );
+  expect(screen.queryByText('Custom icon')).not.toBeInTheDocument();
 });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`menu toggle passes additional classes 1`] = `
+exports[`Old Snapshot tests - remove when refactoring passes additional classes 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -40,7 +40,7 @@ exports[`menu toggle passes additional classes 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle renders successfully 1`] = `
+exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -80,7 +80,7 @@ exports[`menu toggle renders successfully 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows badge 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -129,7 +129,7 @@ exports[`menu toggle shows badge 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows icon 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -186,7 +186,7 @@ exports[`menu toggle shows icon 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isDisabled 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -227,7 +227,7 @@ exports[`menu toggle shows isDisabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isExpanded 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="true"
@@ -267,7 +267,7 @@ exports[`menu toggle shows isExpanded 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isPlain 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -298,7 +298,7 @@ exports[`menu toggle shows isPlain 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isPrimary 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -338,7 +338,7 @@ exports[`menu toggle shows isPrimary 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows plain text 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"

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

@@ -8,7 +8,7 @@ propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 
 import { Fragment, useState } from 'react';
 import './MenuToggle.css'
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -70,38 +70,22 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 </Fragment>
 ```
 
-### With icons
+### Settings toggle
+
+To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
+```ts file="./MenuToggleSettings.tsx"
+
+```
+
+### Custom icons
+
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `PlusIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+```ts file="./MenuToggleCustomIcon.tsx"
 
-<Fragment>
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="primary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-    isDisabled
-  >
-    Icon
-  </MenuToggle>
-</Fragment>;
 ```
 
 ### With avatar and text
@@ -202,13 +186,13 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`. 
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
-### Split toggle with checkbox and toggle text 
+### Split toggle with checkbox and toggle text
 
 To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
 

package/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx

@@ -0,0 +1,17 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const MenuToggleCustomIcon: React.FC = () => (
+  <Fragment>
+    <MenuToggle icon={<PlusIcon />} variant="primary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary" isDisabled>
+      Icon
+    </MenuToggle>
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSettings.tsx

@@ -0,0 +1,8 @@
+import { Fragment } from 'react/jsx-runtime';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSettings: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle isSettings>Settings</MenuToggle> <MenuToggle isSettings variant="plain" aria-label="Settings" />
+  </Fragment>
+);

package/src/components/Nav/NavExpandable.tsx

@@ -141,7 +141,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                 </button>
               )}
             </PageSidebarContext.Consumer>
-            <section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
+            <section
+              className={css(styles.navSubnav)}
+              aria-labelledby={this.id}
+              hidden={expandedState ? null : true}
+              {...(!expandedState && { inert: '' })}
+            >
               {srText && (
                 <h2 className="pf-v6-screen-reader" id={this.id}>
                   {srText}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -39,6 +39,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       aria-labelledby="''"
       class="pf-v6-c-nav__subnav"
       hidden=""
+      inert=""
     >
       <h2
         class="pf-v6-screen-reader"

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NavExpandable } from '../NavExpandable';
+
+test('Renders with the inert attribute by default', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).toHaveAttribute('inert', '');
+});
+
+test('Does not render with the inert attribute when isExpanded is true', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" isExpanded={true}></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
+});