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

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

* add unit tests for new behavior

* feat(Table): update to two prop approach

* add warn for using both plain props at once

* bump core for class name, remove warning

Author: kmcfaul

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 */
+  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',
@@ -226,6 +229,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,
           isPlain && styles.modifiers.plain,
+          isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
           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.noPlainOnGlass} when isNoPlainOnGlass is true`, () => {
+  render(<Table isNoPlainOnGlass aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Does not render with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Does not render with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is false`, () => {
+  render(<Table isNoPlainOnGlass={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlainOnGlass);
+});