feat(button): add favorite variant (#11853)

* feat(button): add favorite variant

* fix icon import

* improved docs and made aria label dynamic

* added the star icon

* added console warning for a11y

* updated icon render logic

* star icon updated

* removed the plain variant condition

* added unit tests

* added unit tests

Author: Mash707

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

@@ -4,6 +4,8 @@ import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
+import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
 
 export enum ButtonVariant {
   primary = 'primary',
@@ -71,6 +73,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   inoperableEvents?: string[];
   /** Adds inline styling to a link button */
   isInline?: boolean;
+  /** Adds favorite styling to a button */
+  isFavorite?: boolean;
+  /** Flag indicating whether the button is favorited or not, only when isFavorite is true. */
+  isFavorited?: boolean;
   /** Adds styling which affects the size of the button */
   size?: 'default' | 'sm' | 'lg';
   /** Sets button type */
@@ -117,6 +123,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   size = ButtonSize.default,
   inoperableEvents = ['onClick', 'onKeyPress'],
   isInline = false,
+  isFavorite = false,
+  isFavorited = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
   state = ButtonState.unread,
@@ -132,11 +140,19 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   countOptions,
   ...props
 }: ButtonProps) => {
+  if (isFavorite && !ariaLabel && !props['aria-labelledby']) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Button: Each favorite button must have a unique accessible name provided via aria-label or aria-labelledby'
+    );
+  }
+
   const ouiaProps = useOUIAProps(Button.displayName, ouiaId, ouiaSafe, variant);
   const Component = component as any;
   const isButtonElement = Component === 'button';
   const isInlineSpan = isInline && Component === 'span';
   const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
+  const shouldOverrideIcon = isFavorite;
 
   const preventedEvents = inoperableEvents.reduce(
     (handlers, eventToPrevent) => ({
@@ -158,11 +174,36 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
   };
 
-  const _icon = icon && (
-    <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
-      {icon}
-    </span>
-  );
+  const renderIcon = () => {
+    let iconContent;
+
+    if (isFavorite) {
+      iconContent = (
+        <>
+          <span className={css('pf-v6-c-button__icon-favorite')}>
+            <OutlinedStarIcon />
+          </span>
+          <span className={css('pf-v6-c-button__icon-favorited')}>
+            <StarIcon />
+          </span>
+        </>
+      );
+    }
+
+    if (icon && !shouldOverrideIcon) {
+      iconContent = icon;
+    }
+
+    return (
+      iconContent && (
+        <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
+          {iconContent}
+        </span>
+      )
+    );
+  };
+
+  const _icon = renderIcon();
   const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
   // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively.
   const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled);
@@ -181,6 +222,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isAriaDisabled && styles.modifiers.ariaDisabled,
         isClicked && styles.modifiers.clicked,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
+        isFavorite && styles.modifiers.favorite,
+        isFavorite && isFavorited && styles.modifiers.favorited,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,

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

@@ -248,3 +248,28 @@ test(`Renders basic button`, () => {
   const { asFragment } = render(<Button aria-label="basic button">Basic Button</Button>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test(`Renders with class ${styles.modifiers.favorite} when isFavorite is true`, () => {
+  render(<Button isFavorite />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.favorite);
+});
+
+test(`Renders with class ${styles.modifiers.favorited} when isFavorite is true and isFavorited is true`, () => {
+  render(<Button isFavorite isFavorited />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.favorited);
+});
+
+test(`Does not render with class ${styles.modifiers.favorite} when isFavorite is false`, () => {
+  render(<Button />);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.favorite);
+});
+
+test(`Does not render with class ${styles.modifiers.favorited} when isFavorite is true and isFavorited is false`, () => {
+  render(<Button isFavorite />);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.favorited);
+});
+
+test('Overrides icon prop when isFavorite is true', () => {
+  render(<Button isFavorite icon={<div>Icon content</div>} />);
+  expect(screen.queryByText('Icon content')).not.toBeInTheDocument();
+});

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

@@ -125,6 +125,13 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 ```ts file="./ButtonStateful.tsx"
 ```
 
+### 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"
+```
+
 ## Using router links
 
 Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom component example](#custom-component) and pass a callback to the `component` property of the `Button`:
@@ -133,4 +140,4 @@ Router links can be used for in-app linking in React environments to prevent pag
 <Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
   Router link
 </Button>
-```
+```

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

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { Button } from '@patternfly/react-core';
+
+export const ButtonFavorite: React.FunctionComponent = () => {
+  const [isFavorited, setIsFavorited] = useState(false);
+  const toggleFavorite = () => {
+    setIsFavorited(!isFavorited);
+  };
+  return (
+    <Button
+      variant="plain"
+      aria-label={isFavorited ? 'Favorite example favorited' : 'Favorite example not favorited'}
+      isFavorite
+      isFavorited={isFavorited}
+      onClick={toggleFavorite}
+    />
+  );
+};