@patternfly/react-core 6.3.0-prerelease.20 → 6.3.0-prerelease.21

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.19","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.20","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.19","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.20","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.19","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.20","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.20",
+  "version": "6.3.0-prerelease.21",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0-prerelease.5",
-    "@patternfly/react-styles": "^6.3.0-prerelease.5",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.5",
+    "@patternfly/react-icons": "^6.3.0-prerelease.6",
+    "@patternfly/react-styles": "^6.3.0-prerelease.6",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.6",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "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"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "9e7c8ba6afb5ad01cbac427089f8f9032e523628"
+  "gitHead": "c40f2f81ebe65b6bd785bc38da66330532ac7a30"
 }

package/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,7 +229,6 @@ 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.
@@ -210,6 +236,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
 
   return (
     <Component
+      aria-expanded={isExpanded} // Move this after the spread props in next breaking change
       {...props}
       {...(isAriaDisabled ? preventedEvents : null)}
       {...(shouldRenderAriaDisabled && { 'aria-disabled': true })}
@@ -217,6 +244,9 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       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,