feat(Button/MenuToggle): added support for hamburger/settings animations (#11861)

Author: thatblindgeye

packages/react-core/package.json

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

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

@@ -6,6 +6,8 @@ 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';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import { hamburgerIcon } from './hamburgerIcon';
 
 export enum ButtonVariant {
   primary = 'primary',
@@ -97,6 +99,14 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
+  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. */
+  isExpanded?: boolean;
+  /** Flag indicating the button is a settings button. This will override the icon property. */
+  isSettings?: boolean;
+  /** Flag indicating the button is a hamburger button. This will override the icon property. */
+  isHamburger?: boolean;
+  /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
+  hamburgerVariant?: 'expand' | 'collapse';
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -117,6 +127,10 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isAriaDisabled = false,
   isLoading = null,
   isDanger = false,
+  isExpanded,
+  isSettings,
+  isHamburger,
+  hamburgerVariant,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -140,10 +154,17 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   countOptions,
   ...props
 }: ButtonProps) => {
-  if (isFavorite && !ariaLabel && !props['aria-labelledby']) {
+  if (isHamburger && ![true, false].includes(isExpanded)) {
     // 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'
+      'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content.'
+    );
+  }
+  // TODO: Remove isSettings || isHamburger || isFavorite conditional in breaking change to throw this warning for any button that does not have children or aria name
+  if ((isSettings || isHamburger || isFavorite) && !ariaLabel && !children && !props['aria-labelledby']) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Button: you must provide either visible text content or an accessible name via the aria-label or aria-labelledby properties.'
     );
   }
 
@@ -152,7 +173,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   const isButtonElement = Component === 'button';
   const isInlineSpan = isInline && Component === 'span';
   const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
-  const shouldOverrideIcon = isFavorite;
+  const shouldOverrideIcon = isSettings || isHamburger || isFavorite;
 
   const preventedEvents = inoperableEvents.reduce(
     (handlers, eventToPrevent) => ({
@@ -190,6 +211,12 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       );
     }
 
+    if (isSettings) {
+      iconContent = <CogIcon />;
+    }
+    if (isHamburger) {
+      iconContent = hamburgerIcon;
+    }
     if (icon && !shouldOverrideIcon) {
       iconContent = icon;
     }
@@ -202,21 +229,24 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       )
     );
   };
-
   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);
 
   return (
     <Component
+      aria-expanded={isExpanded} // Move this after the spread props in next breaking change
       {...props}
       {...(isAriaDisabled ? preventedEvents : null)}
       {...(shouldRenderAriaDisabled && { 'aria-disabled': true })}
       aria-label={ariaLabel}
       className={css(
         styles.button,
         styles.modifiers[variant],
+        isSettings && styles.modifiers.settings,
+        isHamburger && styles.modifiers.hamburger,
+        isHamburger && hamburgerVariant && styles.modifiers[hamburgerVariant],
         isBlock && styles.modifiers.block,
         isDisabled && !isButtonElement && styles.modifiers.disabled,
         isAriaDisabled && styles.modifiers.ariaDisabled,