@patternfly/react-table 6.6.1-prerelease.0 → 6.6.1-prerelease.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.6.1-prerelease.0",
+  "version": "6.6.1-prerelease.10",
   "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.0",
-    "@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.1-prerelease.8",
+    "@patternfly/react-icons": "^6.6.1-prerelease.3",
+    "@patternfly/react-styles": "^6.6.1-prerelease.2",
+    "@patternfly/react-tokens": "^6.6.1-prerelease.2",
     "lodash": "^4.18.1",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "8acdd6b143e4d03b24e4f3964e9e6c1fa3696154"
+  "gitHead": "008744f97e0d226d41c0bec0b78ec938943392e3"
 }

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

@@ -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"
-          >
-            <RhMicronsCheckmarkIcon />
-          </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/demos/DashboardHeader.tsx

@@ -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/examples/TableColumnManagement.tsx

@@ -10,6 +10,7 @@ import {
   DataListCell,
   DataListItemCells,
   Label,
+  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -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 <></>;
     }

package/src/demos/examples/TableColumnManagementWithDraggable.tsx

@@ -9,6 +9,7 @@ import {
   DataListItemCells,
   DataListControl,
   Label,
+  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -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 <></>;
     }

package/src/demos/examples/TableCompact.tsx

@@ -12,6 +12,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
   Label,
+  LabelStatus,
   PaginationVariant
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -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/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,
@@ -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,
@@ -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>;
     }
   };
 

package/src/demos/examples/TableStaticBottomPagination.tsx

@@ -10,6 +10,7 @@ import {
   MenuToggle,
   MenuToggleElement,
   Label,
+  LabelStatus,
   Select,
   SelectOption,
   PaginationVariant
@@ -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>
         );
     }

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

@@ -1,6 +1,5 @@
 ---
 id: Table
-cssPrefix: pf-c-table
 section: components
 propComponents: ['Table', 'TableHeader', 'TableBody', 'ISortBy']
 ouia: true