Merge pull request #25663 from storybookjs/jeppe/fix-controls-block

Blocks: Fix Controls block not having controls
storybookjs · Jan 19, 2024 · be122d8 · be122d8
2 parents 2fb8594 + 6e6453c
commit be122d8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx
@@ -51,15 +51,24 @@ export const Controls: FC<ControlsProps> = (props) => {
   const exclude = props.exclude ?? controlsParameters.exclude;
   const sort = props.sort ?? controlsParameters.sort;
 
-  const [, updateArgs, resetArgs] = useArgs(story, context);
+  const [args, updateArgs, resetArgs] = useArgs(story, context);
   const [globals] = useGlobals(story, context);
 
   const filteredArgTypes = filterArgTypes(argTypes, include, exclude);
 
   const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents).length > 0;
 
   if (!hasSubcomponents) {
-    return <PureArgsTable rows={filteredArgTypes} sort={sort} />;
+    return (
+      <PureArgsTable
+        rows={filteredArgTypes}
+        sort={sort}
+        args={args}
+        globals={globals}
+        updateArgs={updateArgs}
+        resetArgs={resetArgs}
+      />
+    );
   }
 
   const mainComponentName = getComponentName(component);
@@ -75,6 +84,7 @@ export const Controls: FC<ControlsProps> = (props) => {
     <TabbedArgsTable
       tabs={tabs}
       sort={sort}
+      args={args}
       globals={globals}
       updateArgs={updateArgs}
       resetArgs={resetArgs}

diff --git a/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx
@@ -20,18 +20,28 @@ export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) =>
 
   return (
     <TabsState>
-      {entries.map((entry) => {
+      {entries.map((entry, index) => {
         const [label, table] = entry;
         const id = `prop_table_div_${label}`;
         const Component = 'div' as unknown as React.ElementType<
           Omit<JSX.IntrinsicElements['div'], 'children'> & {
             children: ({ active }: { active: boolean }) => React.ReactNode;
           }
         >;
+
+        /**
+         * The first tab is the main component, controllable if in the Controls block
+         * All other tabs are subcomponents, never controllable, so we filter out the props indicating controllability
+         * Essentially all subcomponents always behave like ArgTypes, never Controls
+         */
+        const argsTableProps = index === 0 ? props : { sort: props.sort };
+
         return (
           <Component key={id} id={id} title={label}>
             {({ active }) =>
-              active ? <ArgsTable key={`prop_table_${label}`} {...table} {...props} /> : null
+              active ? (
+                <ArgsTable key={`prop_table_${label}`} {...table} {...argsTableProps} />
+              ) : null
             }
           </Component>
         );