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

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>

package/src/demos/examples/TableStaticBottomPagination.tsx

@@ -10,12 +10,13 @@ import {
   MenuToggle,
   MenuToggleElement,
   Label,
+  LabelStatus,
   Select,
   SelectOption,
   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 { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
@@ -67,25 +68,25 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
       case 'Running':
         return (
           <span>
-            <Label color="green">{labelText}</Label>
+            <Label status={LabelStatus.success}>{labelText}</Label>
           </span>
         );
       case 'Stopped':
         return (
           <span>
-            <Label color="orange">{labelText}</Label>
+            <Label status={LabelStatus.warning}>{labelText}</Label>
           </span>
         );
-      case 'Needs Maintenance':
+      case 'Needs maintenance':
         return (
           <span>
-            <Label color="blue">{labelText}</Label>
+            <Label status={LabelStatus.info}>{labelText}</Label>
           </span>
         );
       case 'Down':
         return (
           <span>
-            <Label color="red">{labelText}</Label>
+            <Label status={LabelStatus.danger}>{labelText}</Label>
           </span>
         );
     }
@@ -100,7 +101,7 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                icon={<FilterIcon />}
+                icon={<RhUiFilterFillIcon />}
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}

package/src/demos/examples/TableStickyHeader.tsx

@@ -1,4 +1,4 @@
-import { Label, PageSection } from '@patternfly/react-core';
+import { Label, LabelStatus, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
@@ -7,13 +7,13 @@ export const TableStickyHeader: 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>;
     }
   };
 

package/src/deprecated/components/Table/Table.tsx

@@ -253,6 +253,7 @@ class Table extends Component<TableProps, {}> {
       actionsToggle,
       onFavorite,
       canSortFavorites,
+      variant,
       // order of columns: Collapsible | Selectable | Favoritable
       firstUserColumnIndex: [onCollapse, onSelect, onFavorite].filter((callback) => callback).length
     });

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

@@ -279,6 +279,25 @@ describe('Table', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('Compact table with Radio select', () => {
+    const onSelect: OnSelect = () => undefined;
+    const { asFragment } = render(
+      <Table
+        aria-label="Compact table with radio"
+        variant={TableVariant.compact}
+        selectVariant={RowSelectVariant.radio}
+        onSelect={onSelect}
+        cells={columns}
+        rows={rows}
+      >
+        <TableHeader />
+        <TableBody />
+      </Table>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('Control text table', () => {
     const controlTextColumns: ICell[] = [
       { ...(columns[0] as object), transforms: [nowrap] },