@patternfly/react-table 6.5.0-prerelease.8 → 6.5.0-prerelease.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.5.0-prerelease.8",
+  "version": "6.5.0-prerelease.80",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,16 +40,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.5.0-prerelease.8",
-    "@patternfly/react-icons": "^6.5.0-prerelease.3",
-    "@patternfly/react-styles": "^6.5.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.3",
-    "lodash": "^4.17.21",
+    "@patternfly/react-core": "^6.5.0-prerelease.76",
+    "@patternfly/react-icons": "^6.5.0-prerelease.36",
+    "@patternfly/react-styles": "^6.5.0-prerelease.26",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.25",
+    "lodash": "^4.18.1",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "a88ecfa753389be67ee88657914fc030440838f3"
+  "gitHead": "41fa345ea84fbf83dcefdd1dd46333be302f005d"
 }

package/src/components/Table/CollapseColumn.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { css } from '@patternfly/react-styles';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import styles from '@patternfly/react-styles/css/components/Table/table';
@@ -34,7 +34,7 @@ export const CollapseColumn: React.FunctionComponent<CollapseColumnProps> = ({
         aria-expanded={isOpen}
         icon={
           <div className={css(styles.tableToggleIcon)}>
-            <AngleDownIcon />
+            <RhMicronsCaretDownIcon />
           </div>
         }
       />

package/src/components/Table/EditColumn.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import { OnRowEdit } from './TableTypes';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
@@ -47,7 +47,7 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
           {...props}
           onClick={(e) => onClick(e, 'cancel')}
           variant="plain"
-          icon={<TimesIcon />}
+          icon={<RhMicronsCloseIcon />}
         />
       </div>
     </div>

package/src/components/Table/EditableSelectInputCell.tsx

@@ -6,8 +6,10 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';
 
-export interface IEditableSelectInputCell
-  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'> {
+export interface IEditableSelectInputCell extends Omit<
+  React.HTMLProps<HTMLElement | HTMLDivElement>,
+  'onSelect' | 'onToggle'
+> {
   /** Row index of this select input cell */
   rowIndex: number;
   /** Cell index of this select input cell */

package/src/components/Table/InnerScrollContainer.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table-scrollable';
 
@@ -6,16 +7,22 @@ export interface InnerScrollContainerProps extends React.HTMLProps<HTMLDivElemen
   children?: React.ReactNode;
   /** Additional classes added to the container */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const InnerScrollContainer: React.FunctionComponent<InnerScrollContainerProps> = ({
+const InnerScrollContainerBase: React.FunctionComponent<InnerScrollContainerProps> = ({
   children,
   className,
+  innerRef,
   ...props
 }: InnerScrollContainerProps) => (
-  <div className={css(className, styles.scrollInnerWrapper)} {...props}>
+  <div ref={innerRef} className={css(className, styles.scrollInnerWrapper)} {...props}>
     {children}
   </div>
 );
 
+export const InnerScrollContainer = forwardRef((props: InnerScrollContainerProps, ref: React.Ref<HTMLDivElement>) => (
+  <InnerScrollContainerBase innerRef={ref} {...props} />
+));
 InnerScrollContainer.displayName = 'InnerScrollContainer';

package/src/components/Table/SelectColumn.tsx

@@ -21,6 +21,8 @@ export interface SelectColumnProps {
   id?: string;
   /** name for the input element - required by Radio component */
   name?: string;
+  /** Whether the checkbox should be in an indeterminate state */
+  isIndeterminate?: boolean;
 }
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
@@ -33,6 +35,7 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   tooltipProps,
   id,
   name,
+  isIndeterminate,
   ...props
 }: SelectColumnProps) => {
   const inputRef = createRef<any>();
@@ -48,10 +51,15 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
     onChange: handleChange
   };
 
+  const checkboxProps = {
+    ...commonProps,
+    ...(isIndeterminate && { isChecked: null })
+  };
+
   const content = (
     <Fragment>
       {selectVariant === RowSelectVariant.checkbox ? (
-        <Checkbox {...commonProps} />
+        <Checkbox {...checkboxProps} />
       ) : (
         <Radio {...commonProps} name={name} />
       )}

package/src/components/Table/Table.tsx

@@ -50,8 +50,14 @@ 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;
-  /** If set to true, the table header sticks to the top of its container */
+  /** @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. This property applies both the sticky position and styling. */
   isStickyHeader?: boolean;
+  /** @beta Flag indicating the table header should have sticky positioning to the top of the parent InnerScrollContainer. */
+  isStickyHeaderBase?: boolean;
+  /** @beta Flag indicating the table header should have stuck styling, when the header is not at the top of the scroll container. */
+  isStickyHeaderStuck?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<any>;
   /** Flag indicating table is a tree table */
@@ -96,7 +102,10 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   variant,
   borders = true,
   isStickyHeader = false,
+  isStickyHeaderBase = false,
+  isStickyHeaderStuck = false,
   isPlain = false,
+  isNoPlainOnGlass = false,
   gridBreakPoint = TableGridBreakpoint.gridMd,
   'aria-label': ariaLabel,
   role = 'grid',
@@ -222,10 +231,13 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           styles.modifiers[variant],
           !borders && styles.modifiers.noBorderRows,
           isStickyHeader && styles.modifiers.stickyHeader,
+          isStickyHeaderBase && styles.modifiers.stickyHeaderBase,
+          isStickyHeaderStuck && styles.modifiers.stickyHeaderStuck,
           isTreeTable && stylesTreeView.modifiers.treeView,
           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

package/src/components/Table/TableTypes.tsx

@@ -107,6 +107,7 @@ export interface IColumn {
     allRowsSelected?: boolean;
     allRowsExpanded?: boolean;
     isHeaderSelectDisabled?: boolean;
+    isIndeterminate?: boolean;
     onFavorite?: OnFavorite;
     favoriteButtonProps?: ButtonProps;
     variant?: 'compact';

package/src/components/Table/Th.tsx

@@ -15,8 +15,7 @@ import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table_
 import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface ThProps
-  extends BaseCellProps,
-    Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
+  extends BaseCellProps, Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to. Applicable when this component is used as a direct child to <Tr>.
    * This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.
@@ -159,7 +158,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             onSelect: select?.onSelect,
             selectVariant: 'checkbox',
             allRowsSelected: select.isSelected,
-            isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
+            isHeaderSelectDisabled: !!select.isHeaderSelectDisabled,
+            isIndeterminate: select?.isIndeterminate
           }
         },
         tooltip: tooltip as string,

package/src/components/Table/__tests__/Table.test.tsx

@@ -156,3 +156,69 @@ 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);
+});
+
+test(`Renders with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is true`, () => {
+  render(<Table isStickyHeaderBase aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is false`, () => {
+  render(<Table isStickyHeaderBase={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Renders with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is true`, () => {
+  render(<Table isStickyHeaderStuck aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyHeaderStuck);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is false`, () => {
+  render(<Table isStickyHeaderStuck={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
+});

package/src/components/Table/__tests__/Th.test.tsx

@@ -54,3 +54,26 @@ test('Additional content renders after children when additionalContent is passed
   expect(thChildren.item(0)?.textContent).toEqual('Test');
   expect(thChildren.item(1)?.textContent).toEqual('Extra');
 });
+
+test('Renders checkbox without indeterminate state by default', () => {
+  render(<Th select={{ onSelect: jest.fn(), isSelected: false }} aria-label="Select all" />);
+
+  const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox.indeterminate).toBe(false);
+});
+
+test('Renders checkbox with indeterminate state when isIndeterminate is true', () => {
+  render(<Th select={{ onSelect: jest.fn(), isSelected: false, isIndeterminate: true }} aria-label="Select all" />);
+
+  const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+  expect(checkbox.indeterminate).toBe(true);
+});
+
+test('Renders checked checkbox when isSelected is true and isIndeterminate is false', () => {
+  render(<Th select={{ onSelect: jest.fn(), isSelected: true, isIndeterminate: false }} aria-label="Select all" />);
+
+  const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+  expect(checkbox).toBeChecked();
+  expect(checkbox.indeterminate).toBe(false);
+});

package/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`RowWrapper renders correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-1"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r0:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
@@ -21,7 +21,7 @@ exports[`RowWrapper renders expanded correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-TableRow-2"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r1:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />

package/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <table
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-12"
+    data-ouia-component-id="OUIA-Generated-Table-:rb:"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"

package/src/components/Table/__tests__/__snapshots__/Tr.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Matches snapshot with children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-6"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r5:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -25,7 +25,7 @@ exports[`Matches snapshot without children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-5"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r4:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />

package/src/components/Table/base/types.tsx

@@ -180,6 +180,8 @@ export interface ThSelectType {
   onSelect?: OnSelect;
   /** Whether the cell is selected */
   isSelected: boolean;
+  /** Whether the select checkbox should be in an indeterminate state (some items selected) */
+  isIndeterminate?: boolean;
   /** Flag indicating the select checkbox in the th is disabled */
   isHeaderSelectDisabled?: boolean;
   /** Whether to disable the selection */

package/src/components/Table/examples/Table.md

@@ -41,7 +41,7 @@ The `Table` component takes an explicit and declarative approach, and its implem
 
 The documentation for the deprecated table implementation can be found under the [React deprecated](/components/table/react-deprecated) tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.
 
-import { Fragment, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, isValidElement, useCallback, useEffect, useRef, useState, useLayoutEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -50,11 +50,11 @@ import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
-import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
@@ -78,10 +78,13 @@ Some general notes:
 ```ts file="TableBasic.tsx"
 
 ```
-### Table Plain
-``` file="TablePlain.tsx"
+
+### Plain
+
+```ts file="TablePlain.tsx"
 
 ```
+
 ### Custom row wrapper, header tooltips & popovers
 
 - If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space
@@ -155,6 +158,14 @@ checking checkboxes will check intermediate rows' checkboxes.
 
 ```
 
+### Selectable with indeterminate state
+
+To indicate partial selection, use `isIndeterminate` on the header's `select` prop. When some (but not all) selectable rows are selected, the header checkbox will convey this information to assistive technologies and also display a dash instead of a checkmark.
+
+```ts file="TableSelectableIndeterminate.tsx"
+
+```
+
 ### Selectable radio input
 
 Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props.
@@ -324,7 +335,6 @@ To enable a tree table:
    - `checkAriaLabel` - (optional) accessible label for the checkbox
    - `showDetailsAriaLabel` - (optional) accessible label for the show row details button in the responsive view
 4. The first `Td` in each row will pass the following to the `treeRow` prop:
-
    - `onCollapse` - Callback when user expands/collapses a row to reveal/hide the row's children.
    - `onCheckChange` - (optional) Callback when user changes the checkbox on a row.
    - `onToggleRowDetails` - (optional) Callback when user shows/hides the row details in responsive view.
@@ -416,6 +426,16 @@ To prevent the default text wrapping behavior and allow horizontal scrolling, al
 
 ```
 
+### Dynamic sticky header
+
+A sticky header may alternatively be implemented with two properties: `isStickyHeaderBase` and `isStickyHeaderStuck` - which allows separate control of the sticky position and sticky styling. `isStickyHeaderBase` should always be applied to make the header position sticky, and `isStickyHeaderStuck` may be applied dynamically to enable the sticky styling, such as when the sticky header is not at the top of the scroll parent as shown in the example.
+
+`isStickyHeader` acts as if both properties are present and true when applied, and is useful when dynamic sticky styling is not necessary.
+
+```ts file="TableStickyHeaderDynamic.tsx"
+
+```
+
 ### Sticky columns and header
 
 To maintain proper sticky behavior across sticky columns and header, `Table` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.

package/src/components/Table/examples/TableActions.tsx

@@ -23,7 +23,7 @@ interface Repository {
   singleAction: string;
 }
 
-type ExampleType = 'defaultToggle' | 'customToggle';
+type ExampleType = 'customToggle';
 
 export const TableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -45,10 +45,11 @@ export const TableActions: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('defaultToggle');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   const customActionsToggle = (props: CustomActionsToggleProps) => (
@@ -95,12 +96,6 @@ export const TableActions: React.FunctionComponent = () => {
   return (
     <Fragment>
       <ToggleGroup aria-label="Default uses kebab toggle">
-        <ToggleGroupItem
-          text="Default actions toggle"
-          buttonId="defaultToggle"
-          isSelected={exampleChoice === 'defaultToggle'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Custom actions toggle"
           buttonId="customToggle"

package/src/components/Table/examples/TableBasic.tsx

@@ -10,7 +10,7 @@ interface Repository {
   lastCommit: string;
 }
 
-type ExampleType = 'default' | 'compact' | 'compactBorderless';
+type ExampleType = 'compact' | 'compactBorderless';
 
 export const TableBasic: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -29,21 +29,16 @@ export const TableBasic: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('default');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   return (
     <Fragment>
       <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem
-          text="Default"
-          buttonId="default"
-          isSelected={exampleChoice === 'default'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Compact"
           buttonId="compact"
@@ -59,7 +54,7 @@ export const TableBasic: React.FunctionComponent = () => {
       </ToggleGroup>
       <Table
         aria-label="Simple table"
-        variant={exampleChoice !== 'default' ? 'compact' : undefined}
+        variant={exampleChoice === 'compact' || exampleChoice === 'compactBorderless' ? 'compact' : undefined}
         borders={exampleChoice !== 'compactBorderless'}
       >
         <Caption>Simple table using composable components</Caption>

package/src/components/Table/examples/TableEditable.tsx

@@ -3,7 +3,7 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Button, Checkbox, Radio, TextInput, KeyTypes, getUniqueId } from '@patternfly/react-core';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 
@@ -60,7 +60,7 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
             onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
             variant="plain"
           >
-            <TimesIcon />
+            <RhMicronsCloseIcon />
           </Button>
         </div>
       </Td>

package/src/components/Table/examples/TableMultipleStickyColumns.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
-import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
 
 interface Fact {
   name: string;
@@ -120,7 +120,7 @@ export const TableMultipleStickyColumns: React.FunctionComponent = () => {
                 {fact.name}
               </Th>
               <Th isStickyColumn stickyMinWidth="120px" stickyLeftOffset="120px" modifier="truncate" hasRightBorder>
-                <BlueprintIcon />
+                <RhUiBlueprintIcon />
                 {` ${fact.state}`}
               </Th>
               <Td modifier="nowrap" dataLabel={columnNames.header3}>