Support different button kinds in Table toolbarButtons

Update the Table component to support passing additional props to the toolbar buttons, e.g. `kind` to have a mixture of primary and secondary actions on the table.
tektoncd · May 13, 2022 · a195d2f · a195d2f
1 parent 1e0ee7b
commit a195d2f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/packages/components/src/components/Table/Table.js b/packages/components/src/components/Table/Table.js
@@ -191,14 +191,15 @@ const Table = props => {
                   </TableBatchActions>
                 )}
                 <TableToolbarContent>
-                  {toolbarButtons.map(button => (
+                  {toolbarButtons.map(({ icon, onClick, text, ...rest }) => (
                     <Button
                       disabled={loading}
-                      onClick={button.onClick}
-                      renderIcon={button.icon}
-                      key={`${button.text}Button`}
+                      key={`${text}Button`}
+                      onClick={onClick}
+                      renderIcon={icon}
+                      {...rest}
                     >
-                      {button.text}
+                      {text}
                     </Button>
                   ))}
                 </TableToolbarContent>

diff --git a/packages/components/src/components/Table/Table.stories.js b/packages/components/src/components/Table/Table.stories.js
@@ -185,11 +185,16 @@ export const Sorting = args => {
       size={args.size}
       title={args.title}
       toolbarButtons={[
-        { onClick: action('handleNew'), text: 'Add', icon: Add },
         {
+          icon: RerunAll,
+          kind: 'secondary',
           onClick: action('handleRerunAll'),
-          text: 'RerunAll',
-          icon: RerunAll
+          text: 'RerunAll'
+        },
+        {
+          icon: Add,
+          onClick: action('handleNew'),
+          text: 'Add'
         }
       ]}
     />