docs(storybook): update instances of util functions to use updated pa…

…ttern
elastic · Mar 25, 2024 · 8a6a585 · 8a6a585
1 parent f8cfad9
commit 8a6a585
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 43 deletions.
diff --git a/src/components/i18n/i18n.stories.tsx b/src/components/i18n/i18n.stories.tsx
@@ -26,7 +26,6 @@ type Story = StoryObj<Props>;
 export const SingleToken: Story = {
   argTypes: {
     default: { control: { type: 'text' } },
-    ...hideStorybookControls(['children', 'tokens', 'defaults']),
   },
   args: {
     token: 'euiI18nBasic.basicexample',
@@ -35,21 +34,19 @@ 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.',
     values: { count: 3 },
   },
 };
 
+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 = {
     </EuiI18n>
   ),
 };
+
+hideStorybookControls(MultipleTokenInterpolation, ['token', 'default']);
diff --git 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<EuiI18nNumberProps>;
 
 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
@@ -16,10 +16,6 @@ import { EuiListGroupItem } from './list_group_item';
 const meta: Meta<EuiListGroupProps> = {
   title: 'Display/EuiListGroup/EuiListGroup',
   component: EuiListGroup,
-  argTypes: moveStorybookControlsToCategory(
-    ['color', 'size'],
-    'EuiListGroupItem props'
-  ),
   args: {
     flush: false,
     bordered: false,
@@ -30,6 +26,12 @@ const meta: Meta<EuiListGroupProps> = {
   },
 };
 
+moveStorybookControlsToCategory(
+  meta,
+  ['color', 'size'],
+  'EuiListGroupItem props'
+);
+
 export default meta;
 type Story = StoryObj<EuiListGroupProps>;
 

diff --git 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<EuiListGroupItemProps> = {
   title: 'Display/EuiListGroup/EuiListGroupItem',
   component: EuiListGroupItem,
   argTypes: {
-    ...disableStorybookControls(['buttonRef']),
     iconType: {
       control: { type: 'text' },
     },
@@ -27,6 +26,8 @@ const meta: Meta<EuiListGroupItemProps> = {
   },
 };
 
+disableStorybookControls(meta, ['buttonRef']);
+
 export default meta;
 type Story = StoryObj<EuiListGroupItemProps>;
 

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
@@ -17,21 +17,23 @@ import {
 const meta: Meta<EuiPinnableListGroupProps> = {
   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<EuiPinnableListGroupProps>;
 

diff --git 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<EuiMarkdownFormatProps> = {
       control: { type: 'radio' },
       options: [undefined, ...ALIGNMENTS],
     },
-    ...hideStorybookControls(['aria-label']),
   },
   // Component defaults
   args: {
@@ -54,17 +53,18 @@ const meta: Meta<EuiMarkdownFormatProps> = {
   },
 };
 
+moveStorybookControlsToCategory(
+  meta,
+  ['textAlign', 'color', 'grow'],
+  'EuiText props'
+);
+
+hideStorybookControls(meta, ['aria-label']);
+
 export default meta;
 type Story = StoryObj<EuiMarkdownFormatProps>;
 
 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
@@ -31,10 +31,6 @@ const meta: Meta<EuiConfirmModalProps> = {
       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<EuiConfirmModalProps> = {
   },
 };
 
+moveStorybookControlsToCategory(
+  meta,
+  ['role', 'maxWidth', 'initialFocus'],
+  'EuiModal props'
+);
+
 export default meta;
 type Story = StoryObj<EuiConfirmModalProps>;
 

diff --git a/src/components/overlay_mask/overlay_mask.stories.tsx b/src/components/overlay_mask/overlay_mask.stories.tsx
@@ -18,14 +18,15 @@ const meta: Meta<EuiOverlayMaskProps> = {
   component: EuiOverlayMask,
   argTypes: {
     children: { control: { type: 'text' } },
-    ...disableStorybookControls(['maskRef']),
   },
   // Component defaults
   args: {
     headerZindexLocation: 'above',
   },
 };
 
+disableStorybookControls(meta, ['maskRef']);
+
 export default meta;
 type Story = StoryObj<EuiOverlayMaskProps>;