From 1860acc4aecaec57d51ef0d884f73c96e7d71c4d Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 23 Mar 2026 11:33:04 -0400 Subject: [PATCH 1/4] feat(Table): update isPlain to apply no-plain when false --- packages/react-table/src/components/Table/Table.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 144fc0ccb24..fafa13f8780 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -96,7 +96,7 @@ const TableBase: React.FunctionComponent = ({ variant, borders = true, isStickyHeader = false, - isPlain = false, + isPlain, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', @@ -226,6 +226,7 @@ const TableBase: React.FunctionComponent = ({ isStriped && styles.modifiers.striped, isExpandable && styles.modifiers.expandable, isPlain && styles.modifiers.plain, + isPlain !== undefined && isPlain === false && styles.modifiers.noPlain, hasNoInset && stylesTreeView.modifiers.noInset, isNested && 'pf-m-nested', hasAnimations && styles.modifiers.animateExpand From c7dd5466b003be62bbc664773be2241a1ae7202b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 23 Mar 2026 13:24:25 -0400 Subject: [PATCH 2/4] add unit tests for new behavior --- .../components/Table/__tests__/Table.test.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) 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..fb4c1871957 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 isPlain is false`, () => { + render(
); + + expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.noPlain); +}); + +test(`Does not render with class ${styles.modifiers.noPlain} when isPlain is not defined`, () => { + render(
); + + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlain); +}); + +test(`Does not render with class ${styles.modifiers.noPlain} when isPlain is true`, () => { + render(
); + + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlain); +}); From 86853d00374ee793715bf3842b7919c803ad3c4a Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 24 Mar 2026 13:01:59 -0400 Subject: [PATCH 3/4] feat(Table): update to two prop approach --- packages/react-table/src/components/Table/Table.tsx | 7 +++++-- .../src/components/Table/__tests__/Table.test.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index fafa13f8780..f9a03fe3dc8 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 */ + isNoPlainOnGlass?: boolean; /** If set to true, the table header sticks to the top of its container */ isStickyHeader?: boolean; /** @hide Forwarded ref */ @@ -96,7 +98,8 @@ const TableBase: React.FunctionComponent = ({ variant, borders = true, isStickyHeader = false, - isPlain, + isPlain = false, + isNoPlainOnGlass = false, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', @@ -226,7 +229,7 @@ const TableBase: React.FunctionComponent = ({ isStriped && styles.modifiers.striped, isExpandable && styles.modifiers.expandable, isPlain && styles.modifiers.plain, - isPlain !== undefined && isPlain === false && styles.modifiers.noPlain, + 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 fb4c1871957..5e1803c53bd 100644 --- a/packages/react-table/src/components/Table/__tests__/Table.test.tsx +++ b/packages/react-table/src/components/Table/__tests__/Table.test.tsx @@ -169,20 +169,20 @@ test(`Does not render with class ${styles.modifiers.plain} when isPlain is false expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.plain); }); -test(`Renders with class ${styles.modifiers.noPlain} when isPlain is false`, () => { - render(
); +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 isPlain is not defined`, () => { +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 isPlain is true`, () => { - render(
); +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); }); From 213a7412657e18b62c1104700124de99d521e566 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 26 Mar 2026 10:39:31 -0400 Subject: [PATCH 4/4] add warn for using both plain props at once --- packages/react-table/src/components/Table/Table.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index f9a03fe3dc8..c80ff4cdc23 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -50,7 +50,7 @@ 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 */ + /** @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; @@ -124,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);