Fix false obj values not showing up in code snippet

+ remove `PRESERVED_FALSE_VALUE_PROPS` logic - we should let the defaultProps logic handle that instead and always show `false` props if they're non-defaults (testable on, e.g. `<EuiExpression uppercase={false} />`)
elastic · Sep 6, 2024 · 8aa6c0a · 8aa6c0a
1 parent f6c9b55
commit 8aa6c0a
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 17 deletions.
diff --git a/packages/eui/.storybook/addons/code-snippet/constants.ts b/packages/eui/.storybook/addons/code-snippet/constants.ts
@@ -38,8 +38,6 @@ export const EXCLUDED_PROPS = new Set([
   EMOTION_LABEL_KEY,
   'key',
 ]);
-// props with 'false' value that should not be removed but shown in the code snippet
-export const PRESERVED_FALSE_VALUE_PROPS = new Set(['grow']);
 
 /** ERRORS */
 export const ADDON_ERROR =

diff --git a/packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx b/packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx
@@ -126,11 +126,11 @@ export const customJsxDecorator = (
 
     for (const key of Object.keys(context.args)) {
       // checks story args for:
-      //   - remove if no value
-      //   - remove if `chidlren`
+      //   - remove if no value (but allow `false`)
+      //   - remove if `children`
       //   - remove if arg is a default prop
       if (
-        !context.args[key] ||
+        context.args[key] == null ||
         key === 'children' ||
         defaultProps?.includes(key)
       ) {

diff --git a/packages/eui/.storybook/addons/code-snippet/decorators/render_jsx.tsx b/packages/eui/.storybook/addons/code-snippet/decorators/render_jsx.tsx
@@ -20,11 +20,7 @@ import { getDocgenSection } from '@storybook/docs-tools';
 import { logger } from '@storybook/client-logger';
 
 import { UseEuiTheme } from '../../../../src/services';
-import {
-  ADDON_PARAMETER_KEY,
-  EXCLUDED_PROPS,
-  PRESERVED_FALSE_VALUE_PROPS,
-} from '../constants';
+import { ADDON_PARAMETER_KEY, EXCLUDED_PROPS } from '../constants';
 import {
   getStoryComponentDisplayName,
   getEmotionComponentDisplayName,
@@ -135,6 +131,7 @@ export const renderJsx = (
     sortProps: true,
     // using any type here as component props can have any type
     filterProps: (value: any, key: string) => {
+      // Note that false values should be allowed, and handled by `removeDefaultProps`
       if (
         EXCLUDED_PROPS.has(key) ||
         value == null ||
@@ -145,12 +142,6 @@ export const renderJsx = (
         return false;
       }
 
-      // manually filter props with `false` values as this allows us to preserve
-      // `false` values where required e.g. grow={false}
-      if (value === false && !PRESERVED_FALSE_VALUE_PROPS.has(key)) {
-        return false;
-      }
-
       return true;
     },
   };

diff --git a/packages/eui/src/components/datagrid/controls/data_grid_toolbar.stories.tsx b/packages/eui/src/components/datagrid/controls/data_grid_toolbar.stories.tsx
@@ -40,7 +40,7 @@ export const NoToolbar: StoryObj<Pick<EuiDataGridProps, 'toolbarVisibility'>> =
   {
     parameters: {
       codeSnippet: {
-        snippet: `<EuiDataGrid toolbarVisibility={{{STORY_ARGS}}} />`,
+        snippet: `<EuiDataGrid {{...STORY_ARGS}} />`,
       },
       controls: { include: ['toolbarVisibility'] },
     },
@@ -60,6 +60,7 @@ export const ToolbarVisibilityOptions: StoryObj<EuiDataGridToolBarVisibilityOpti
     parameters: {
       codeSnippet: {
         snippet: `<EuiDataGrid toolbarVisibility={{{STORY_ARGS}}} />`,
+        removeDefaultProps: false,
       },
       controls: {
         include: [