@patternfly/react-table 6.6.1-prerelease.6 → 6.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.6.1-prerelease.6",
+  "version": "6.6.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.1-prerelease.4",
-    "@patternfly/react-icons": "^6.6.1-prerelease.0",
-    "@patternfly/react-styles": "^6.6.1-prerelease.0",
-    "@patternfly/react-tokens": "^6.6.1-prerelease.0",
+    "@patternfly/react-core": "^6.6.2",
+    "@patternfly/react-icons": "^6.6.1",
+    "@patternfly/react-styles": "^6.6.1",
+    "@patternfly/react-tokens": "^6.6.1",
     "lodash": "^4.18.1",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "94fe4bb22f4fe7e6a8421a4abc9aaf8f53f6800e"
+  "gitHead": "02bbb5540dc894017949e1b3b66083bce4c9deee"
 }

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 RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-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={<RhMicronsCheckmarkIcon />}
+          icon={<CheckIcon />}
         />
       </div>
       <div className={css(inlineStyles.inlineEditAction)}>

package/src/components/Table/HeaderCellInfoWrapper.tsx

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

package/src/components/Table/SortColumn.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-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 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 { 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 ? RhMicronsArrowUpIcon : RhMicronsArrowDownIcon;
+    SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon : LongArrowAltDownIcon;
   } else {
-    SortedByIcon = RhUiArrowUpDownIcon;
+    SortedByIcon = ArrowsAltVIcon;
   }
 
   if (favoriteButtonProps) {

package/src/components/Table/Tr.tsx

@@ -4,7 +4,6 @@ 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 */
@@ -116,7 +115,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         {...(isClickable && { tabIndex: 0 })}
         aria-label={ariaLabel}
         ref={innerRef}
-        {...(hasAnimations && rowIsHidden && { inert: IS_INERT })}
+        {...(hasAnimations && rowIsHidden && { 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 RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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 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 FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-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 RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-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 RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-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,47 +35,49 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
 
   return (
     <>
-      <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>
+      <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>
         </div>
-        <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}>
+        <div className={css(inlineEditStyles.inlineEditAction)}>
           <Button
-            ref={editButtonRef}
-            aria-label={`Edit ${rowAriaLabel}`}
-            onClick={() => onClick('edit')}
-            onKeyDown={(event) => onKeyDown(event, 'edit')}
+            aria-label={`Discard edits of ${rowAriaLabel}`}
+            onClick={() => onClick('cancel')}
+            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
             variant="plain"
           >
-            <RhUiEditFillIcon />
+            <RhMicronsCloseIcon />
           </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 RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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,12 +28,7 @@ export const TableEmptyState: React.FunctionComponent = () => (
       <Tr>
         <Td colSpan={8}>
           <Bullseye>
-            <EmptyState
-              headingLevel="h2"
-              titleText="No results found"
-              icon={RhMicronsSearchIcon}
-              variant={EmptyStateVariant.sm}
-            >
+            <EmptyState headingLevel="h2" titleText="No results found" icon={SearchIcon} 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 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 FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-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 ? <RhUiFolderOpenFillIcon /> : <RhUiFolderFillIcon />;
+      icon = isExpanded ? <FolderOpenIcon /> : <FolderIcon />;
     }
 
     const treeRow: TdProps['treeRow'] = {

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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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>
-        <RhUiQuestionMarkCircleIcon /> Help
+        <HelpIcon /> Help
       </DropdownItem>
     </>
   );
@@ -149,7 +149,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                 <ToolbarItem>
                   <NotificationBadge
                     aria-label="Notifications"
-                    variant={NotificationBadgeVariant.plain}
+                    variant={NotificationBadgeVariant.read}
                     onClick={() => {}}
                   />
                 </ToolbarItem>

package/src/demos/Table.md

@@ -48,18 +48,19 @@ ModalBody,
 ModalFooter,
 } from '@patternfly/react-core';
 import { DragDropSort } from '@patternfly/react-drag-drop';
-import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-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 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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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,7 +10,6 @@ import {
   DataListCell,
   DataListItemCells,
   Label,
-  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -27,8 +26,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';
@@ -390,13 +389,13 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
-        return <Label status={LabelStatus.success}>{labelText}</Label>;
+        return <Label color="green">{labelText}</Label>;
       case 'Stopped':
-        return <Label status={LabelStatus.warning}>{labelText}</Label>;
+        return <Label color="orange">{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label status={LabelStatus.info}>{labelText}</Label>;
+        return <Label color="blue">{labelText}</Label>;
       case 'Down':
-        return <Label status={LabelStatus.danger}>{labelText}</Label>;
+        return <Label color="red">{labelText}</Label>;
       default:
         return <></>;
     }
@@ -412,7 +411,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem>
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle icon={<RhUiFilterFillIcon />}>Name</MenuToggle>
+                <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
                 <MenuToggle variant="plain" aria-label="Sort columns" icon={<RhMicronsSortDownLargeToSmallIcon />} />

package/src/demos/examples/TableColumnManagementWithDraggable.tsx

@@ -9,7 +9,6 @@ import {
   DataListItemCells,
   DataListControl,
   Label,
-  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -27,8 +26,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';
@@ -285,13 +284,13 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
-        return <Label status={LabelStatus.success}>{labelText}</Label>;
+        return <Label color="green">{labelText}</Label>;
       case 'Stopped':
-        return <Label status={LabelStatus.warning}>{labelText}</Label>;
+        return <Label color="orange">{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label status={LabelStatus.info}>{labelText}</Label>;
+        return <Label color="blue">{labelText}</Label>;
       case 'Down':
-        return <Label status={LabelStatus.danger}>{labelText}</Label>;
+        return <Label color="red">{labelText}</Label>;
       default:
         return <></>;
     }
@@ -307,7 +306,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem>
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle icon={<RhUiFilterFillIcon />}>Name</MenuToggle>
+                <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
                 <MenuToggle

package/src/demos/examples/TableCompact.tsx

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

package/src/demos/examples/TableEmptyStateDefault.tsx

@@ -9,7 +9,7 @@ import {
   EmptyStateActions,
   PageSection
 } from '@patternfly/react-core';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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={RhMicronsSearchIcon}
+                  icon={SearchIcon}
                   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, LabelStatus, PageSection } from '@patternfly/react-core';
+import { Content, Label, 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 status={LabelStatus.success}>Running</Label> },
+    status: { title: <Label color="green">Running</Label> },
     details: (
       <Content>
         <p>
@@ -40,7 +40,7 @@ const serverData: Server[] = [
     threads: 9,
     applications: 24,
     workspaces: 17,
-    status: { title: <Label status={LabelStatus.danger}>Down</Label> },
+    status: { title: <Label color="red">Down</Label> },
     details: (
       <Content>
         <p>
@@ -60,7 +60,7 @@ const serverData: Server[] = [
     threads: 8,
     applications: 47,
     workspaces: 3,
-    status: { title: <Label status={LabelStatus.success}>Running</Label> },
+    status: { title: <Label color="green">Running</Label> },
     details: (
       <Content>
         <p>
@@ -80,7 +80,7 @@ const serverData: Server[] = [
     threads: 6,
     applications: 4,
     workspaces: 15,
-    status: { title: <Label status={LabelStatus.info}>Needs Maintenance</Label> },
+    status: { title: <Label color="blue">Needs Maintenance</Label> },
     details: (
       <Content>
         <p>
@@ -100,7 +100,7 @@ const serverData: Server[] = [
     threads: 9,
     applications: 24,
     workspaces: 17,
-    status: { title: <Label status={LabelStatus.warning}>Stopped</Label> },
+    status: { title: <Label color="orange">Stopped</Label> },
     details: (
       <Content>
         <p>

package/src/demos/examples/TableFilterable.tsx

@@ -8,7 +8,6 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   Label,
-  LabelStatus,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -22,8 +21,8 @@ import {
   SearchInput,
   ToolbarLabelGroup
 } from '@patternfly/react-core';
-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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
@@ -126,7 +125,7 @@ export const TableFilterable: React.FunctionComponent = () => {
               ref={toggleRef}
               onClick={onCategoryToggle}
               isExpanded={isCategoryDropdownOpen}
-              icon={<RhUiFilterFillIcon />}
+              icon={<FilterIcon />}
               style={
                 {
                   width: '100%',
@@ -277,7 +276,7 @@ export const TableFilterable: React.FunctionComponent = () => {
       collapseListedFiltersBreakpoint="xl"
     >
       <ToolbarContent>
-        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarGroup
             variant="filter-group"
             style={
@@ -307,7 +306,7 @@ export const TableFilterable: React.FunctionComponent = () => {
       : rowData;
 
   const emptyState = (
-    <EmptyState icon={RhMicronsSearchIcon} titleText="Clear all filters and try again." headingLevel="h5">
+    <EmptyState icon={SearchIcon} 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>
@@ -327,13 +326,13 @@ export const TableFilterable: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
-        return <Label status={LabelStatus.success}>{labelText}</Label>;
+        return <Label color="green">{labelText}</Label>;
       case 'Stopped':
-        return <Label status={LabelStatus.warning}>{labelText}</Label>;
+        return <Label color="orange">{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label status={LabelStatus.info}>{labelText}</Label>;
+        return <Label color="blue">{labelText}</Label>;
       case 'Down':
-        return <Label status={LabelStatus.danger}>{labelText}</Label>;
+        return <Label color="red">{labelText}</Label>;
     }
   };