@patternfly/react-table 6.6.2 → 6.7.0-prerelease.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.6.2",
+  "version": "6.7.0-prerelease.2",
   "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,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.6.2",
-    "@patternfly/react-icons": "^6.6.1",
-    "@patternfly/react-styles": "^6.6.1",
-    "@patternfly/react-tokens": "^6.6.1",
+    "@patternfly/react-core": "^6.7.0-prerelease.2",
+    "@patternfly/react-icons": "^6.7.0-prerelease.0",
+    "@patternfly/react-styles": "^6.7.0-prerelease.0",
+    "@patternfly/react-tokens": "^6.7.0-prerelease.1",
     "lodash": "^4.18.1",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "02bbb5540dc894017949e1b3b66083bce4c9deee"
+  "gitHead": "6a486021829bef4ba8c6a772c035b364ab5f0686"
 }

package/src/components/Table/EditColumn.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-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';
@@ -38,7 +38,7 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
           {...props}
           onClick={(e) => onClick(e, 'save')}
           variant="plain"
-          icon={<CheckIcon />}
+          icon={<RhMicronsCheckmarkIcon />}
         />
       </div>
       <div className={css(inlineStyles.inlineEditAction)}>

package/src/components/Table/HeaderCellInfoWrapper.tsx

@@ -1,4 +1,4 @@
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
@@ -55,7 +55,7 @@ export const HeaderCellInfoWrapper: React.FunctionComponent<ColumnHelpWrapperPro
             variant="plain"
             hasNoPadding
             aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
-            icon={<HelpIcon />}
+            icon={<RhUiQuestionMarkCircleIcon />}
           />
         </Tooltip>
       ) : (
@@ -64,7 +64,7 @@ export const HeaderCellInfoWrapper: React.FunctionComponent<ColumnHelpWrapperPro
             variant="plain"
             hasNoPadding
             aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
-            icon={<HelpIcon />}
+            icon={<RhUiQuestionMarkCircleIcon />}
           />
         </Popover>
       )}

package/src/components/Table/SortColumn.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import LongArrowAltUpIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-up-icon';
-import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
-import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-icon';
+import RhMicronsArrowUpIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-arrow-up-icon';
+import RhMicronsArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-arrow-down-icon';
+import RhUiArrowUpDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-up-down-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { TableText } from './TableText';
@@ -43,9 +43,9 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   let SortedByIcon;
   const [focused, setFocused] = useState(false);
   if (isSortedBy) {
-    SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon : LongArrowAltDownIcon;
+    SortedByIcon = sortDirection === SortByDirection.asc ? RhMicronsArrowUpIcon : RhMicronsArrowDownIcon;
   } else {
-    SortedByIcon = ArrowsAltVIcon;
+    SortedByIcon = RhUiArrowUpDownIcon;
   }
 
   if (favoriteButtonProps) {

package/src/components/Table/Table.tsx

@@ -58,6 +58,8 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   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;
+  /** Flag indicating the table footer should stick to the bottom of its scroll container. */
+  isStickyFooter?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<any>;
   /** Flag indicating table is a tree table */
@@ -104,6 +106,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isStickyHeader = false,
   isStickyHeaderBase = false,
   isStickyHeaderStuck = false,
+  isStickyFooter = false,
   isPlain = false,
   isNoPlainOnGlass = false,
   gridBreakPoint = TableGridBreakpoint.gridMd,
@@ -233,6 +236,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isStickyHeader && styles.modifiers.stickyHeader,
           isStickyHeaderBase && styles.modifiers.stickyHeaderBase,
           isStickyHeaderStuck && styles.modifiers.stickyHeaderStuck,
+          isStickyFooter && styles.modifiers.stickyFooter,
           isTreeTable && stylesTreeView.modifiers.treeView,
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,

package/src/components/Table/Tfoot.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+export interface TfootProps extends React.HTMLProps<HTMLTableSectionElement> {
+  /** Content rendered inside the <tfoot> row group */
+  children?: React.ReactNode;
+  /** Additional classes added to the <tfoot> element */
+  className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+}
+
+const TfootBase: React.FunctionComponent<TfootProps> = ({ children, className, innerRef, ...props }: TfootProps) => (
+  <tfoot className={css(styles.tableTfoot, className)} ref={innerRef} {...props}>
+    {children}
+  </tfoot>
+);
+
+export const Tfoot = forwardRef((props: TfootProps, ref: React.Ref<HTMLTableSectionElement>) => (
+  <TfootBase {...props} innerRef={ref} />
+));
+Tfoot.displayName = 'Tfoot';

package/src/components/Table/Tr.tsx

@@ -4,6 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Table/table';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 import { TableContext } from './Table';
+import { IS_INERT } from './utils/inert';
 
 export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
   /** Content rendered inside the <tr> row */
@@ -115,7 +116,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         {...(isClickable && { tabIndex: 0 })}
         aria-label={ariaLabel}
         ref={innerRef}
-        {...(hasAnimations && rowIsHidden && { inert: '' })}
+        {...(hasAnimations && rowIsHidden && { inert: IS_INERT })}
         {...(onRowClick && { onClick: onRowClick, onKeyDown })}
         {...ouiaProps}
         {...props}

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

@@ -222,3 +222,15 @@ test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isSt
 
   expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
 });
