diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 144fc0ccb24..c80ff4cdc23 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -50,6 +50,8 @@ export interface TableProps extends React.HTMLProps, OUIAProps role?: string; /** @beta Flag indicating if the table should have plain styling with a transparent background */ isPlain?: boolean; + /** @beta Flag indicating if the table should not have plain styling when in the glass theme. If isPlain is also set, this property will be ignored. */ + isNoPlainOnGlass?: boolean; /** If set to true, the table header sticks to the top of its container */ isStickyHeader?: boolean; /** @hide Forwarded ref */ @@ -97,6 +99,7 @@ const TableBase: React.FunctionComponent = ({ borders = true, isStickyHeader = false, isPlain = false, + isNoPlainOnGlass = false, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', @@ -121,6 +124,13 @@ const TableBase: React.FunctionComponent = ({ const [hasSelectableRows, setHasSelectableRows] = useState(false); const [tableCaption, setTableCaption] = useState(); + if (isPlain && isNoPlainOnGlass) { + // eslint-disable-next-line no-console + console.warn( + "Table: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme." + ); + } + useEffect(() => { document.addEventListener('keydown', handleKeys); @@ -226,6 +236,7 @@ const TableBase: React.FunctionComponent = ({ isStriped && styles.modifiers.striped, isExpandable && styles.modifiers.expandable, isPlain && styles.modifiers.plain, + isNoPlainOnGlass && styles.modifiers.noPlain, hasNoInset && stylesTreeView.modifiers.noInset, isNested && 'pf-m-nested', hasAnimations && styles.modifiers.animateExpand diff --git a/packages/react-table/src/components/Table/__tests__/Table.test.tsx b/packages/react-table/src/components/Table/__tests__/Table.test.tsx index 3e7af5c9cd5..5e1803c53bd 100644 --- a/packages/react-table/src/components/Table/__tests__/Table.test.tsx +++ b/packages/react-table/src/components/Table/__tests__/Table.test.tsx @@ -156,3 +156,33 @@ test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.plain); }); + +test(`Does not render with class ${styles.modifiers.plain} when isPlain is not defined`, () => { + render(); + + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.plain); +}); + +test(`Does not render with class ${styles.modifiers.plain} when isPlain is false`, () => { + render(
); + + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.plain); +}); + +test(`Renders with class ${styles.modifiers.noPlain} when isNoPlainOnGlass is true`, () => { + render(
); + + expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.noPlain); +}); + +test(`Does not render with class ${styles.modifiers.noPlain} when isNoPlainOnGlass is undefined`, () => { + render(
); + + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlain); +}); + +test(`Does not render with class ${styles.modifiers.noPlain} when isNoPlainOnGlass is false`, () => { + render(
); + + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlain); +});