feat(Table): add hasAction flag (#11877)

* feat(Table): add hasAction flag * rebase, add unit test

Author: kmcfaul

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

@@ -45,6 +45,8 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
  select?: TdSelectType;
  /** Turns the cell into an actions cell. Recommended to use an ActionsColumn component as a child of the Td rather than this prop. */
  actions?: TdActionsType;
+ /** Indicates the cell contains an interactive element and prevents that element's padding from increasing row height. Recommended when other cells in the same row contains text. */
+ hasAction?: boolean;
  /** Turns the cell into an expansion toggle and determines if the corresponding expansion row is open */
  expand?: TdExpandType;
  /** Turns the cell into a compound expansion toggle */
@@ -86,6 +88,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
  children,
  className,
  isActionCell = false,
+ hasAction = false,
  component = 'td',
  dataLabel,
  textCenter = false,
@@ -314,6 +317,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
  styles.tableTd,
  className,
  isActionCell && styles.tableAction,
+ hasAction && styles.modifiers.action,
  textCenter && styles.modifiers.center,
  noPadding && styles.modifiers.noPadding,
  isStickyColumn && scrollStyles.tableStickyCell,

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

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+import { Td } from '../Td';
+
+test('Renders without children', () => {
+ render(
+ <table>
+ <tbody>
+ <tr>
+ <Td />
+ </tr>
+ </tbody>
+ </table>
+ );
+
+ expect(screen.getByRole('cell')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+ render(
+ <table>
+ <tbody>
+ <tr>
+ <Td>Cell content</Td>
+ </tr>
+ </tbody>
+ </table>
+ );
+
+ expect(screen.getByRole('cell')).toHaveTextContent('Cell content');
+});
+
+test(`Applies ${styles.modifiers.action} when hasAction is true`, () => {
+ render(
+ <table>
+ <tbody>
+ <tr>
+ <Td hasAction>Cell with action</Td>
+ </tr>
+ </tbody>
+ </table>
+ );
+
+ expect(screen.getByRole('cell')).toHaveClass('pf-m-action');
+});
+
+test(`Does not apply ${styles.modifiers.action} when hasAction is false`, () => {
+ render(
+ <table>
+ <tbody>
+ <tr>
+ <Td hasAction={false}>Cell without action</Td>
+ </tr>
+ </tbody>
+ </table>
+ );
+
+ expect(screen.getByRole('cell')).not.toHaveClass('pf-m-action');
+});
+
+test('Matches snapshot without children', () => {
+ const { asFragment } = render(
+ <table>
+ <tbody>
+ <tr>
+ <Td />
+ </tr>
+ </tbody>
+ </table>
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with children', () => {
+ const { asFragment } = render(
+ <table>
+ <tbody>
+ <tr>
+ <Td>Cell content</Td>
+ </tr>
+ </tbody>
+ </table>
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with children 1`] = `
+<DocumentFragment>
+ <table>
+ <tbody>
+ <tr>
+ <td
+ class="pf-v6-c-table__td"
+ tabindex="-1"
+ >
+ Cell content
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without children 1`] = `
+<DocumentFragment>
+ <table>
+ <tbody>
+ <tr>
+ <td
+ class="pf-v6-c-table__td"
+ tabindex="-1"
+ />
+ </tr>
+ </tbody>
+ </table>
+</DocumentFragment>
+`;

packages/react-table/src/components/Table/examples/Table.md

@@ -184,6 +184,8 @@ To make a cell an action cell, render an `ActionsColumn` component inside a row'
 
 If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended.
 
+When a table row contains mixed content of text and interactive elements, the `hasAction` property may be passed to a `Td` which contains interactive content like the below example's start `Button`. This will align buttons and other elements with other cells' text. Note that `hasAction` should not be used with `Td`s in an `ActionsColumn` because that comes with it's own spacing.
+
 ```ts file="TableActions.tsx"
 
 ```

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

@@ -146,7 +146,7 @@ export const TableActions: React.FunctionComponent = () => {
  <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
  <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
  <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
- <Td dataLabel={columnNames.singleAction} modifier="fitContent">
+ <Td dataLabel={columnNames.singleAction} modifier="fitContent" hasAction>
  {singleActionButton}
  </Td>
  <Td isActionCell>