From 9b20b891856d7ae6f03d2596b05dc227bece2485 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 26 Feb 2024 16:25:27 +0100
Subject: [PATCH 1/2] Don't show empty arg tables in doc pages

---
 code/ui/blocks/src/blocks/Controls.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx
index 2adef888e66a..b7a1398c1994 100644
--- a/code/ui/blocks/src/blocks/Controls.tsx
+++ b/code/ui/blocks/src/blocks/Controls.tsx
@@ -59,16 +59,19 @@ export const Controls: FC<ControlsProps> = (props) => {
   const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents).length > 0;
 
   if (!hasSubcomponents) {
-    return (
-      <PureArgsTable
-        rows={filteredArgTypes}
-        sort={sort}
-        args={args}
-        globals={globals}
-        updateArgs={updateArgs}
-        resetArgs={resetArgs}
-      />
-    );
+    if (Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0) {
+      return (
+        <PureArgsTable
+          rows={filteredArgTypes}
+          sort={sort}
+          args={args}
+          globals={globals}
+          updateArgs={updateArgs}
+          resetArgs={resetArgs}
+        />
+      );
+    }
+    return null;
   }
 
   const mainComponentName = getComponentName(component);

From f104e662ba59401d53b65e5caa4b1fcf48e8281b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 27 Feb 2024 12:36:08 +0100
Subject: [PATCH 2/2] Add story for empty argTypes and address review

---
 .../ui/blocks/src/blocks/Controls.stories.tsx | 15 ++++++++++--
 code/ui/blocks/src/blocks/Controls.tsx        | 24 +++++++++----------
 .../src/examples/EmptyArgTypes.stories.tsx    | 19 +++++++++++++++
 3 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 code/ui/blocks/src/examples/EmptyArgTypes.stories.tsx

diff --git a/code/ui/blocks/src/blocks/Controls.stories.tsx b/code/ui/blocks/src/blocks/Controls.stories.tsx
index 9d32d9fe12f1..598485dd93a6 100644
--- a/code/ui/blocks/src/blocks/Controls.stories.tsx
+++ b/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,
+  },
+};
diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx
index b7a1398c1994..f47194033f1d 100644
--- a/code/ui/blocks/src/blocks/Controls.tsx
+++ b/code/ui/blocks/src/blocks/Controls.tsx
@@ -59,19 +59,19 @@ 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 (
-        <PureArgsTable
-          rows={filteredArgTypes}
-          sort={sort}
-          args={args}
-          globals={globals}
-          updateArgs={updateArgs}
-          resetArgs={resetArgs}
-        />
-      );
+    if (!(Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0)) {
+      return null;
     }
-    return null;
+    return (
+      <PureArgsTable
+        rows={filteredArgTypes}
+        sort={sort}
+        args={args}
+        globals={globals}
+        updateArgs={updateArgs}
+        resetArgs={resetArgs}
+      />
+    );
   }
 
   const mainComponentName = getComponentName(component);
diff --git a/code/ui/blocks/src/examples/EmptyArgTypes.stories.tsx b/code/ui/blocks/src/examples/EmptyArgTypes.stories.tsx
new file mode 100644
index 000000000000..b72fb9794acb
--- /dev/null
+++ b/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 = {};