+
+test(`Renders with class ${styles.modifiers.stickyFooter} when isStickyFooter is true`, () => {
+  render(<Table isStickyFooter aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyFooter);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyFooter} when isStickyFooter is false`, () => {
+  render(<Table isStickyFooter={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyFooter);
+});

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

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { Tfoot } from '../Tfoot';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(
+    <table>
+      <Tfoot />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(
+    <table>
+      <Tfoot>Footer content</Tfoot>
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveTextContent('Footer content');
+});
+
+test(`Renders with class ${styles.tableTfoot} only by default`, () => {
+  render(
+    <table>
+      <Tfoot />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveClass(styles.tableTfoot, { exact: true });
+});
+
+test('Forwards refs to the tfoot element', () => {
+  const ref = { current: null } as React.RefObject<HTMLTableSectionElement>;
+
+  render(
+    <table>
+      <Tfoot ref={ref} />
+    </table>
+  );
+
+  expect(ref.current).toBe(screen.getByRole('rowgroup'));
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(
+    <table>
+      <Tfoot className="custom-footer" />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveClass('custom-footer');
+});
+
+test('Spreads additional props', () => {
+  render(
+    <table>
+      <Tfoot data-custom="true" />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveAttribute('data-custom', 'true');
+});

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

@@ -10,6 +10,7 @@ propComponents:
     'Tr',
     'Th',
     'Td',
+    'Tfoot',
     'Caption',
     'TableText',
     'TdActionsType',
@@ -42,18 +43,18 @@ 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, useLayoutEffect } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 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 RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
 import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
 import RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 import { css } from '@patternfly/react-styles';
@@ -480,6 +481,14 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 
 ```
 
+### Sticky footer
+
+Use `Tfoot` for semantic table footer rows. Set `isStickyFooter` on `Table` to keep the footer visible while its scroll container is scrolling.
+
+```ts file="TableStickyFooter.tsx"
+
+```
+
 ### Striped
 
 To apply striping to a basic table, add the `isStriped` property to `Table`.

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

@@ -2,7 +2,7 @@ import { isValidElement, useRef, useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Button, Checkbox, Radio, TextInput, KeyTypes, getUniqueId } from '@patternfly/react-core';
 import RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-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';
@@ -35,49 +35,47 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
 
   return (
     <>
-      <Td
-        dataLabel="Save and cancel buttons"
-        className={css(
-          inlineEditStyles.inlineEditGroup,
-          inlineEditStyles.modifiers.iconGroup,
-          inlineEditStyles.modifiers.actionGroup
-        )}
-      >
-        <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.valid)}>
-          <Button
-            aria-label={`Save edits of ${rowAriaLabel}`}
-            onClick={() => onClick('save')}
-            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
-            variant="plain"
-          >
-            <CheckIcon />
-          </Button>
+      <Td dataLabel="Edit row data" hasAction>
+        <div
+          className={css(
+            inlineEditStyles.inlineEditGroup,
+            inlineEditStyles.modifiers.iconGroup,
+            inlineEditStyles.modifiers.actionGroup
+          )}
+        >
+          <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.valid)}>
+            <Button
+              aria-label={`Save edits of ${rowAriaLabel}`}
+              onClick={() => onClick('save')}
+              onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+              variant="plain"
+            >
+              <RhMicronsCheckmarkIcon />
+            </Button>
+          </div>
+          <div className={css(inlineEditStyles.inlineEditAction)}>
+            <Button
+              aria-label={`Discard edits of ${rowAriaLabel}`}
+              onClick={() => onClick('cancel')}
+              onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+              variant="plain"
+            >
+              <RhMicronsCloseIcon />
+            </Button>
+          </div>
         </div>
-        <div className={css(inlineEditStyles.inlineEditAction)}>
+        <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}>
           <Button
-            aria-label={`Discard edits of ${rowAriaLabel}`}
-            onClick={() => onClick('cancel')}
-            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+            ref={editButtonRef}
+            aria-label={`Edit ${rowAriaLabel}`}
+            onClick={() => onClick('edit')}
+            onKeyDown={(event) => onKeyDown(event, 'edit')}
             variant="plain"
           >
-            <RhMicronsCloseIcon />
+            <RhUiEditFillIcon />
           </Button>
         </div>
       </Td>
-      <Td
-        dataLabel="Edit button"
-        className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}
-      >
-        <Button
-          ref={editButtonRef}
-          aria-label={`Edit ${rowAriaLabel}`}
-          onClick={() => onClick('edit')}
-          onKeyDown={(event) => onKeyDown(event, 'edit')}
-          variant="plain"
-        >
-          <RhUiEditFillIcon />
-        </Button>
-      </Td>
     </>
   );
 };

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

