From 4347b41538d0bc7fb88711582e43fc7786801813 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 23 Mar 2026 11:33:04 -0400 Subject: [PATCH 1/5] 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 9bb09b637891554d79a6443f608ac135bd03558b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 23 Mar 2026 13:24:25 -0400 Subject: [PATCH 2/5] 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 cba2da6028404a73521fea3325230aa98c511aa3 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 24 Mar 2026 13:01:59 -0400 Subject: [PATCH 3/5] 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 e96381a51714eeb79496f28fe9efec51522720e6 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 26 Mar 2026 10:39:31 -0400 Subject: [PATCH 4/5] 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); From 460611dbc6245417214f4a612e7c3d197e1f9d89 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 30 Mar 2026 09:45:54 -0400 Subject: [PATCH 5/5] bump core for class name, remove warning --- packages/react-table/src/components/Table/Table.tsx | 11 ++--------- .../src/components/Table/__tests__/Table.test.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index c80ff4cdc23..fc2305011a2 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. If isPlain is also set, this property will be ignored. */ + /** @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; @@ -124,13 +124,6 @@ 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); @@ -236,7 +229,7 @@ const TableBase: React.FunctionComponent = ({ isStriped && styles.modifiers.striped, isExpandable && styles.modifiers.expandable, isPlain && styles.modifiers.plain, - isNoPlainOnGlass && styles.modifiers.noPlain, + isNoPlainOnGlass && styles.modifiers.noPlainOnGlass, 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 5e1803c53bd..e5a6dc373a2 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 isNoPlainOnGlass is true`, () => { +test(`Renders with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is true`, () => { render(
); - expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.noPlain); + expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.noPlainOnGlass); }); -test(`Does not render with class ${styles.modifiers.noPlain} when isNoPlainOnGlass is undefined`, () => { +test(`Does not render with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is undefined`, () => { render(
); - expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlain); + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlainOnGlass); }); -test(`Does not render with class ${styles.modifiers.noPlain} when isNoPlainOnGlass is false`, () => { +test(`Does not render with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is false`, () => { render(
); - expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlain); + expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlainOnGlass); });