@patternfly/react-table 6.6.0 → 6.6.1-prerelease.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.6.0",
+  "version": "6.6.1-prerelease.1",
   "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.0",
-    "@patternfly/react-icons": "^6.6.0",
-    "@patternfly/react-styles": "^6.6.0",
-    "@patternfly/react-tokens": "^6.6.0",
+    "@patternfly/react-core": "^6.6.1-prerelease.1",
+    "@patternfly/react-icons": "^6.6.1-prerelease.0",
+    "@patternfly/react-styles": "^6.6.1-prerelease.0",
+    "@patternfly/react-tokens": "^6.6.1-prerelease.0",
     "lodash": "^4.18.1",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "6f2385bbcc03de22a7ae8be506481e1b4d653200"
+  "gitHead": "759a598cc45873e3b57704a57940614e0079d904"
 }

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/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/examples/Table.md

@@ -42,18 +42,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';

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';
@@ -50,7 +50,7 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
             onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
             variant="plain"
           >
-            <CheckIcon />
+            <RhMicronsCheckmarkIcon />
           </Button>
         </div>
         <div className={css(inlineEditStyles.inlineEditAction)}>

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/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/utils/decorators/treeRow.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
-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';
 import RhUiEllipsisHorizontalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-horizontal-fill-icon';
 
 export const treeRow =
@@ -54,7 +54,7 @@ export const treeRow =
                   aria-label={toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}`}
                   icon={
                     <div className={css(stylesTreeView.tableToggleIcon)}>
-                      <RhMicronsCaretDownIcon />
+                      <RhMicronsCaretRightIcon />
                     </div>
                   }
                 />

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

package/src/demos/examples/TableCompact.tsx

@@ -12,10 +12,11 @@ import {
   ToolbarGroup,
   ToolbarItem,
   Label,
+  LabelStatus,
   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 RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
@@ -72,7 +73,7 @@ export const TableCompact: React.FunctionComponent = () => {
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                icon={<FilterIcon />}
+                icon={<RhUiFilterFillIcon />}
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}
@@ -113,13 +114,13 @@ export const TableCompact: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     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>;
-      case 'Needs Maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
+      case 'Needs maintenance':
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
       default:
         return <></>;
     }

package/src/demos/examples/TableCompoundExpansion.tsx

@@ -20,7 +20,7 @@ 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 { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const TableCompoundExpansion: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -93,7 +93,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}
-                icon={<FilterIcon />}
+                icon={<RhUiFilterFillIcon />}
               >
                 Status
               </MenuToggle>

package/src/demos/examples/TableEmptyStateDefault.tsx

@@ -9,7 +9,7 @@ import {
   EmptyStateActions,
   PageSection
 } 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';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateDefault: React.FunctionComponent = () => (
@@ -31,7 +31,7 @@ export const TableEmptyStateDefault: React.FunctionComponent = () => (
               <Bullseye>
                 <EmptyState
                   titleText="No results found"
-                  icon={SearchIcon}
+                  icon={RhMicronsSearchIcon}
                   headingLevel="h2"
                   variant={EmptyStateVariant.sm}
                 >

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -1,5 +1,5 @@
 import { Fragment, ReactNode, useEffect, useState } from 'react';
-import { Content, Label, PageSection } from '@patternfly/react-core';
+import { Content, Label, LabelStatus, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
@@ -20,7 +20,7 @@ const serverData: Server[] = [
     threads: 18,
     applications: 42,
     workspaces: 7,
-    status: { title: <Label color="green">Running</Label> },
+    status: { title: <Label status={LabelStatus.success}>Running</Label> },
     details: (
       <Content>
         <p>
@@ -40,7 +40,7 @@ const serverData: Server[] = [
     threads: 9,
     applications: 24,
     workspaces: 17,
-    status: { title: <Label color="red">Down</Label> },
+    status: { title: <Label status={LabelStatus.danger}>Down</Label> },
     details: (
       <Content>
         <p>
@@ -60,7 +60,7 @@ const serverData: Server[] = [
     threads: 8,
     applications: 47,
     workspaces: 3,
-    status: { title: <Label color="green">Running</Label> },
+    status: { title: <Label status={LabelStatus.success}>Running</Label> },
     details: (
       <Content>
         <p>
@@ -80,7 +80,7 @@ const serverData: Server[] = [
     threads: 6,
     applications: 4,
     workspaces: 15,
-    status: { title: <Label color="blue">Needs Maintenance</Label> },
+    status: { title: <Label status={LabelStatus.info}>Needs Maintenance</Label> },
     details: (
       <Content>
         <p>
@@ -100,7 +100,7 @@ const serverData: Server[] = [
     threads: 9,
     applications: 24,
     workspaces: 17,
-    status: { title: <Label color="orange">Stopped</Label> },
+    status: { title: <Label status={LabelStatus.warning}>Stopped</Label> },
     details: (
       <Content>
         <p>

package/src/demos/examples/TableFilterable.tsx

@@ -8,6 +8,7 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   Label,
+  LabelStatus,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -21,8 +22,8 @@ import {
   SearchInput,
   ToolbarLabelGroup
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
@@ -125,7 +126,7 @@ export const TableFilterable: React.FunctionComponent = () => {
               ref={toggleRef}
               onClick={onCategoryToggle}
               isExpanded={isCategoryDropdownOpen}
-              icon={<FilterIcon />}
+              icon={<RhUiFilterFillIcon />}
               style={
                 {
                   width: '100%',
@@ -276,7 +277,7 @@ export const TableFilterable: React.FunctionComponent = () => {
       collapseListedFiltersBreakpoint="xl"
     >
       <ToolbarContent>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarGroup
             variant="filter-group"
             style={
@@ -306,7 +307,7 @@ export const TableFilterable: React.FunctionComponent = () => {
       : rowData;
 
   const emptyState = (
-    <EmptyState icon={SearchIcon} titleText="Clear all filters and try again." headingLevel="h5">
+    <EmptyState icon={RhMicronsSearchIcon} titleText="Clear all filters and try again." headingLevel="h5">
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -326,13 +327,13 @@ export const TableFilterable: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     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>;
     }
   };
 

package/src/demos/examples/TableSortableResponsive.tsx

@@ -20,6 +20,7 @@ import {
   OverflowMenuDropdownItem,
   PaginationVariant,
   Label,
+  LabelStatus,
   Select,
   OverflowMenu,
   OverflowMenuContent,
@@ -29,9 +30,9 @@ import {
   PageSectionVariants
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-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 EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
@@ -120,13 +121,13 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     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>;
-      case 'Needs Maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
+      case 'Needs maintenance':
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
     }
   };
 
@@ -214,10 +215,10 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
             <Button aria-label="Edit" variant="plain" icon={<EditIcon />} />
           </ToolbarItem>
           <ToolbarItem>
-            <Button aria-label="Clone" variant="plain" icon={<CloneIcon />} />
+            <Button aria-label="Clone" variant="plain" icon={<RhUiCopyFillIcon />} />
           </ToolbarItem>
           <ToolbarItem>
-            <Button aria-label="Sync" variant="plain" icon={<SyncIcon />} />
+            <Button aria-label="Sync" variant="plain" icon={<RhUiSyncIcon />} />
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem variant="pagination">{renderPagination('top', true)}</ToolbarItem>