Merge pull request #26200 from storybookjs/kasper/empty-controls

Docs: Don't show empty arg tables in doc pages

code/ui/blocks/src/blocks/Controls.stories.tsx

@@ -6,17 +6,19 @@ import * as ExampleStories from '../examples/ControlsParameters.stories';
 import * as SubcomponentsExampleStories from '../examples/ControlsWithSubcomponentsParameters.stories';
 import { within } from '@storybook/test';
 import type { PlayFunctionContext } from '@storybook/csf';
+import * as EmptyArgTypesStories from '../examples/EmptyArgTypes.stories';
 
-const meta: Meta<typeof Controls> = {
+const meta = {
   component: Controls,
   parameters: {
     relativeCsfPaths: [
       '../examples/ControlsParameters.stories',
+      '../examples/EmptyArgTypes.stories',
       '../examples/ControlsWithSubcomponentsParameters.stories',
     ],
     docsStyles: true,
   },
-};
+} satisfies Meta<typeof Controls>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
@@ -142,3 +144,12 @@ export const SubcomponentsSortProp: Story = {
     sort: 'alpha',
   },
 };
+
+/**
+ * When a story is defined without any argTypes or args, the Docs UI should not display the control component.
+ */
+export const EmptyArgTypes: Story = {
+  args: {
+    of: EmptyArgTypesStories.Default,
+  },
+};

code/ui/blocks/src/blocks/Controls.tsx

@@ -59,6 +59,9 @@ export const Controls: FC<ControlsProps> = (props) => {
   const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents).length > 0;
 
   if (!hasSubcomponents) {
+    if (!(Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0)) {
+      return null;
+    }
     return (
       <PureArgsTable
         rows={filteredArgTypes}

code/ui/blocks/src/examples/EmptyArgTypes.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ControlsParameters } from './ControlsParameters';
+import React from 'react';
+
+const meta = {
+  title: 'examples/Empty ArgTypes for Control blocks',
+  // note that component is not specified, so no argtypes can be generated
+  render: () => <div>I am a story without args or argTypes</div>,
+  parameters: { chromatic: { disableSnapshot: true } },
+} satisfies Meta<typeof ControlsParameters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * There are no argTypes or args, so this story won't show any controls in the docs page.
+ * In the control addon it will show a UI how to set up controls.
+ */
+export const Default: Story = {};