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

package/src/components/Button/examples/Button.md

@@ -23,25 +23,27 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the `variant` property.
 
 ```ts file="./ButtonVariations.tsx"
+
 ```
 
-| Variant | Description|
-| --- | ---|
-| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.|
-| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
-| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.  |
-| Danger | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `isDanger` property to apply similar styling. |
-| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
-| Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
-| Plain | Plain buttons have no styling and are intended to be labeled with icons. |
-| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
-| Stateful | Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `read`, `unread` and `attention`.
+| Variant   | Description                                                                                                                                                                                                                                                                                              |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Primary   | Primary buttons are the most visually prominent variant. Use for the most important call to action.                                                                                                                                                                                                      |
+| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons.                                                                                                                                                   |
+| Tertiary  | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.                                                                                                                                                   |
+| Danger    | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `isDanger` property to apply similar styling.                                                                         |
+| Warning   | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way.                                                                                                                                                                      |
+| Link      | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property. |
+| Plain     | Plain buttons have no styling and are intended to be labeled with icons.                                                                                                                                                                                                                                 |
+| Control   | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group).                                                                                                                                                     |
+| Stateful  | Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `read`, `unread` and `attention`.                                                                                                                                                                              |
 
 ### Disabled buttons
 
 To indicate that an action is currently unavailable, all button variations can be disabled using the `isDisabled` property.
 
 ```ts file="./ButtonDisabled.tsx"
+
 ```
 
 ### Small buttons
@@ -49,13 +51,15 @@ To indicate that an action is currently unavailable, all button variations can b
 To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `"sm"` value for the `size` property.
 
 ```ts file="./ButtonSmall.tsx"
+
 ```
 
 ### Call to action (CTA) buttons
 
-CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `"lg"` value for the `size` property. 
+CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `"lg"` value for the `size` property.
 
 ```ts file="./ButtonCallToAction.tsx"
+
 ```
 
 ### Block level buttons
@@ -63,13 +67,15 @@ CTA buttons and links direct users to complete an action. Primary, secondary, te
 Block level buttons span the full width of the parent element and can be enabled using the `isBlock` property.
 
 ```ts file="./ButtonBlock.tsx"
+
 ```
 
 ### Progress indicators
 
-Progress indicators can be added to buttons to identify that an action is in progress after a click. 
+Progress indicators can be added to buttons to identify that an action is in progress after a click.
 
 ```ts file="./ButtonProgress.tsx"
+
 ```
 
 ### Links as buttons
@@ -77,6 +83,7 @@ Progress indicators can be added to buttons to identify that an action is in pro
 Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use `component="a"` and an `href` property to designate the button's target link.
 
 ```ts file="./ButtonLinks.tsx"
+
 ```
 
 ### Inline link as span
@@ -84,6 +91,7 @@ Buttons that link to another resource may take the form of primary, secondary, t
 Inline links should use `component="span"` and the `isInline` property to wrap inline with surrounding text.
 
 ```ts file="./ButtonInlineSpanLink.tsx"
+
 ```
 
 ### Custom component
@@ -91,6 +99,7 @@ Inline links should use `component="span"` and the `isInline` property to wrap i
 In addition to being able to pass a string to the `component` property, you can provide more fine-tuned customization by passing a callback that returns a component.
 
 ```ts file="./ButtonCustomComponent.tsx"
+
 ```
 
 ### Aria-disabled examples
@@ -102,6 +111,7 @@ Buttons that are aria-disabled are similar to normal disabled buttons, except th
 Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.
 
 ```ts file="./ButtonAriaDisabled.tsx"
+
 ```
 
 ### Button with count
@@ -109,6 +119,7 @@ Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furt
 Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.
 
 ```ts file="./ButtonWithCount.tsx"
+
 ```
 
 ### Plain with no padding
@@ -116,6 +127,7 @@ Buttons can display a `count` in the form of a badge to indicate some value or n
 To display a plain/icon button inline with text, use `noPadding` prop in addition to `variant="plain"`.
 
 ```ts file="./ButtonPlainHasNoPadding.tsx"
+
 ```
 
 ### Stateful
@@ -123,13 +135,37 @@ To display a plain/icon button inline with text, use `noPadding` prop in additio
 Stateful buttons are ideal for displaying the state of notifications. Use `variant="stateful"` alongside with the `state` property, which can have these 3 values: `read`, `unread` (used as default) and `attention` (which means unread and requires attention).
 
 ```ts file="./ButtonStateful.tsx"
+
 ```
 
