feat(Table): add hasAction flag

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>