docs(Storybook): update storybook config so actions display properly

carbon-design-system · Mar 7, 2023 · 4016180 · 4016180
1 parent af37b74
commit 4016180
Show file tree

Hide file tree

Showing 18 changed files with 75 additions and 58 deletions.
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -8,7 +8,6 @@
 import './styles.scss';
 import '../src/feature-flags';
 
-import { configureActions } from '@storybook/addon-actions';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import React from 'react';
 import { breakpoints } from '@carbon/layout';
@@ -203,11 +202,6 @@ export const parameters = {
   },
 };
 
-configureActions({
-  depth: 3,
-  limit: 10,
-});
-
 export const decorators = [
   (Story, context) => {
     const { locale, theme } = context.globals;

diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -117,7 +117,6 @@ export const WithLayer = () => (
 export const Playground = (args) => (
   <div style={{ width: 300 }}>
     <ComboBox
-      onChange={() => {}}
       id="carbon-combobox"
       items={items}
       downshiftProps={{
@@ -184,7 +183,7 @@ Playground.argTypes = {
     },
   },
   onChange: {
-    action: 'clicked',
+    action: 'changed',
   },
   onClick: {
     action: 'clicked',

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -252,10 +252,10 @@ Playground.argTypes = {
     },
   },
   onClose: {
-    action: 'clicked',
+    action: 'onClose',
   },
   onKeyDown: {
-    action: 'clicked',
+    action: 'onKeyDown',
   },
   selectorPrimaryFocus: {
     table: {

diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
@@ -203,7 +203,10 @@ export const Playground = (args) => (
               aria-hidden={batchActionProps.shouldShowBatchActions}>
               <TableToolbarSearch
                 tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
-                onChange={onInputChange}
+                onChange={(evt) => {
+                  action('TableToolbarSearch - onChange')(evt);
+                  onInputChange(evt);
+                }}
               />
               <TableToolbarMenu
                 tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}>
@@ -240,7 +243,10 @@ export const Playground = (args) => (
             <TableBody>
               {rows.map((row, i) => (
                 <TableRow key={i} {...getRowProps({ row })}>
-                  <TableSelectRow {...getSelectionProps({ row })} />
+                  <TableSelectRow
+                    {...getSelectionProps({ row })}
+                    onChange={action('TableSelectRow - onChange')}
+                  />
                   {row.cells.map((cell) => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}

diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js
@@ -130,7 +130,12 @@ export const Playground = (args) => (
         <TableToolbar>
           <TableToolbarContent>
             {/* pass in `onInputChange` change here to make filtering work */}
-            <TableToolbarSearch onChange={onInputChange} />
+            <TableToolbarSearch
+              onChange={(evt) => {
+                action('TableToolbarSearch - onChange')(evt);
+                onInputChange(evt);
+              }}
+            />
             <TableToolbarMenu>
               <TableToolbarAction onClick={action('Action 1 Click')}>
                 Action 1

diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js b/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js
@@ -70,19 +70,8 @@ export const Default = () => (
           </TableHead>
           <TableBody>
             {rows.map((row, i) => (
-              <TableRow
-                key={i}
-                {...getRowProps({ row })}
-                onClick={(evt) => {
-                  action('TableRow onClick')(evt);
-                }}>
-                <TableSelectRow
-                  {...getSelectionProps({ row })}
-                  onSelect={(evt) => {
-                    action('TableSelectRow onSelect')(evt);
-                    getSelectionProps({ row }).onSelect(evt);
-                  }}
-                />
+              <TableRow key={i} {...getRowProps({ row })}>
+                <TableSelectRow {...getSelectionProps({ row })} />
                 {row.cells.map((cell) => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>
                 ))}
@@ -214,10 +203,7 @@ export const Playground = (args) => (
                 }}>
                 <TableSelectRow
                   {...getSelectionProps({ row })}
-                  onSelect={(evt) => {
-                    action('TableSelectRow onSelect')(evt);
-                    getSelectionProps({ row }).onSelect(evt);
-                  }}
+                  onChange={action('TableSelectRow - onChange')}
                 />
                 {row.cells.map((cell) => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>

diff --git a/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js b/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js
@@ -67,7 +67,7 @@ export const Default = () => (
 );
 
 export const Playground = (args) => (
-  <DataTable rows={rows} headers={headers} {...args}>
+  <DataTable isSortable rows={rows} headers={headers} {...args}>
     {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
       <TableContainer title="DataTable" description="With sorting">
         <Table {...getTableProps()}>

diff --git a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js
@@ -300,7 +300,12 @@ export const Playground = (args) => (
       <TableContainer title="DataTable" description="With overflow menu">
         <TableToolbar {...getToolbarProps()} aria-label="data table toolbar">
           <TableToolbarContent>
-            <TableToolbarSearch onChange={onInputChange} />
+            <TableToolbarSearch
+              onChange={(evt) => {
+                action('TableToolbarSearch - onChange')(evt);
+                onInputChange(evt);
+              }}
+            />
             <TableToolbarMenu light>
               <TableToolbarAction onClick={action('Action 1 Click')}>
                 Action 1

diff --git a/...act/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/...act/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
@@ -9,6 +9,7 @@ import './story.scss';
 
 import React from 'react';
 import { TrashCan, Save, Download } from '@carbon/icons-react';
+import { action } from '@storybook/addon-actions';
 import DataTable, {
   Table,
   TableBatchAction,
@@ -299,12 +300,25 @@ export const Playground = (args) => {
                   </TableBatchAction>
                 </TableBatchActions>
                 <TableToolbarContent>
-                  <TableToolbarSearch onChange={onInputChange} />
+                  <TableToolbarSearch
+                    onChange={(evt) => {
+                      action('TableToolbarSearch - onChange')(evt);
+                      onInputChange(evt);
+                    }}
+                  />
                   <TableToolbarMenu>
-                    <TableToolbarAction onClick={this.handleOnRowAdd}>
+                    <TableToolbarAction
+                      onClick={(evt) => {
+                        action('handleOnRowAdd')(evt);
+                        this.handleOnRowAdd();
+                      }}>
                       Add row
                     </TableToolbarAction>
-                    <TableToolbarAction onClick={this.handleOnHeaderAdd}>
+                    <TableToolbarAction
+                      onClick={(evt) => {
+                        action('handleOnHeaderAdd')(evt);
+                        this.handleOnHeaderAdd();
+                      }}>
                       Add header
                     </TableToolbarAction>
                   </TableToolbarMenu>
@@ -325,8 +339,13 @@ export const Playground = (args) => {
                 <TableBody>
                   {rows.map((row) => (
                     <React.Fragment key={row.id}>
-                      <TableExpandRow {...getRowProps({ row })}>
-                        <TableSelectRow {...getSelectionProps({ row })} />
+                      <TableExpandRow
+                        {...getRowProps({ row })}
+                        onClick={action('onClick')}>
+                        <TableSelectRow
+                          {...getSelectionProps({ row })}
+                          onChange={action('TableSelectRow - onChange')}
+                        />
                         {row.cells.map((cell) => (
                           <TableCell key={cell.id}>{cell.value}</TableCell>
                         ))}

diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js
@@ -22,6 +22,7 @@ import DataTable, {
 import { Pagination } from '../../../../';
 import { rows, headers } from '../shared';
 import mdx from '../../DataTable.mdx';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Components/DataTable/Expansion',
@@ -288,7 +289,9 @@ export const Playground = (args) => (
           <TableBody>
             {rows.map((row) => (
               <React.Fragment key={row.id}>
-                <TableExpandRow {...getRowProps({ row })}>
+                <TableExpandRow
+                  {...getRowProps({ row })}
+                  onClick={action('onClick')}>
                   {row.cells.map((cell) => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}

diff --git a/packages/react/src/components/DataTable/stories/shared.js b/packages/react/src/components/DataTable/stories/shared.js
@@ -93,4 +93,4 @@ export const headers = [
 ];
 
 export const batchActionClick = (selectedRows) => () =>
-  action('batch action click')(selectedRows);
+  action('Batch action click')(selectedRows);
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -257,13 +257,13 @@ Playground.argTypes = {
     },
   },
   onChange: {
-    action: 'clicked',
+    action: 'changed',
   },
   onClose: {
-    action: 'clicked',
+    action: 'closed',
   },
   onOpen: {
-    action: 'clicked',
+    action: 'opened',
   },
   readOnly: {
     control: {

diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
@@ -315,16 +315,16 @@ Playground.argTypes = {
     },
   },
   onKeyDown: {
-    action: 'clicked',
+    action: 'onKeyDown',
   },
   onRequestClose: {
-    action: 'clicked',
+    action: 'onRequestClose',
   },
   onRequestSubmit: {
-    action: 'clicked',
+    action: 'onRequestSubmit',
   },
   onSecondarySubmit: {
-    action: 'clicked',
+    action: 'onSecondarySubmit',
     table: {
       disable: true,
     },

diff --git a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
@@ -49,13 +49,13 @@ Playground.argTypes = {
     },
   },
   onActionButtonClick: {
-    action: 'clicked',
+    action: 'onActionButtonClick',
   },
   onClose: {
-    action: 'clicked',
+    action: 'onClose',
   },
   onCloseButtonClick: {
-    action: 'clicked',
+    action: 'onCloseButtonClick',
   },
   children: {
     table: {

diff --git a/packages/react/src/components/Notification/stories/InlineNotification.stories.js b/packages/react/src/components/Notification/stories/InlineNotification.stories.js
@@ -56,10 +56,10 @@ Playground.argTypes = {
     },
   },
   onClose: {
-    action: 'clicked',
+    action: 'onClose',
   },
   onCloseButtonClick: {
-    action: 'clicked',
+    action: 'onCloseButtonClick',
   },
   children: {
     table: {

diff --git a/packages/react/src/components/Notification/stories/ToastNotification.stories.js b/packages/react/src/components/Notification/stories/ToastNotification.stories.js
@@ -59,10 +59,10 @@ Playground.argTypes = {
     },
   },
   onClose: {
-    action: 'clicked',
+    action: 'onClose',
   },
   onCloseButtonClick: {
-    action: 'clicked',
+    action: 'onCloseButtonClick',
   },
   children: {
     table: {

diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -80,13 +80,13 @@ Playground.argTypes = {
     },
   },
   onChange: {
-    action: 'clicked',
+    action: 'onChange',
   },
   onClick: {
-    action: 'clicked',
+    action: 'onClick',
   },
   onKeyUp: {
-    action: 'clicked',
+    action: 'onKeyUp',
   },
   translateWithId: {
     table: {

diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js
@@ -172,10 +172,10 @@ Playground.argTypes = {
     },
   },
   onChange: {
-    action: 'clicked',
+    action: 'onChange',
   },
   onClick: {
-    action: 'clicked',
+    action: 'onClick',
   },
   size: {
     defaultValue: 'md',