Addon-docs: Fix controls column display logic

addons/docs/src/blocks/Props.tsx

@@ -147,7 +147,13 @@ export const StoryTable: FC<StoryProps & { components: Record<string, Component>
       storyArgTypes = data.parameters.argTypes;
     }
     storyArgTypes = filterArgTypes(storyArgTypes, include, exclude);
-    const [args, updateArgs] = useArgs(storyId, storyStore);
+
+    // 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

examples/official-storybook/stories/addon-docs/props.stories.mdx

@@ -63,7 +63,10 @@ export const FooBar = ({ foo, bar } = {}) => (
 
 <Preview>
   <Story name="Component" argTypes={{ background: { control: { type: 'color' } } }}>
-    {(args) => <DocgenButton {...args} />}
+    {({ background, children }) => {
+      const contents = children && children.length > 0 ? children : <DocgenButton label="child" />;
+      return <ButtonGroup background={background}>{contents}</ButtonGroup>;
+    }}
   </Story>
 </Preview>
 

lib/components/src/blocks/ArgsTable/ArgsTable.tsx

@@ -147,11 +147,11 @@ export type ArgsTableProps = ArgsTableRowProps | ArgsTableErrorProps;
 type RowProps = SectionRowProps | ArgRowProps;
 
 const ArgsTableRow: FC<RowProps> = (props) => {
-  const { section, showControls } = props as SectionRowProps;
+  const { section, updateArgs } = props as SectionRowProps;
   if (section) {
-    return <SectionRow {...{ section, showControls }} />;
+    return <SectionRow {...{ section, updateArgs }} />;
   }
-  const { row, arg, updateArgs } = props as ArgRowProps;
+  const { row, arg } = props as ArgRowProps;
   return <ArgRow {...{ row, arg, updateArgs }} />;
 };
 
@@ -181,8 +181,6 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     });
   }
 
-  const showControls = args && Object.keys(args).length > 0;
-
   const allRows: { key: string; value: any }[] = [];
   Object.entries(ungroupedRows).forEach(([key, row]) => {
     const arg = args && args[key];
@@ -194,7 +192,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   Object.keys(categoryRows).forEach((category) => {
     const catRows = categoryRows[category];
     if (Object.keys(catRows).length > 0) {
-      allRows.push({ key: category, value: { section: category, showControls } });
+      allRows.push({ key: category, value: { section: category, updateArgs } });
       Object.entries(catRows).forEach(([key, row]) => {
         const arg = args && args[key];
         allRows.push({
@@ -216,7 +214,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
             <th>Name</th>
             <th>Description</th>
             <th>Default</th>
-            {showControls ? <th>Control</th> : null}
+            {updateArgs ? <th>Control</th> : null}
           </tr>
         </thead>
         <tbody className="docblock-propstable-body">

lib/components/src/blocks/ArgsTable/SectionRow.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 import { transparentize } from 'polished';
 import { styled } from '@storybook/theming';
+import { Args } from './types';
 
 export interface SectionRowProps {
   section: string;
-  showControls: boolean;
+  updateArgs?: (args: Args) => void;
 }
 
 const SectionTh = styled.th<{}>(({ theme }) => ({
@@ -20,8 +21,8 @@ const SectionTh = styled.th<{}>(({ theme }) => ({
   background: `${theme.background.app} !important`,
 }));
 
-export const SectionRow: FC<SectionRowProps> = ({ section, showControls }) => (
+export const SectionRow: FC<SectionRowProps> = ({ section, updateArgs }) => (
   <tr>
-    <SectionTh colSpan={showControls ? 4 : 3}>{section}</SectionTh>
+    <SectionTh colSpan={updateArgs ? 4 : 3}>{section}</SectionTh>
   </tr>
 );