From 40161803ca7b48db64b3f28436671828625e314f Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 7 Mar 2023 12:29:32 -0500 Subject: [PATCH] docs(Storybook): update storybook config so actions display properly --- packages/react/.storybook/preview.js | 6 ---- .../components/ComboBox/ComboBox.stories.js | 3 +- .../ComposedModal/ComposedModal.stories.js | 4 +-- .../DataTable-batch-actions.stories.js | 10 +++++-- .../stories/DataTable-filtering.stories.js | 7 ++++- .../stories/DataTable-selection.stories.js | 20 ++----------- .../stories/DataTable-sorting.stories.js | 2 +- .../stories/DataTable-toolbar.stories.js | 7 ++++- .../DataTable-dynamic-content.stories.js | 29 +++++++++++++++---- .../expansion/DataTable-expansion.stories.js | 5 +++- .../components/DataTable/stories/shared.js | 2 +- .../DatePicker/DatePicker.stories.js | 6 ++-- .../src/components/Modal/Modal.stories.js | 8 ++--- .../stories/ActionableNotification.stories.js | 6 ++-- .../stories/InlineNotification.stories.js | 4 +-- .../stories/ToastNotification.stories.js | 4 +-- .../NumberInput/NumberInput.stories.js | 6 ++-- .../components/TextInput/TextInput.stories.js | 4 +-- 18 files changed, 75 insertions(+), 58 deletions(-) diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js index cce9912be450..f60d4b5787ab 100644 --- 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 index 923035a48cdc..2aad23664b04 100644 --- 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) => (
{}} 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 index d920e29b23c7..1c441f94ddea 100644 --- 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 index 77dc8d633b38..9102ad44ac83 100644 --- 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}> { + action('TableToolbarSearch - onChange')(evt); + onInputChange(evt); + }} /> @@ -240,7 +243,10 @@ export const Playground = (args) => ( {rows.map((row, i) => ( - + {row.cells.map((cell) => ( {cell.value} ))} diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js index 60c06235b18b..86b47e201403 100644 --- 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) => ( {/* pass in `onInputChange` change here to make filtering work */} - + { + action('TableToolbarSearch - onChange')(evt); + onInputChange(evt); + }} + /> 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 index b0ca3f2d68d2..d3fab40e3a29 100644 --- 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 = () => ( {rows.map((row, i) => ( - { - action('TableRow onClick')(evt); - }}> - { - action('TableSelectRow onSelect')(evt); - getSelectionProps({ row }).onSelect(evt); - }} - /> + + {row.cells.map((cell) => ( {cell.value} ))} @@ -214,10 +203,7 @@ export const Playground = (args) => ( }}> { - action('TableSelectRow onSelect')(evt); - getSelectionProps({ row }).onSelect(evt); - }} + onChange={action('TableSelectRow - onChange')} /> {row.cells.map((cell) => ( {cell.value} diff --git a/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js b/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js index 2fa8c80ca529..f3670adf7129 100644 --- 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) => ( - + {({ rows, headers, getHeaderProps, getRowProps, 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 index 31333f670b2d..6a0a6a270996 100644 --- 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) => ( - + { + action('TableToolbarSearch - onChange')(evt); + onInputChange(evt); + }} + /> Action 1 diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js index c937b5b00423..684442c11849 100644 --- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js +++ b/packages/react/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) => { - + { + action('TableToolbarSearch - onChange')(evt); + onInputChange(evt); + }} + /> - + { + action('handleOnRowAdd')(evt); + this.handleOnRowAdd(); + }}> Add row - + { + action('handleOnHeaderAdd')(evt); + this.handleOnHeaderAdd(); + }}> Add header @@ -325,8 +339,13 @@ export const Playground = (args) => { {rows.map((row) => ( - - + + {row.cells.map((cell) => ( {cell.value} ))} 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 index f4955d470d42..f8e70ecff332 100644 --- 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) => ( {rows.map((row) => ( - + {row.cells.map((cell) => ( {cell.value} ))} diff --git a/packages/react/src/components/DataTable/stories/shared.js b/packages/react/src/components/DataTable/stories/shared.js index 085405ea0f58..6273d3b453da 100644 --- 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 index 08eaab0d08b0..784ea753e4f4 100644 --- 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 index d1aa1a84abfb..d75d48aaa391 100644 --- 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 index 5416b8182ba6..a4372c1fc921 100644 --- 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 index b8ec96c41817..b9ec104df91c 100644 --- 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 index 0411cb537379..4af5bacffe31 100644 --- 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 index f934740dd43c..c0fc4924cc28 100644 --- 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 index 45d994a3bcda..42538f4d8322 100644 --- 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',