diff --git a/packages/react-table/src/components/Table/Td.tsx b/packages/react-table/src/components/Table/Td.tsx index 8116ebb6cfe..0a063fe854e 100644 --- a/packages/react-table/src/components/Table/Td.tsx +++ b/packages/react-table/src/components/Table/Td.tsx @@ -45,6 +45,8 @@ export interface TdProps extends BaseCellProps, Omit = ({ children, className, isActionCell = false, + hasAction = false, component = 'td', dataLabel, textCenter = false, @@ -314,6 +317,7 @@ const TdBase: React.FunctionComponent = ({ styles.tableTd, className, isActionCell && styles.tableAction, + hasAction && styles.modifiers.action, textCenter && styles.modifiers.center, noPadding && styles.modifiers.noPadding, isStickyColumn && scrollStyles.tableStickyCell, diff --git a/packages/react-table/src/components/Table/__tests__/Td.test.tsx b/packages/react-table/src/components/Table/__tests__/Td.test.tsx new file mode 100644 index 00000000000..1eccc624f17 --- /dev/null +++ b/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( + + + + + +
+
+ ); + + expect(screen.getByRole('cell')).toBeInTheDocument(); +}); + +test('Renders with children', () => { + render( + + + + + + +
Cell content
+ ); + + expect(screen.getByRole('cell')).toHaveTextContent('Cell content'); +}); + +test(`Applies ${styles.modifiers.action} when hasAction is true`, () => { + render( + + + + + + +
Cell with action
+ ); + + expect(screen.getByRole('cell')).toHaveClass('pf-m-action'); +}); + +test(`Does not apply ${styles.modifiers.action} when hasAction is false`, () => { + render( + + + + + + +
Cell without action
+ ); + + expect(screen.getByRole('cell')).not.toHaveClass('pf-m-action'); +}); + +test('Matches snapshot without children', () => { + const { asFragment } = render( + + + + + +
+
+ ); + + expect(asFragment()).toMatchSnapshot(); +}); + +test('Matches snapshot with children', () => { + const { asFragment } = render( + + + + + + +
Cell content
+ ); + + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-table/src/components/Table/__tests__/__snapshots__/Td.test.tsx.snap b/packages/react-table/src/components/Table/__tests__/__snapshots__/Td.test.tsx.snap new file mode 100644 index 00000000000..e06f7754206 --- /dev/null +++ b/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`] = ` + + + + + + + +
+ Cell content +
+
+`; + +exports[`Matches snapshot without children 1`] = ` + + + + + + +
+
+
+`; diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index fbd7b40ae0a..d2a5a9646d5 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/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" ``` diff --git a/packages/react-table/src/components/Table/examples/TableActions.tsx b/packages/react-table/src/components/Table/examples/TableActions.tsx index 5468d4f965d..a7aec8bea0d 100644 --- a/packages/react-table/src/components/Table/examples/TableActions.tsx +++ b/packages/react-table/src/components/Table/examples/TableActions.tsx @@ -146,7 +146,7 @@ export const TableActions: React.FunctionComponent = () => { {repo.prs} {repo.workspaces} {repo.lastCommit} - + {singleActionButton}