feat(Table): update isPlain to apply no-plain when false

packages/react-table/src/components/Table/Table.tsx

@@ -50,6 +50,8 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, 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<TableProps> = ({
   borders = true,
   isStickyHeader = false,
   isPlain = false,
+  isNoPlainOnGlass = false,
   gridBreakPoint = TableGridBreakpoint.gridMd,
   'aria-label': ariaLabel,
   role = 'grid',
@@ -121,6 +124,13 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   const [hasSelectableRows, setHasSelectableRows] = useState(false);
   const [tableCaption, setTableCaption] = useState<React.JSX.Element | undefined>();
 
+  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<TableProps> = ({
           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

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(<Table aria-label="Test table" />);
+
+  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(<Table isPlain={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with class ${styles.modifiers.noPlain} when isNoPlainOnGlass is true`, () => {
+  render(<Table isNoPlainOnGlass aria-label="Test table" />);
+
+  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(<Table aria-label="Test table" />);
+
+  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(<Table isNoPlainOnGlass={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlain);
+});