feat(Button): added circle variant (#12092)

* feat(Button): added circle variant

* Added test

* Updated prop to beta

* Added prop to menu toggle

* Bumped core to pull in styles

* Added prop to example

* Bumped to core 6.5 prerelease 9

---------

Co-authored-by: Eric Olkowski <git.eric@thatblindgeye.dev>

Author: thatblindgeye

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.3",
+    "@patternfly/patternfly": "6.5.0-prerelease.9",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

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

@@ -107,6 +107,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isHamburger?: boolean;
   /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
   hamburgerVariant?: 'expand' | 'collapse';
+  /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
+  isCircle?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -131,6 +133,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isSettings,
   isHamburger,
   hamburgerVariant,
+  isCircle,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -261,6 +264,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         variant === ButtonVariant.stateful && styles.modifiers[state],
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
+        isCircle && styles.modifiers.circle,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

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

@@ -214,6 +214,11 @@ test(`Renders without class ${styles.modifiers.progress} when isLoading = false
   expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.progress);
 });
 
+test(`Renders with class ${styles.modifiers.circle} when isCircle is true`, () => {
+  render(<Button isCircle>Circle Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle);
+});
+
 test(`Renders custom icon with class ${styles.modifiers.inProgress} when isLoading = true and icon is present`, () => {
   render(
     <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />

packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-66"
+    data-ouia-component-id="OUIA-Generated-Button-primary-67"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

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

@@ -138,6 +138,14 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ```
 
+### Circle buttons
+
+Pass `isCircle` to a button to modify its styling from simply rounded corners to complete circles. Circle buttons are intended for buttons that only contain an icon and adequate accessible naming.
+
+```ts file="./ButtonCircle.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.

packages/react-core/src/components/Button/examples/ButtonCircle.tsx

@@ -0,0 +1,63 @@
+import { Button, Flex } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+
+interface LoadingPropsType {
+  spinnerAriaValueText: string;
+  spinnerAriaLabelledBy?: string;
+  spinnerAriaLabel?: string;
+  isLoading: boolean;
+}
+
+export const ButtonCircle: React.FunctionComponent = () => {
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  const uploadingProps = {} as LoadingPropsType;
+  uploadingProps.spinnerAriaValueText = 'Loading circle variant example';
+  uploadingProps.spinnerAriaLabel = 'Uploading circle variant example data';
+  uploadingProps.isLoading = isUploading;
+
+  return (
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isCircle icon={<PlusCircleIcon />} aria-label="Add primary circle variant example" />
+      <Button
+        variant="secondary"
+        isCircle
+        icon={<PlusCircleIcon />}
+        aria-label="Add secondary circle variant example"
+      />
+      <Button variant="tertiary" isCircle icon={<PlusCircleIcon />} aria-label="Add tertiary circle variant example" />
+      <Button variant="danger" isCircle icon={<PlusCircleIcon />} aria-label="Add danger circle variant example" />
+      <Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
+      <Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
+      <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
+      <Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
+      <Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
+      <Button
+        variant="stateful"
+        state="read"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful read circle variant example"
+      />
+      <Button
+        variant="stateful"
+        state="attention"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful attention circle variant example"
+      />
+      <Button
+        variant="plain"
+        isCircle
+        {...(!isUploading && { 'aria-label': 'Upload circle variant example' })}
+        onClick={() => setIsUploading(!isUploading)}
+        icon={<UploadIcon />}
+        {...uploadingProps}
+      />
+    </Flex>
+  );
+};

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 && styles.modifiers.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 ${styles.modifiers.circle} when variant="plain" and isCircle is true`, () => {
+  render(<MenuToggle isCircle variant="plain" aria-label="Toggle"></MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle);
+});
+
+toggleVariants
+  .filter((variant) => variant !== 'plain')
+  .forEach((variant) => {
+    test(`Does not with class ${styles.modifiers.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(styles.modifiers.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>
+);