Merge pull request #11415 from storybookjs/10958-fix-argstable-subcom…

…ponnets Addon-docs: Fix subcomponents display logic
storybookjs · Jul 4, 2020 · da10252 · da10252
2 parents de034fd + 56b2cc8
commit da10252
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
@@ -38,7 +38,7 @@ type ComponentsProps = BaseProps & {
 
 type StoryProps = BaseProps & {
   story: '.' | string;
-  showComponents?: boolean;
+  showComponent?: boolean;
 };
 
 type PropsProps = BaseProps | OfProps | ComponentsProps | StoryProps;
@@ -134,7 +134,7 @@ export const StoryTable: FC<StoryProps & { components: Record<string, Component>
     parameters: { argTypes },
     storyStore,
   } = context;
-  const { story, showComponents, components, include, exclude } = props;
+  const { story, components, include, exclude } = props;
   let storyArgTypes;
   try {
     let storyId;
@@ -158,12 +158,6 @@ export const StoryTable: FC<StoryProps & { components: Record<string, Component>
     }
     storyArgTypes = filterArgTypes(storyArgTypes, include, exclude);
 
-    // This code handles three cases:
-    //  1. the story has args, in which case we want to show controls for the story
-    //  2. the story has args, and the user specifies showComponents, in which case
-    //     we want to show controls for the primary component AND show props for each component
-    //  3. the story has NO args, in which case we want to show props for each component
-
     // eslint-disable-next-line prefer-const
     let [args, updateArgs] = useArgs(storyId, storyStore);
     let tabs = { Story: { rows: storyArgTypes, args, updateArgs } } as Record<
@@ -180,10 +174,7 @@ export const StoryTable: FC<StoryProps & { components: Record<string, Component>
       tabs = {};
     }
 
-    if (showComponents || !storyHasArgsWithControls) {
-      tabs = addComponentTabs(tabs, components, context, include, exclude);
-    }
-
+    tabs = addComponentTabs(tabs, components, context, include, exclude);
     return <TabbedArgsTable tabs={tabs} />;
   } catch (err) {
     return <ArgsTable error={err.message} />;
@@ -205,14 +196,15 @@ export const Props: FC<PropsProps> = (props) => {
   } = context;
 
   const { include, exclude, components } = props as ComponentsProps;
-  const { story } = props as StoryProps;
+  const { story, showComponent } = props as StoryProps;
 
   let allComponents = components;
   const main = getComponent(props, context);
 
-  if (!allComponents && main) {
-    const mainLabel = getComponentName(main);
-    allComponents = { [mainLabel]: main, ...subcomponents };
+  const mainLabel = getComponentName(main);
+  if (!allComponents) {
+    allComponents =
+      !story || showComponent ? { [mainLabel]: main, ...subcomponents } : subcomponents;
   }
 
   if (story) {

diff --git a/examples/official-storybook/stories/addon-docs/props.stories.mdx b/examples/official-storybook/stories/addon-docs/props.stories.mdx
@@ -8,6 +8,7 @@ import { MemoButton } from '../../components/MemoButton';
 <Meta
   title="Addons/Docs/props"
   component={ButtonGroup}
+  subcomponents={{ SubGroup }}
   parameters={{ controls: { expanded: false } }}
 />
 
@@ -35,7 +36,12 @@ export const ArgsStory = (args = {}) => (
       arrayArg: ['a', 'b'],
     }}
     argTypes={{
-      boolArg: { name: 'boolArg', type: { name: 'boolean' }, description: 'bool description' },
+      boolArg: {
+        name: 'boolArg',
+        type: { name: 'boolean' },
+        description: 'bool description',
+        control: 'boolean',
+      },
       stringArg: {
         name: 'stringArg',
         type: { name: 'string' },
@@ -47,11 +53,13 @@ export const ArgsStory = (args = {}) => (
             detail: 'some long bar default',
           },
         },
+        control: 'text',
       },
       arrayArg: {
         name: 'arrayArg',
         type: { name: 'array', value: { name: 'string' } },
         description: 'baz description',
+        control: 'array',
       },
       selectArg: {
         name: 'selectArg',
@@ -74,9 +82,9 @@ export const ArgsStory = (args = {}) => (
 
 <Props story="ArgTypes" />
 
-## ArgTypes w/ Components
+## ArgTypes w/ Component
 
-<Props story="ArgTypes" showComponents />
+<Props story="ArgTypes" showComponent />
 
 ## Args