From 822f3dfe70ae10a0dac035408addbd5fee991a29 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Fri, 14 Feb 2020 23:55:10 +0800
Subject: [PATCH] Props: #8894 forward-ref repro

---
 .../8894-ts-forward-ref/docgen.snapshot       | 22 +++++++++++++++++++
 .../8894-ts-forward-ref/input.tsx             | 18 +++++++++++++++
 .../8894-ts-forward-ref/properties.snapshot   |  7 ++++++
 .../react/react-properties.stories.tsx        |  1 +
 4 files changed, 48 insertions(+)
 create mode 100644 addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/docgen.snapshot
 create mode 100644 addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/input.tsx
 create mode 100644 addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/properties.snapshot

diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/docgen.snapshot
new file mode 100644
index 000000000000..f455ca864081
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/docgen.snapshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-ts-forward-ref 1`] = `
+"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+
+const InnerBox = props => React.createElement(React.Fragment, null, JSON.stringify(props));
+/**
+ * Use \`Box\` component to handle margins/paddings.
+ */
+
+
+export const Box = React.forwardRef((props, ref) => React.createElement(InnerBox, _extends({}, props, {
+  ref: ref
+})));
+export const component = Box;
+Box.__docgenInfo = {
+  \\"description\\": \\"Use \`Box\` component to handle margins/paddings.\\",
+  \\"methods\\": []
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/input.tsx
new file mode 100644
index 000000000000..e3c5246992b0
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/input.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  pt?: number | string;
+  p?: number | string;
+};
+
+const InnerBox: React.FC<Props> = props => <>{JSON.stringify(props)}</>;
+
+/**
+ * Use `Box` component to handle margins/paddings.
+ */
+export const Box: React.FC<Props> = React.forwardRef<HTMLDivElement, Props>((props, ref) => (
+  <InnerBox {...props} ref={ref} />
+));
+
+export const component = Box;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/properties.snapshot
new file mode 100644
index 000000000000..5ac6038580af
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8894-ts-forward-ref/properties.snapshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-ts-forward-ref 1`] = `
+Object {
+  "rows": Array [],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/react-properties.stories.tsx b/addons/docs/src/frameworks/react/react-properties.stories.tsx
index 737547cb873c..7e3b6c7d0a6a 100644
--- a/addons/docs/src/frameworks/react/react-properties.stories.tsx
+++ b/addons/docs/src/frameworks/react/react-properties.stories.tsx
@@ -16,6 +16,7 @@ const fixtures = [
   '8140-js-prop-types-oneof',
   '9023-js-hoc',
   '8740-ts-multi-props',
+  '8894-ts-forward-ref',
 ];
 
 const stories = storiesOf('Properties/React', module);