@patternfly/react-table 4.61.6 → 4.61.10

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
 import {
-  ButtonVariant,
+  Button,
   Checkbox,
   DropdownToggle,
   ToggleGroup,
@@ -13,14 +13,15 @@ import {
 } from '@patternfly/react-core';
 import {
   CustomActionsToggleProps,
+  fitContent,
   headerCol,
   TableProps,
-  IAction,
   IActions,
   IActionsResolver,
   Table,
   TableBody,
-  TableHeader
+  TableHeader,
+  TableText
 } from '@patternfly/react-table';
 
 interface Repository {
@@ -29,6 +30,7 @@ interface Repository {
   prs: string;
   workspaces: string;
   lastCommit: string;
+  singleAction: string;
 }
 
 type ExampleType = 'actions' | 'actionResolver';
@@ -36,11 +38,18 @@ type ExampleType = 'actions' | 'actionResolver';
 export const LegacyTableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
   const repositories: Repository[] = [
-    { name: 'a', branches: 'two', prs: '1', workspaces: 'four', lastCommit: 'five' },
-    { name: 'disable actions', branches: 'two', prs: '3', workspaces: 'four', lastCommit: 'five' },
-    { name: 'green actions', branches: 'two', prs: '4', workspaces: 'four', lastCommit: 'five' },
-    { name: 'extra action props', branches: 'two', prs: '5', workspaces: 'four', lastCommit: 'five' },
-    { name: 'blue actions', branches: 'two', prs: '6', workspaces: 'four', lastCommit: 'five' }
+    { name: 'a', branches: 'two', prs: '1', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },
+    { name: 'disable actions', branches: 'two', prs: '3', workspaces: 'four', lastCommit: 'five', singleAction: '' },
+    { name: 'green actions', branches: 'two', prs: '4', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },
+    {
+      name: 'extra action props',
+      branches: 'two',
+      prs: '5',
+      workspaces: 'four',
+      lastCommit: 'five',
+      singleAction: 'Start'
+    },
+    { name: 'blue actions', branches: 'two', prs: '6', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' }
   ];
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
@@ -51,7 +60,6 @@ export const LegacyTableActions: React.FunctionComponent = () => {
   };
 
   const [useCustomToggle, setUseCustomToggle] = React.useState(false);
-  const [useExtraAction, setUseExtraAction] = React.useState(false);
 
   const customActionsToggle = (props: CustomActionsToggleProps) => (
     <DropdownToggle onToggle={props.onToggle} isDisabled={props.isDisabled}>
@@ -64,10 +72,22 @@ export const LegacyTableActions: React.FunctionComponent = () => {
     'Branches',
     'Pull requests',
     'Workspaces',
-    'Last commit'
+    'Last commit',
+    { title: '', dataLabel: 'Action', cellTransforms: [fitContent] }
   ];
+
   const rows: TableProps['rows'] = repositories.map(repo => {
-    const cells = [repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit];
+    let singleActionButton = null;
+    if (repo.singleAction !== '') {
+      singleActionButton = (
+        <TableText>
+          <Button variant="secondary">{repo.singleAction}</Button>
+        </TableText>
+      );
+    }
+
+    const cells = [repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit, singleActionButton];
+
     // These rows have arbitrary differences for this example, but these could be based on some other conditions
     if (repo.name === 'disable actions') {
       return { cells, disableActions: true };
@@ -84,15 +104,6 @@ export const LegacyTableActions: React.FunctionComponent = () => {
     return { cells };
   });
 
-  /**
-   * Use actions or actionResolver, not both
-   */
-  const extraAction: IAction = {
-    title: 'Start',
-    variant: ButtonVariant.secondary,
-    onClick: (_event, rowId, rowData, extra) => console.log('clicked on extra action on row: ', rowId, rowData, extra),
-    isOutsideDropdown: true
-  };
   const actions: IActions = [
     {
       title: 'Some action',
@@ -108,8 +119,7 @@ export const LegacyTableActions: React.FunctionComponent = () => {
       title: 'Third action',
       onClick: (_event, rowId, rowData, extra) =>
         console.log('clicked on Third action, on row: ', rowId, rowData, extra)
-    },
-    ...(useExtraAction ? [extraAction] : [])
+    }
   ];
 
   /**
@@ -120,16 +130,6 @@ export const LegacyTableActions: React.FunctionComponent = () => {
       return [];
     }
 
-    const extraAction: IActions = [
-      {
-        title: 'Start',
-        variant: ButtonVariant.secondary,
-        onClick: (_event, rowId, rowData, extra) =>
-          console.log('clicked on extra action on row: ', rowId, rowData, extra),
-        isOutsideDropdown: true
-      }
-    ];
-
     const thirdAction: IActions = [
       {
         isSeparator: true
@@ -142,7 +142,6 @@ export const LegacyTableActions: React.FunctionComponent = () => {
     ];
 
     return [
-      ...(useExtraAction ? extraAction : []),
       {
         title: 'actionResolver action',
         onClick: (_event, rowId, rowData, extra) =>
@@ -187,16 +186,6 @@ export const LegacyTableActions: React.FunctionComponent = () => {
               name="toggle-custom-actions-toggle"
             />
           </ToolbarItem>
-          <ToolbarItem>
-            <Checkbox
-              label="Add extra actions"
-              isChecked={useExtraAction}
-              onChange={setUseExtraAction}
-              aria-label="toggle extra actions"
-              id="toggle-extra-action"
-              name="toggle-extra-action"
-            />
-          </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
       <Table

package/src/components/Table/utils/decorators/cellActions.tsx

@@ -73,7 +73,7 @@ export const cellActions = (
 
   return {
     className: css(styles.tableAction),
-    style: { width: 'auto', paddingRight: 0 },
+    style: { paddingRight: 0 },
     isVisible: true,
     ...renderProps
   };

package/src/components/TableComposable/Td.tsx

@@ -45,11 +45,14 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   draggableRow?: TdDraggableType;
   /** True to remove padding */
   noPadding?: boolean;
+  /** Applies pf-c-table__action to td */
+  isActionCell?: boolean;
 }
 
 const TdBase: React.FunctionComponent<TdProps> = ({
   children,
   className,
+  isActionCell = false,
   component = 'td',
   dataLabel,
   textCenter = false,
@@ -205,6 +208,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
       {...(!treeTableTitleCell && { 'data-label': dataLabel })}
       className={css(
         className,
+        isActionCell && styles.tableAction,
         textCenter && styles.modifiers.center,
         noPadding && styles.modifiers.noPadding,
         styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap' | undefined],

package/src/components/TableComposable/examples/ComposableTableActions.tsx

@@ -1,14 +1,9 @@
 /* eslint-disable no-console */
 import React from 'react';
-import {
-  ButtonVariant,
-  DropdownToggle,
-  ToggleGroup,
-  ToggleGroupItem,
-  ToggleGroupItemProps
-} from '@patternfly/react-core';
+import { Button, DropdownToggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
 import {
   TableComposable,
+  TableText,
   Thead,
   Tr,
   Th,
@@ -25,6 +20,7 @@ interface Repository {
   prs: string;
   workspaces: string;
   lastCommit: string;
+  singleAction: string;
 }
 
 type ExampleType = 'defaultToggle' | 'customToggle';
@@ -32,11 +28,11 @@ type ExampleType = 'defaultToggle' | 'customToggle';
 export const ComposableTableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
   const repositories: Repository[] = [
-    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },
-    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
-    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' },
-    { name: '4', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five' },
-    { name: '5', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five' }
+    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },
+    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five', singleAction: '' },
+    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },
+    { name: '4', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },
+    { name: '5', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' }
   ];
 
   const columnNames = {
@@ -44,7 +40,8 @@ export const ComposableTableActions: React.FunctionComponent = () => {
     branches: 'Branches',
     prs: 'Pull requests',
     workspaces: 'Workspaces',
-    lastCommit: 'Last commit'
+    lastCommit: 'Last commit',
+    singleAction: 'Single action'
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for TableComposable usage.
@@ -74,12 +71,6 @@ export const ComposableTableActions: React.FunctionComponent = () => {
     {
       title: 'Third action',
       onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)
-    },
-    {
-      title: 'Start',
-      variant: ButtonVariant.secondary,
-      onClick: () => console.log(`clicked on extra action, on row ${repo.name}`),
-      isOutsideDropdown: true
     }
   ];
 
@@ -125,6 +116,8 @@ export const ComposableTableActions: React.FunctionComponent = () => {
             <Th>{columnNames.prs}</Th>
             <Th>{columnNames.workspaces}</Th>
             <Th>{columnNames.lastCommit}</Th>
+            <Td></Td>
+            <Td></Td>
           </Tr>
         </Thead>
         <Tbody>
@@ -137,6 +130,15 @@ export const ComposableTableActions: React.FunctionComponent = () => {
             if (repo.name === '5') {
               rowActions = lastRowActions(repo);
             }
+            let singleActionButton = null;
+            if (repo.singleAction !== '') {
+              singleActionButton = (
+                <TableText>
+                  <Button variant="secondary">{repo.singleAction}</Button>
+                </TableText>
+              );
+            }
+
             return (
               <Tr key={repo.name}>
                 <Td dataLabel={columnNames.name}>{repo.name}</Td>
@@ -144,7 +146,10 @@ export const ComposableTableActions: React.FunctionComponent = () => {
                 <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
                 <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
                 <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
-                <Td>
+                <Td dataLabel={columnNames.singleAction} modifier="fitContent">
+                  {singleActionButton}
+                </Td>
+                <Td isActionCell>
                   {rowActions ? (
                     <ActionsColumn
                       items={rowActions}