feat(MenuToggle): added size prop for small modifier class (#10811)

* feat(MenuToggle): added size prop for small modifier class

* Added/updated unit tests

* Updated export name in example code

packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -66,6 +66,7 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              size="sm"
               badge={
                 <Badge isRead screenReaderText="additional items">
                   {dropdownItems.length}

packages/react-core/src/components/MenuToggle/MenuToggle.tsx

@@ -14,6 +14,11 @@ export enum MenuToggleStatus {
   warning = 'warning'
 }
 
+export enum MenuToggleSize {
+  default = 'default',
+  sm = 'sm'
+}
+
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface SplitButtonOptions {
@@ -58,6 +63,8 @@ export interface MenuToggleProps
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
+  /** Adds styling which affects the size of the menu toggle */
+  size?: 'default' | 'sm';
   /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
   /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
@@ -78,6 +85,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    size: 'default',
     ouiaSafe: true
   };
 
@@ -104,6 +112,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       'aria-label': ariaLabel,
       ouiaId,
       ouiaSafe,
+      size,
       ...otherProps
     } = this.props;
     const isPlain = variant === 'plain';
@@ -170,6 +179,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,
+      size === MenuToggleSize.sm && styles.modifiers.small,
       className
     );
 

packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -6,6 +6,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -53,19 +54,25 @@ describe('menu toggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('shows success status', () => {
+  // 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.success} when status="success" is passed`, () => {
     render(<MenuToggle status="success">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-success');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
   });
 
-  test('shows warning status', () => {
+  test(`Renders with class ${styles.modifiers.warning} when status="success" is passed`, () => {
     render(<MenuToggle status="warning">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-warning');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.warning);
   });
 
-  test('shows danger status', () => {
+  test(`Renders with class ${styles.modifiers.danger} when status="success" is passed`, () => {
     render(<MenuToggle status="danger">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-danger');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.danger);
   });
 
   test('split toggle passes onClick', async () => {

packages/react-core/src/components/MenuToggle/examples/MenuToggle.md

@@ -39,6 +39,14 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
+### Small toggle
+
+You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb).
+
+```ts file="./MenuToggleSmall.tsx"
+
+```
+
 ### Disabled toggle
 
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
@@ -193,7 +201,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Split toggle with checkbox
 
-To add a checkbox (or other action/control) to a menu toggle, use a split button. 
+To add a checkbox (or other action/control) to a menu toggle, use a split button.
 
 A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
 

packages/react-core/src/components/MenuToggle/examples/MenuToggleSmall.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSmall: React.FunctionComponent = () => <MenuToggle size="sm">Small toggle</MenuToggle>;