fix: merge controls, hide props table on empty

ccontrols · Nov 16, 2020 · ee4b11a · ee4b11a
1 parent 89a5b43
commit ee4b11a
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 7 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -148,6 +148,22 @@
         "program": "${workspaceFolder}/node_modules/jest/bin/jest",
       }
     },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "jest react-docgen-typescript",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "cwd": "${workspaceFolder}/props-info/react-docgen-typescript",
+      "args": [
+        "extends",
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      }
+    },
     {
       "type": "node",
       "request": "launch",

diff --git a/core/store/src/serialization/transform-controls.ts b/core/store/src/serialization/transform-controls.ts
@@ -3,6 +3,7 @@ import {
   ComponentControl,
   ControlTypes,
   Story,
+  deepMergeReplaceArrays,
   Document,
   Components,
   getComponentName,
@@ -130,7 +131,10 @@ export const getControls = (
           return true;
         })
         .reduce((acc, key) => ({ ...acc, [key]: newControls[key] }), {});
-      return transformControls(storyControls, filteredControls);
+      const transformed = transformControls(storyControls, filteredControls);
+      return transformed
+        ? deepMergeReplaceArrays(filteredControls, transformed)
+        : filteredControls;
     }
   }
   return transformControls(storyControls);

diff --git a/props-info/react-docgen-typescript/test/__snapshots__/extends.test.ts.snap b/props-info/react-docgen-typescript/test/__snapshots__/extends.test.ts.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`extends button.tsx 1`] = `
+Object {
+  "description": "",
+  "displayName": "Button",
+  "methods": Array [],
+  "props": Object {
+    "fullWidth": Object {
+      "parentName": "ButtonProps",
+      "type": Object {
+        "name": "boolean",
+        "raw": "boolean",
+      },
+    },
+    "size": Object {
+      "defaultValue": "medium",
+      "parentName": "ButtonProps",
+      "type": Object {
+        "name": "enum",
+        "raw": "\\"small\\" | \\"medium\\"",
+        "value": Array [
+          Object {
+            "name": "string",
+            "value": "small",
+          },
+          Object {
+            "name": "string",
+            "value": "medium",
+          },
+        ],
+      },
+    },
+    "variant": Object {
+      "defaultValue": "primary",
+      "parentName": "ButtonProps",
+      "type": Object {
+        "name": "enum",
+        "raw": "\\"primary\\" | \\"success\\" | \\"warn\\" | \\"danger\\"",
+        "value": Array [
+          Object {
+            "name": "string",
+            "value": "primary",
+          },
+          Object {
+            "name": "string",
+            "value": "success",
+          },
+          Object {
+            "name": "string",
+            "value": "warn",
+          },
+          Object {
+            "name": "string",
+            "value": "danger",
+          },
+        ],
+      },
+    },
+  },
+}
+`;
diff --git a/props-info/react-docgen-typescript/test/extends.test.ts b/props-info/react-docgen-typescript/test/extends.test.ts
@@ -0,0 +1,5 @@
+import { loadTestFiles } from './loadTestFiles';
+
+describe('extends', () => {
+  loadTestFiles(['extends']);
+});
diff --git a/props-info/react-docgen-typescript/test/fixtures/extends/button.tsx b/props-info/react-docgen-typescript/test/fixtures/extends/button.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+export interface ButtonProps extends React.ComponentProps<'button'> {
+  variant?: 'primary' | 'success' | 'warn' | 'danger';
+  size?: 'small' | 'medium';
+  fullWidth?: boolean;
+}
+
+export const Button: FC<ButtonProps> = ({
+  children,
+  size = 'medium',
+  type = 'button',
+  variant = 'primary',
+  fullWidth,
+  className,
+  ...props
+}) => (
+  <button
+    type={type}
+    className={`${variant}-${size}-${fullWidth ? 'yes' : 'no'} ${className}`}
+    {...props}
+  >
+    {children}
+  </button>
+);
diff --git a/ui/pages/src/ClassicPage/ClassicPage.tsx b/ui/pages/src/ClassicPage/ClassicPage.tsx
@@ -46,12 +46,14 @@ export const ClassicPage: FC = () => {
           visibility="controls"
         />
       )}
-      <PropsTable
-        of="."
-        title={mixedControls ? 'Controls' : 'Properties'}
-        flat={propsCount <= threshold && !mixedControls}
-        visibility={splitControls ? 'info' : 'all'}
-      />
+      {(propsCount > 0 || (!splitControls && controlsCount > 0)) && (
+        <PropsTable
+          of="."
+          title={mixedControls ? 'Controls' : 'Properties'}
+          flat={propsCount <= threshold && !mixedControls}
+          visibility={splitControls ? 'info' : 'all'}
+        />
+      )}
       <ComponentDeps id="." title="External dependencies" />
       <Stories dark={true} />
     </div>