Added prop to menu toggle

Author: thatblindgeye

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

@@ -45,6 +45,8 @@ export interface MenuToggleProps
   isFullWidth?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
+  /** @beta Flag indicating the toggle has circular styling. Can only be applied to plain toggles. */
+  isCircle?: 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. */
@@ -84,6 +86,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     isFullWidth: false,
     isFullHeight: false,
     isPlaceholder: false,
+    isCircle: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -103,6 +106,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
       isFullHeight,
       isFullWidth,
       isPlaceholder,
+      isCircle,
       isSettings,
       splitButtonItems,
       variant,
@@ -225,7 +229,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
 
     return (
       <button
-        className={css(commonStyles)}
+        className={css(commonStyles, isCircle && isPlain && 'pf-m-circle')}
         type="button"
         aria-label={ariaLabel}
         aria-expanded={isExpanded}

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

@@ -55,6 +55,8 @@ describe('Old Snapshot tests - remove when refactoring', () => {
   });
 });
 
+const toggleVariants = ['default', 'plain', 'primary', 'plainText', 'secondary', 'typeahead'];
+
 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);
@@ -110,6 +112,24 @@ test(`Renders with class ${styles.modifiers.settings} when isSettings is passed`
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.settings);
 });
 
+test(`Renders with class pf-m-circle when variant="plain" and isCircle is true`, () => {
+  render(<MenuToggle isCircle variant="plain" aria-label="Toggle"></MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-circle');
+});
+
+toggleVariants
+  .filter((variant) => variant !== 'plain')
+  .forEach((variant) => {
+    test(`Does not with class pf-m-circle when variant="${variant}" and isCircle is true`, () => {
+      render(
+        <MenuToggle isCircle variant={variant as 'default' | 'primary' | 'plainText' | 'secondary' | 'typeahead'}>
+          Toggle
+        </MenuToggle>
+      );
+      expect(screen.getByRole('button')).not.toHaveClass('pf-m-circle');
+    });
+  });
+
 test('Does not render custom icon when icon prop and isSettings are passed', () => {
   render(
     <MenuToggle isSettings icon={<div>Custom icon</div>}>

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

@@ -20,13 +20,15 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 A toggle is collapsed until it is selected by a user.
 
 ```ts file="MenuToggleCollapsed.tsx"
+
 ```
 
 ### Expanded toggle
 
 When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
 ```ts file ="MenuToggleExpanded.tsx"
+
 ```
 
 ### Small toggle
@@ -42,13 +44,15 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
 ```ts file="MenuToggleDisabled.tsx"
+
 ```
 
 ### With a badge
 
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts file="MenuToggleBadge.tsx"
+
 ```
 
 ### Settings toggle
@@ -76,13 +80,15 @@ You can also pass images into the `icon` property. The following example passes
 This can be used alongside a text label that provides more context for the image.
 
 ```ts file="MenuToggleAvatarText.tsx"
+
 ```
 
 ### Variant styles
 
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts file="MenuToggleVariantStyles.tsx"
+
 ```
 
 ### Plain toggle with icon
@@ -92,13 +98,23 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts file="MenuTogglePlainIcon.tsx"
+
+```
+
+### Plain circle toggle
+
+You can also pass the `isCircle` property to a plain, icon-only toggle to adjust the styling to a complete circular shape, rather than a rounded square.
+
+```ts file="MenuTogglePlainCircle.tsx"
+
 ```
 
 ### Plain toggle with text label
 
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts file="MenuTogglePlainTextLabel.tsx"
+
 ```
 
 ### Split toggle with checkbox
@@ -150,6 +166,7 @@ A full height toggle fills the height of its parent. To flag a full height toggl
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
 ```ts file="MenuToggleFullHeight.tsx"
+
 ```
 
 ### Full width toggle
@@ -159,6 +176,7 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
 In the following example, the toggle fills the width of its parent as the window size changes.
 
 ```ts file="MenuToggleFullWidth.tsx"
+
 ```
 
 ### Typeahead toggle

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

@@ -0,0 +1,11 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const MenuTogglePlainCircle: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" aria-label="plain circle kebab" />{' '}
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain circle expanded kebab" />{' '}
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain circle kebab" />
+  </Fragment>
+);