@patternfly/react-core 6.3.0-prerelease.17 → 6.3.0-prerelease.19

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.16","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.18","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.16","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.18","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.16","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.18","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.17",
+  "version": "6.3.0-prerelease.19",
   "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.3",
-    "@patternfly/react-styles": "^6.3.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.3",
+    "@patternfly/react-icons": "^6.3.0-prerelease.4",
+    "@patternfly/react-styles": "^6.3.0-prerelease.4",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.4",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.20",
+    "@patternfly/patternfly": "6.3.0-prerelease.24",
     "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": "b8f1dfda838e054edff17e191c2619d004668522"
+  "gitHead": "e53720b71b9d2fc075e476f5f1b3a5f7b7c3055c"
 }

package/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,

package/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();
+});

package/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>
-```
+```

package/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}
+    />
+  );
+};

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -12,6 +12,11 @@ export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTML
   isExpanded?: boolean;
   /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
+  /** Flag indicating whether an expandable form field group has animations. This will always render
+   * nested field group content rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExpandableProps> = ({
@@ -20,6 +25,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
   header,
   isExpanded = false,
   toggleAriaLabel,
+  hasAnimations,
   ...props
 }: FormFieldGroupExpandableProps) => {
   const [localIsExpanded, setIsExpanded] = useState(isExpanded);
@@ -32,6 +38,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
       isExpanded={localIsExpanded}
       toggleAriaLabel={toggleAriaLabel}
       onToggle={() => setIsExpanded(!localIsExpanded)}
+      hasAnimations={hasAnimations}
       {...props}
     >
       {children}

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -18,6 +18,11 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
   onToggle?: () => void;
   /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
+  /** Flag indicating whether an expandable form field group has animations. This will always render
+   * nested field group content rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGroupProps> = ({
@@ -28,6 +33,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   isExpanded,
   onToggle,
   toggleAriaLabel,
+  hasAnimations,
   ...props
 }: InternalFormFieldGroupProps) => {
   const headerTitleText = header ? header.props.titleText : null;
@@ -40,7 +46,12 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   }
   return (
     <div
-      className={css(styles.formFieldGroup, isExpanded && isExpandable && styles.modifiers.expanded, className)}
+      className={css(
+        styles.formFieldGroup,
+        isExpanded && isExpandable && styles.modifiers.expanded,
+        hasAnimations && isExpandable && styles.modifiers.expandable,
+        className
+      )}
       role="group"
       {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id}` })}
       {...props}
@@ -59,8 +70,13 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
         </GenerateId>
       )}
       {header && header}
-      {(!isExpandable || (isExpandable && isExpanded)) && (
-        <div className={css(styles.formFieldGroupBody)}>{children}</div>
+      {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
+        <div
+          className={css(styles.formFieldGroupBody)}
+          {...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
+        >
+          {children}
+        </div>
       )}
     </div>
   );

package/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
+import styles from '@patternfly/react-styles/css/components/Form/form';
+
+test('Does not render children by default', () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.queryByText('Child content')).not.toBeInTheDocument();
+});
+
+test('Renders children when isExpanded is true', () => {
+  render(
+    <FormFieldGroupExpandable isExpanded toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).toBeInTheDocument();
+});
+
+test('Renders children with inert attribute by default when hasAnimations is true', () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).toHaveAttribute('inert', '');
+});
+
+test('Does not render children with inert attribute when hasAnimations and isExpanded are true', () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations isExpanded toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).not.toHaveAttribute('inert');
+});
+
+test(`Does not render with class ${styles.modifiers.expandable} by default`, () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});
+
+test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is true`, () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
+});

package/src/components/Form/examples/FormFieldGroups.tsx

@@ -52,6 +52,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         <TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
       </FormGroup>
       <FormFieldGroupExpandable
+        hasAnimations
         isExpanded
         toggleAriaLabel="Details"
         header={
@@ -67,6 +68,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         }
       >
         <FormFieldGroupExpandable
+          hasAnimations
           isExpanded
           toggleAriaLabel="Details"
           header={
@@ -97,6 +99,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           </FormGroup>
         </FormFieldGroupExpandable>
         <FormFieldGroupExpandable
+          hasAnimations
           toggleAriaLabel="Details"
           header={
             <FormFieldGroupHeader
@@ -125,6 +128,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           </FormGroup>
         </FormFieldGroupExpandable>
         <FormFieldGroupExpandable
+          hasAnimations
           toggleAriaLabel="Details"
           header={
             <FormFieldGroupHeader
@@ -173,6 +177,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         </FormGroup>
       </FormFieldGroupExpandable>
       <FormFieldGroupExpandable
+        hasAnimations
         toggleAriaLabel="Details"
         header={
           <FormFieldGroupHeader
@@ -194,6 +199,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         </FormGroup>
       </FormFieldGroupExpandable>
       <FormFieldGroupExpandable
+        hasAnimations
         isExpanded
         toggleAriaLabel="Details"
         header={
@@ -273,7 +279,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         header={
           <FormFieldGroupHeader
             titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
-            titleDescription="Field group 4 description text."
+            titleDescription="Field group 4 description text fdgsdg."
             actions={
               <>
                 <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>