From f789985ebab08387dd189e7c4054c0c6f8886d6d Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Fri, 1 May 2020 18:46:03 +0800
Subject: [PATCH] Props: Fix subcomponents & update story to test it

---
 addons/docs/src/blocks/Props.tsx                   | 12 +++++++-----
 .../stories/addon-docs/subcomponents.stories.js    | 14 +-------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
index cc591ed70f5..833b43a8ecc 100644
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@@ -160,15 +160,17 @@ export const StoryTable: FC<StoryProps & { components: Record<string, Component>
 
     // eslint-disable-next-line prefer-const
     let [args, updateArgs] = useArgs(storyId, storyStore);
-    if (!storyArgTypes || !Object.values(storyArgTypes).find((v) => !!v?.control)) {
-      updateArgs = null;
-    }
-
     let tabs = { Story: { rows: storyArgTypes, args, updateArgs } } as Record<
       string,
       ArgsTableProps
     >;
-    if (showComponents) {
+    if (!storyArgTypes || !Object.values(storyArgTypes).find((v) => !!v?.control)) {
+      updateArgs = null;
+      tabs = {};
+    }
+
+    // Use the dynamically generated component tabs if there are no controls
+    if (showComponents || !updateArgs) {
       tabs = addComponentTabs(tabs, components, context, include, exclude);
     }
 
diff --git a/examples/official-storybook/stories/addon-docs/subcomponents.stories.js b/examples/official-storybook/stories/addon-docs/subcomponents.stories.js
index 2883d5d11a3..2fa7db68a0b 100644
--- a/examples/official-storybook/stories/addon-docs/subcomponents.stories.js
+++ b/examples/official-storybook/stories/addon-docs/subcomponents.stories.js
@@ -7,21 +7,9 @@ export default {
   component: ButtonGroup,
   parameters: { viewMode: 'docs' },
   subcomponents: { DocgenButton },
-  argTypes: {
-    background: {
-      control: { type: 'color' },
-    },
-  },
 };
 
-export const Args = (args) => (
-  <ButtonGroup {...args}>
-    <DocgenButton label="foo" />
-    <DocgenButton label="bar" />
-  </ButtonGroup>
-);
-
-export const NoArgs = () => (
+export const Basic = () => (
   <ButtonGroup background="#eee">
     <DocgenButton label="foo" />
     <DocgenButton label="bar" />