+## Animated examples
+
+The following `<Button>` implementations have animations built into them. When using one of the following implementations, the `icon` property will be overridden due to the animations needing specific icons internally.
+
 ### Favorite
 
 You can pass both the `isFavorite` and `variant="plain"` properties into the `<Button>` to create a favorite button. Passing the `isFavorited` property will determine the current favorited state and update styling accordingly.
 
 ```ts file = "./ButtonFavorite.tsx"
+
+```
+
+### Settings
+
+For a "settings" button with animations on hover and focus, you can pass the `isSettings` property into either a `variant="plain"` or `variant="control"` button.
+
+```ts file="./ButtonSettings.tsx"
+
+```
+
+### Hamburger
+
+For a "hamburger" button (`fa-bars`) that will animate based on the `hamburgerVariant` property, you can pass the `isHamburger` property. This will render the default icon for a hamburger button, and updating the `hamburgerVariant` property with a value of either "expand" or "collapse" will change the icon accordingly with an animation on hover and focus.
+
+When used within a PatternFly `<Masthead>`, the animations and icon updates will occur automatically. See one of our [full screen page demos](/components/page/react-demos) to see this in action.
+
+```ts file="./ButtonHamburger.tsx"
+
 ```
 
 ## Using router links

package/src/components/Button/examples/ButtonHamburger.tsx

@@ -0,0 +1,9 @@
+import { Button, Flex } from '@patternfly/react-core';
+
+export const ButtonHamburger: React.FunctionComponent = () => (
+  <Flex>
+    <Button variant="plain" isExpanded={false} aria-label="Hamburger example" isHamburger />
+    <Button variant="plain" isExpanded={false} aria-label="Hamburger example" isHamburger hamburgerVariant="expand" />
+    <Button variant="plain" isExpanded={true} aria-label="Hamburger example" isHamburger hamburgerVariant="collapse" />
+  </Flex>
+);

package/src/components/Button/examples/ButtonSettings.tsx

@@ -0,0 +1,10 @@
+import { Button, Flex } from '@patternfly/react-core';
+
+export const ButtonSettings: React.FunctionComponent = () => (
+  <Flex>
+    <Button isSettings variant="plain" aria-label="Settings" />
+    <Button isSettings variant="control">
+      Settings
+    </Button>
+  </Flex>
+);

package/src/components/Button/hamburgerIcon.tsx

@@ -0,0 +1,13 @@
+import styles from '@patternfly/react-styles/css/components/Button/button';
+import { css } from '@patternfly/react-styles';
+
+// Because this is such a specific icon that requires being wrapped in a pf-v[current version]-c-button element,
+// we don't want to export this to consumers nor include it in the react-icons package as a custom icon.
+export const hamburgerIcon = (
+  <svg viewBox="0 0 10 10" className="pf-v6-c-button--hamburger-icon pf-v6-svg" width="1em" height="1em">
+    <path className={css(styles.buttonHamburgerIconTop)} d="M1,1 L9,1"></path>
+    <path className={css(styles.buttonHamburgerIconMiddle)} d="M1,5 L9,5"></path>
+    <path className={css(styles.buttonHamburgerIconArrow)} d="M1,5 L1,5 L1,5"></path>
+    <path className={css(styles.buttonHamburgerIconBottom)} d="M9,9 L1,9"></path>
+  </svg>
+);

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -27,7 +27,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     onClick={onClick}
     id={id}
     aria-labelledby={`${id} ${textId}`}
-    aria-controls={contentId}
+    aria-controls={isExpanded ? contentId : undefined}
     aria-expanded={isExpanded}
     {...props}
     icon={

package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx

@@ -44,9 +44,15 @@ test('Renders with aria-labelledby concatenated from id and textId props', () =>
   expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content');
 });
 
-test('Renders with aria-controls with passed in contentId prop', () => {
+test('Does not render with aria-controls when isExpanded is false', () => {
   render(<ClipboardCopyToggle {...requiredProps} />);
 
+  expect(screen.getByRole('button')).not.toHaveAttribute('aria-controls');
+});
+
+test('Renders with aria-controls with passed in contentId prop when isExpanded is true', () => {
+  render(<ClipboardCopyToggle isExpanded {...requiredProps} />);
+
   expect(screen.getByRole('button')).toHaveAttribute('aria-controls', requiredProps.contentId);
 });
 

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <button
-    aria-controls="content-id"
     aria-expanded="false"
     aria-labelledby="main-id text-id"
     class="pf-v6-c-button pf-m-control"

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"