feat(Table): added optin animations for expansion (#11865)

* feat(Table): added optin animations for expansion

* Added tests, updated compound expand example

* Fixed typo

* Updated Tabs context setAccentStyles to optional

* Tested handling animation control

* Bumped core for animation fix

Author: thatblindgeye

packages/react-core/package.json

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

packages/react-core/src/components/Tabs/TabsContext.ts

@@ -6,7 +6,7 @@ export interface TabsContextProps {
   unmountOnExit: boolean;
   localActiveKey: string | number;
   uniqueId: string;
-  setAccentStyles: (shouldInitializeStyles?: boolean) => void;
+  setAccentStyles?: (shouldInitializeStyles?: boolean) => void;
   handleTabClick: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.33",
+    "@patternfly/patternfly": "6.3.0-prerelease.35",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.3.0-prerelease.33",
+    "@patternfly/patternfly": "6.3.0-prerelease.35",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.33",
+    "@patternfly/patternfly": "6.3.0-prerelease.35",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },

packages/react-table/src/components/Table/ExpandableRowContent.tsx

@@ -2,14 +2,20 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 interface ExpandableRowContentProps {
+  /** Content rendered inside the expandable row. */
   children?: React.ReactNode;
+  /** Flag indicating whether the expandable row content has no background. This should be passed in when
+   * the parent Td is passed the noPadding prop.
+   */
+  hasNoBackground?: boolean;
 }
 
 export const ExpandableRowContent: React.FunctionComponent<ExpandableRowContentProps> = ({
   children = null as React.ReactNode,
+  hasNoBackground,
   ...props
 }: ExpandableRowContentProps) => (
-  <div {...props} className={css(styles.tableExpandableRowContent)}>
+  <div {...props} className={css(styles.tableExpandableRowContent, hasNoBackground && styles.modifiers.noBackground)}>
     {children}
   </div>
 );

packages/react-table/src/components/Table/Table.tsx

@@ -57,8 +57,12 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   isNested?: boolean;
   /** Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components. */
   isStriped?: boolean;
-  /** Flag indicating this table contains expandable rows to maintain proper striping */
+  /** Flag indicating this table contains expandable rows. */
   isExpandable?: boolean;
+  /** Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
+   * will be removed in the next breaking change, with the default behavior becoming animations always being enabled.
+   */
+  hasAnimations?: boolean;
   /** Flag indicating this table's rows will not have the inset typically reserved for expanding/collapsing rows in a tree table. Intended for use on tree tables with no visible rows with children. */
   hasNoInset?: boolean;
   /** Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584 */
@@ -73,10 +77,12 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
 
 interface TableContextProps {
   registerSelectableRow?: () => void;
+  hasAnimations?: boolean;
 }
 
 export const TableContext = createContext<TableContextProps>({
-  registerSelectableRow: () => {}
+  registerSelectableRow: () => {},
+  hasAnimations: false
 });
 
 const TableBase: React.FunctionComponent<TableProps> = ({
@@ -95,6 +101,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isNested = false,
   isStriped = false,
   isExpandable = false,
+  hasAnimations = false,
   hasNoInset = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   nestedHeaderColumnSpans,
@@ -197,7 +204,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   };
 
   return (
-    <TableContext.Provider value={{ registerSelectableRow }}>
+    <TableContext.Provider value={{ registerSelectableRow, hasAnimations }}>
       <table
         aria-label={ariaLabel}
         role={role}
@@ -212,7 +219,8 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,
           hasNoInset && stylesTreeView.modifiers.noInset,
-          isNested && 'pf-m-nested'
+          isNested && 'pf-m-nested',
+          hasAnimations && styles.modifiers.animateExpand
         )}
         ref={tableRef}
         {...(isTreeTable && { role: 'treegrid' })}

packages/react-table/src/components/Table/Td.tsx

@@ -1,4 +1,4 @@
-import { createRef, forwardRef, useEffect, useState } from 'react';
+import { createRef, forwardRef, useEffect, useState, useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
@@ -14,6 +14,7 @@ import {
   classNames,
   favoritable
 } from './utils';
+import { IRowData, IExtraData } from './TableTypes';
 import { draggable } from './utils/decorators/draggable';
 import { treeRow } from './utils';
 import { mergeProps } from './base/merge-props';
@@ -29,6 +30,7 @@ import {
   TdSelectType,
   TdTreeRowType
 } from './base/types';
+import { TableContext } from './Table';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
 import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
 import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
@@ -193,6 +195,39 @@ const TdBase: React.FunctionComponent<TdProps> = ({
           }
         })
       : null;
+
+  const { hasAnimations } = useContext(TableContext);
+  const updateAnimationClass = () => {
+    const ancestorControlRow = (cellRef as React.RefObject<HTMLElement | null>)?.current?.closest(
+      `.${styles.tableTr}.${styles.tableControlRow}`
+    );
+    const isControlRowExpanded = ancestorControlRow.classList.contains(styles.modifiers.expanded);
+    if (!isControlRowExpanded) {
+      return;
+    }
+
+    const isCurrentCellExpanded = (cellRef as React.RefObject<HTMLElement | null>)?.current?.classList.contains(
+      styles.modifiers.expanded
+    );
+    if (isCurrentCellExpanded) {
+      ancestorControlRow.classList.remove(styles.modifiers.noAnimateExpand);
+    } else {
+      ancestorControlRow.classList.add(styles.modifiers.noAnimateExpand);
+    }
+  };
+
+  const internalCompoundOnToggle = (
+    event: React.MouseEvent,
+    rowIndex: number,
+    colIndex: number,
+    isOpen: boolean,
+    rowData: IRowData,
+    extraData: IExtraData
+  ) => {
+    hasAnimations && updateAnimationClass();
+    compoundExpandProp?.onToggle(event, rowIndex, colIndex, isOpen, rowData, extraData);
+  };
+
   const compoundParams =
     compoundExpandProp !== null
       ? compoundExpand(
@@ -207,7 +242,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
             columnIndex: compoundExpandProp?.columnIndex,
             column: {
               extraParams: {
-                onExpand: compoundExpandProp?.onToggle,
+                onExpand: internalCompoundOnToggle,
                 expandId: compoundExpandProp?.expandId
               }
             }

packages/react-table/src/components/Table/Tr.tsx

@@ -80,7 +80,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
 
   const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable);
 
-  const { registerSelectableRow } = useContext(TableContext);
+  const { registerSelectableRow, hasAnimations } = useContext(TableContext);
 
   useEffect(() => {
     if (isSelectable && !rowIsHidden) {
@@ -113,6 +113,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         {...(isClickable && { tabIndex: 0 })}
         aria-label={ariaLabel}
         ref={innerRef}
+        {...(hasAnimations && rowIsHidden && { inert: '' })}
         {...(onRowClick && { onClick: onRowClick, onKeyDown })}
         {...ouiaProps}
         {...props}

packages/react-table/src/components/Table/__tests__/ExpandableRowContent.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { ExpandableRowContent } from '../ExpandableRowContent';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(<ExpandableRowContent data-testid="row-id" />);
+
+  expect(screen.getByTestId('row-id')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(<ExpandableRowContent>Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toBeVisible();
+});
+
+test(`Renders only with class ${styles.tableExpandableRowContent} by default`, () => {
+  render(<ExpandableRowContent>Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toHaveClass(styles.tableExpandableRowContent, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.noBackground} when hasNoBackground is true`, () => {
+  render(<ExpandableRowContent hasNoBackground>Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toHaveClass(styles.modifiers.noBackground);
+});
+
+test(`Spreads additional props`, () => {
+  render(<ExpandableRowContent data-custom="true">Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toHaveAttribute('data-custom', 'true');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ExpandableRowContent>Row content</ExpandableRowContent>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-table/src/components/Table/__tests__/Table.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import { Table } from '../Table';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(
+    <Table aria-label="Test table">
+      <caption>Table caption</caption>
+    </Table>
+  );
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveTextContent('Table caption');
+});
+
+test('Renders with role="treegrid" when isTreeTable is true', () => {
+  render(<Table isTreeTable aria-label="Test table" />);
+
+  expect(screen.getByRole('treegrid', { name: 'Test table' })).toBeInTheDocument();
+});
+
+test(`Renders with class ${styles.table} by default`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.table);
+});
+
+test(`Renders with a pf-m-grid class by default`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(/^pf-m-grid/);
+});
+
+test(`Renders with a pf-m-tree-view-grid class when isTreeTable is true`, () => {
+  render(<Table isTreeTable aria-label="Test table" />);
+
+  expect(screen.getByRole('treegrid', { name: 'Test table' })).not.toHaveClass(/^pf-m-grid/);
+  expect(screen.getByRole('treegrid', { name: 'Test table' })).toHaveClass(/^pf-m-tree-view-grid/);
+});
+
+test(`Does not render with class ${styles.modifiers.animateExpand} by default`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.animateExpand);
+});
+
+test(`Renders with class ${styles.modifiers.animateExpand} hasAnimations is true`, () => {
+  render(<Table hasAnimations aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.animateExpand);
+});
+
+test('Matches snapshot without children', () => {
+  const { asFragment } = render(<Table />);
+
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-table/src/components/Table/__tests__/Tr.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import { Tr } from '../Tr';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(
+    <table>
+      <tbody>
+        <Tr />
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('row')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(
+    <table>
+      <tbody>
+        <Tr>
+          <td>Row content</td>
+        </Tr>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('row')).toHaveTextContent('Row content');
+});
+
+test(`Does not render as hidden by default`, () => {
+  render(
+    <table>
+      <tbody>
+        <Tr />
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('row')).not.toHaveAttribute('hidden');
+});
+
+test(`Renders as hidden when isHidden is true`, () => {
+  render(
+    <table>
+      <tbody>
+        <Tr isHidden />
+      </tbody>
+    </table>
+  );
+
+  expect(screen.queryByRole('row')).not.toBeInTheDocument();
+});
+
+test('Matches snapshot without children', () => {
+  const { asFragment } = render(
+    <table>
+      <tbody>
+        <Tr />
+      </tbody>
+    </table>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with children', () => {
+  const { asFragment } = render(
+    <table>
+      <tbody>
+        <Tr>
+          <td>Row content</td>
+        </Tr>
+      </tbody>
+    </table>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});