[Storybook] Add utils for hiding all controls or the entire panel

cee-chen · cee-chen · commit 4dc46ca50ac5 · 2023-10-03T12:33:16.000-07:00
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -93,6 +93,7 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
+    options: { showPanel: true }, // default to showing the controls panel
     controls: {
       expanded: true,
       sort: 'requiredFirst',
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
@@ -6,6 +6,10 @@
  * Side Public License, v 1.
  */
 
+/**
+ * argTypes configurations
+ */
+
 /**
  * Completely hide props from Storybook's controls panel.
  * Should be passed or spread to `argTypes`
@@ -35,3 +39,26 @@ export const disableStorybookControls = <Props>(
   );
 };
 const DISABLE_CONTROL = { control: false };
+
+/**
+ * parameters configurations
+ */
+
+/**
+ * Will hide all props/controls. Pass to `parameters`
+ *
+ * TODO: Figure out some way to not show Storybook's "setup" text?
+ */
+export const hideAllStorybookControls = {
+  controls: { exclude: /.*/g },
+};
+
+/**
+ * Will hide the control/addon panel entirely for a specific story.
+ * Should be passed or spread to to `parameters`.
+ *
+ * Note that users can choose to re-show the panel in the UI
+ */
+export const hidePanel = {
+  options: { showPanel: false },
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -8,6 +8,10 @@
 
 import React, { FunctionComponent, PropsWithChildren, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import {
+  hideStorybookControls,
+  hideAllStorybookControls,
+} from '../../../.storybook/utils';
 
 import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header';
 import { EuiPageTemplate } from '../page_template';
@@ -507,6 +511,5 @@ export const FlyoutOverlay: Story = {
       </EuiHeader>
     );
   },
-  // Hide all parameters
-  parameters: { controls: { exclude: /.*/g } },
+  parameters: hideAllStorybookControls,
 };