@@ -8,7 +8,7 @@ import {
   EmptyStateFooter,
   EmptyStateActions
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 // This example has been simplified to focus on the empty state. In real usage,
 // you may want to derive your rows from typed underlying data and minimal state. See other examples.
@@ -28,7 +28,12 @@ export const TableEmptyState: React.FunctionComponent = () => (
       <Tr>
         <Td colSpan={8}>
           <Bullseye>
-            <EmptyState headingLevel="h2" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+            <EmptyState
+              headingLevel="h2"
+              titleText="No results found"
+              icon={RhMicronsSearchIcon}
+              variant={EmptyStateVariant.sm}
+            >
               <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>
               <EmptyStateFooter>
                 <EmptyStateActions>

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

@@ -0,0 +1,33 @@
+import { Table, Thead, Tfoot, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
+
+export const TableStickyFooter: React.FunctionComponent = () => {
+  const rows = Array.from({ length: 12 }, (_, index) => index + 1);
+
+  return (
+    <div style={{ height: '400px' }}>
+      <InnerScrollContainer>
+        <Table aria-label="Sticky footer table" isStickyFooter>
+          <Thead>
+            <Tr>
+              <Th>Item</Th>
+              <Th>Value</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map((row) => (
+              <Tr key={row}>
+                <Td dataLabel="Item">Item {row}</Td>
+                <Td dataLabel="Value">Value {row}</Td>
+              </Tr>
+            ))}
+          </Tbody>
+          <Tfoot>
+            <Tr>
+              <Td colSpan={2}>Total: {rows.length} items</Td>
+            </Tr>
+          </Tfoot>
+        </Table>
+      </InnerScrollContainer>
+    </div>
+  );
+};

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

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } from '@patternfly/react-table';
 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 RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon';
 
 interface RepositoriesTreeNode {
   name: string;
@@ -139,7 +139,7 @@ export const TableTree: React.FunctionComponent = () => {
     const isChecked = isNodeChecked(node);
     let icon = <LeafIcon />;
     if (node.children) {
-      icon = isExpanded ? <FolderOpenIcon /> : <FolderIcon />;
+      icon = isExpanded ? <RhUiFolderOpenFillIcon /> : <RhUiFolderFillIcon />;
     }
 
     const treeRow: TdProps['treeRow'] = {

package/src/components/Table/index.ts

@@ -16,6 +16,7 @@ export * from './TreeRowWrapper';
 export * from './Table';
 export * from './Thead';
 export * from './Tbody';
+export * from './Tfoot';
 export * from './Tr';
 export * from './Th';
 export * from './Td';

package/src/components/Table/utils/inert.ts

@@ -0,0 +1,7 @@
+import { version } from 'react';
+
+/**
+ * Before React 19, React JSX treats empty string "" as truthy for inert prop.
+ * @see {@link https://stackoverflow.com/questions/72720469}
+ */
+export const IS_INERT = Number(version.split('.')[0]) >= 19 ? true : ('' as unknown as boolean);

package/src/demos/DashboardHeader.tsx

@@ -24,7 +24,7 @@ import {
   PageToggleButton
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg';
@@ -90,7 +90,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );
@@ -149,7 +149,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                 <ToolbarItem>
                   <NotificationBadge
                     aria-label="Notifications"
-                    variant={NotificationBadgeVariant.read}
+                    variant={NotificationBadgeVariant.plain}
                     onClick={() => {}}
                   />
                 </ToolbarItem>

package/src/demos/Table.md

@@ -48,19 +48,18 @@ ModalBody,
 ModalFooter,
 } from '@patternfly/react-core';
 import { DragDropSort } from '@patternfly/react-drag-drop';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';

package/src/demos/examples/TableColumnManagement.tsx

@@ -10,6 +10,7 @@ import {
   DataListCell,
   DataListItemCells,
   Label,
+  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -26,8 +27,8 @@ import {
   PaginationVariant
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils';
 import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
@@ -389,13 +390,13 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
       default:
         return <></>;
     }
@@ -411,7 +412,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem>
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
+                <MenuToggle icon={<RhUiFilterFillIcon />}>Name</MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
                 <MenuToggle variant="plain" aria-label="Sort columns" icon={<RhMicronsSortDownLargeToSmallIcon />} />

package/src/demos/examples/TableColumnManagementWithDraggable.tsx

@@ -9,6 +9,7 @@ import {
   DataListItemCells,
   DataListControl,
   Label,
+  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -26,8 +27,8 @@ import {
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { DragDropSort } from '@patternfly/react-drag-drop';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils';
 import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
@@ -284,13 +285,13 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
       default:
         return <></>;
     }
@@ -306,7 +307,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem>
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
+                <MenuToggle icon={<RhUiFilterFillIcon />}>Name</MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
                 <MenuToggle