Merge pull request #9924 from storybookjs/9922-props-block-component-of

Props: Repro #9922

addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/docgen.snapshot

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9922-ts-component-props 1`] = `
+"import React from 'react';
+
+const Button = ({
+  children,
+  onClick
+}) => React.createElement(\\"button\\", {
+  onClick: onClick,
+  type: \\"button\\"
+}, children);
+
+const WrappedButton = ({
+  spacing,
+  ...buttonProps
+}) => React.createElement(\\"div\\", {
+  style: {
+    padding: spacing
+  }
+}, React.createElement(Button, buttonProps));
+
+export const component = WrappedButton;
+WrappedButton.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"WrappedButton\\",
+  \\"props\\": {
+    \\"spacing\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"number\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;

addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/input.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent, ComponentProps, HTMLAttributes } from 'react';
+
+type Props = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+const Button: FunctionComponent<Props> = ({ children, onClick }) => (
+  <button onClick={onClick} type="button">
+    {children}
+  </button>
+);
+
+type WrappedProps = {
+  spacing: number;
+} & ComponentProps<typeof Button>;
+
+const WrappedButton: FunctionComponent<WrappedProps> = ({
+  spacing,
+  ...buttonProps
+}: WrappedProps) => (
+  <div style={{ padding: spacing }}>
+    <Button {...buttonProps} />
+  </div>
+);
+
+export const component = WrappedButton;

addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/properties.snapshot

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9922-ts-component-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "spacing",
+      "required": true,
+      "type": Object {
+        "detail": undefined,
+        "summary": "number",
+      },
+    },
+  ],
+}
+`;

addons/docs/src/frameworks/react/react-properties.stories.tsx

@@ -28,6 +28,7 @@ const fixtures = [
   '9465-ts-type-props',
   '8428-js-static-prop-types',
   '9764-ts-extend-props',
+  '9922-ts-component-props',
 ];
 
 const stories = storiesOf('Properties/React', module);