From 8a6a585bf8563efdf1083587f2f640904b55590d Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 25 Mar 2024 11:10:10 +0100 Subject: [PATCH] docs(storybook): update instances of util functions to use updated pattern --- src/components/i18n/i18n.stories.tsx | 18 ++++++------ src/components/i18n/i18n_number.stories.tsx | 6 ++-- .../list_group/list_group.stories.tsx | 10 ++++--- .../list_group/list_group_item.stories.tsx | 3 +- .../pinnable_list_group.stories.tsx | 28 ++++++++++--------- .../markdown_format.stories.tsx | 16 +++++------ .../modal/confirm_modal.stories.tsx | 10 ++++--- .../overlay_mask/overlay_mask.stories.tsx | 3 +- 8 files changed, 51 insertions(+), 43 deletions(-) diff --git a/src/components/i18n/i18n.stories.tsx b/src/components/i18n/i18n.stories.tsx index 93f0426598f..b9f067d2534 100644 --- a/src/components/i18n/i18n.stories.tsx +++ b/src/components/i18n/i18n.stories.tsx @@ -26,7 +26,6 @@ type Story = StoryObj; export const SingleToken: Story = { argTypes: { default: { control: { type: 'text' } }, - ...hideStorybookControls(['children', 'tokens', 'defaults']), }, args: { token: 'euiI18nBasic.basicexample', @@ -35,10 +34,9 @@ export const SingleToken: Story = { }, }; +hideStorybookControls(SingleToken, ['children', 'tokens', 'defaults']); + export const Interpolation: Story = { - argTypes: { - ...hideStorybookControls(['children', 'tokens', 'defaults']), - }, args: { token: 'euiI18nInterpolation.clickedCount', default: 'Clicked on button {count} times.', @@ -46,10 +44,9 @@ export const Interpolation: Story = { }, }; +hideStorybookControls(Interpolation, ['children', 'tokens', 'defaults']); + export const MultipleTokens: Story = { - argTypes: { - ...hideStorybookControls(['token', 'default']), - }, args: { tokens: ['euiI18n.title', 'euiI18n.description'], defaults: ['Card title', 'Card description'], @@ -64,10 +61,9 @@ export const MultipleTokens: Story = { ), }; +hideStorybookControls(MultipleTokens, ['token', 'default']); + export const MultipleTokenInterpolation: Story = { - argTypes: { - ...hideStorybookControls(['token', 'default']), - }, args: { tokens: ['euiI18nMulti.title', 'euiI18nMulti.description'], defaults: [ @@ -85,3 +81,5 @@ export const MultipleTokenInterpolation: Story = { ), }; + +hideStorybookControls(MultipleTokenInterpolation, ['token', 'default']); diff --git a/src/components/i18n/i18n_number.stories.tsx b/src/components/i18n/i18n_number.stories.tsx index 180c4067442..f2928ec88fb 100644 --- a/src/components/i18n/i18n_number.stories.tsx +++ b/src/components/i18n/i18n_number.stories.tsx @@ -22,7 +22,6 @@ export default meta; type Story = StoryObj; export const SingleValue: Story = { - argTypes: hideStorybookControls(['children', 'values']), args: { value: 99, }, @@ -33,8 +32,9 @@ export const SingleValue: Story = { ), }; +hideStorybookControls(SingleValue, ['children', 'values']); + export const MultipleValues: Story = { - argTypes: hideStorybookControls(['value']), args: { values: [0, 1, 2], children: (values: ReactChild[]) => ( @@ -48,3 +48,5 @@ export const MultipleValues: Story = { ), }, }; + +hideStorybookControls(MultipleValues, ['value']); diff --git a/src/components/list_group/list_group.stories.tsx b/src/components/list_group/list_group.stories.tsx index 92e2db2eccf..4d5da18f32c 100644 --- a/src/components/list_group/list_group.stories.tsx +++ b/src/components/list_group/list_group.stories.tsx @@ -16,10 +16,6 @@ import { EuiListGroupItem } from './list_group_item'; const meta: Meta = { title: 'Display/EuiListGroup/EuiListGroup', component: EuiListGroup, - argTypes: moveStorybookControlsToCategory( - ['color', 'size'], - 'EuiListGroupItem props' - ), args: { flush: false, bordered: false, @@ -30,6 +26,12 @@ const meta: Meta = { }, }; +moveStorybookControlsToCategory( + meta, + ['color', 'size'], + 'EuiListGroupItem props' +); + export default meta; type Story = StoryObj; diff --git a/src/components/list_group/list_group_item.stories.tsx b/src/components/list_group/list_group_item.stories.tsx index 6d733b8aada..b40ebb0748e 100644 --- a/src/components/list_group/list_group_item.stories.tsx +++ b/src/components/list_group/list_group_item.stories.tsx @@ -15,7 +15,6 @@ const meta: Meta = { title: 'Display/EuiListGroup/EuiListGroupItem', component: EuiListGroupItem, argTypes: { - ...disableStorybookControls(['buttonRef']), iconType: { control: { type: 'text' }, }, @@ -27,6 +26,8 @@ const meta: Meta = { }, }; +disableStorybookControls(meta, ['buttonRef']); + export default meta; type Story = StoryObj; diff --git a/src/components/list_group/pinnable_list_group/pinnable_list_group.stories.tsx b/src/components/list_group/pinnable_list_group/pinnable_list_group.stories.tsx index 0b21dd5037f..11cd3f55f3e 100644 --- a/src/components/list_group/pinnable_list_group/pinnable_list_group.stories.tsx +++ b/src/components/list_group/pinnable_list_group/pinnable_list_group.stories.tsx @@ -17,21 +17,23 @@ import { const meta: Meta = { title: 'Display/EuiPinnableListGroup', component: EuiPinnableListGroup, - argTypes: moveStorybookControlsToCategory( - [ - 'bordered', - 'color', - 'flush', - 'gutterSize', - 'maxWidth', - 'showToolTips', - 'size', - 'wrapText', - ], - 'EuiListGroup props' - ), }; +moveStorybookControlsToCategory( + meta, + [ + 'bordered', + 'color', + 'flush', + 'gutterSize', + 'maxWidth', + 'showToolTips', + 'size', + 'wrapText', + ], + 'EuiListGroup props' +); + export default meta; type Story = StoryObj; diff --git a/src/components/markdown_editor/markdown_format.stories.tsx b/src/components/markdown_editor/markdown_format.stories.tsx index 1092ffba1a7..58fe243087a 100644 --- a/src/components/markdown_editor/markdown_format.stories.tsx +++ b/src/components/markdown_editor/markdown_format.stories.tsx @@ -44,7 +44,6 @@ const meta: Meta = { control: { type: 'radio' }, options: [undefined, ...ALIGNMENTS], }, - ...hideStorybookControls(['aria-label']), }, // Component defaults args: { @@ -54,17 +53,18 @@ const meta: Meta = { }, }; +moveStorybookControlsToCategory( + meta, + ['textAlign', 'color', 'grow'], + 'EuiText props' +); + +hideStorybookControls(meta, ['aria-label']); + export default meta; type Story = StoryObj; export const Playground: Story = { - // TODO: move this to the component level once utils are updated to fully support merged configs (#7583) - argTypes: { - ...moveStorybookControlsToCategory( - ['textAlign', 'color', 'grow'], - 'EuiText props' - ), - }, args: { children: initialContent, }, diff --git a/src/components/modal/confirm_modal.stories.tsx b/src/components/modal/confirm_modal.stories.tsx index a77e9efe426..a8132ea0b08 100644 --- a/src/components/modal/confirm_modal.stories.tsx +++ b/src/components/modal/confirm_modal.stories.tsx @@ -31,10 +31,6 @@ const meta: Meta = { options: [undefined, CONFIRM_BUTTON, CANCEL_BUTTON], }, buttonColor: { control: { type: 'select' }, options: BUTTON_COLORS }, - ...moveStorybookControlsToCategory( - ['role', 'maxWidth', 'initialFocus'], - 'EuiModal props' - ), }, args: { buttonColor: 'primary', @@ -43,6 +39,12 @@ const meta: Meta = { }, }; +moveStorybookControlsToCategory( + meta, + ['role', 'maxWidth', 'initialFocus'], + 'EuiModal props' +); + export default meta; type Story = StoryObj; diff --git a/src/components/overlay_mask/overlay_mask.stories.tsx b/src/components/overlay_mask/overlay_mask.stories.tsx index 76199096d1a..d5b0376ef51 100644 --- a/src/components/overlay_mask/overlay_mask.stories.tsx +++ b/src/components/overlay_mask/overlay_mask.stories.tsx @@ -18,7 +18,6 @@ const meta: Meta = { component: EuiOverlayMask, argTypes: { children: { control: { type: 'text' } }, - ...disableStorybookControls(['maskRef']), }, // Component defaults args: { @@ -26,6 +25,8 @@ const meta: Meta = { }, }; +disableStorybookControls(meta, ['maskRef']); + export default meta; type Story = StoryObj;