From 27a9427c3264897af641178d58357b619e9a69ee Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 27 Mar 2019 23:15:46 +0100
Subject: [PATCH] Merge pull request #6222 from
 Krustal/addon-info-forward-ref-opt-in

forwardRef elements use displayName if available
---
 addons/info/src/components/Node.js            |   2 +-
 .../ForwardedRefButtonWDisplayName.js         |  28 +++
 .../addon-info.stories.storyshot              | 236 ++++++++++++++++++
 .../stories/addon-info.stories.js             |   4 +
 4 files changed, 269 insertions(+), 1 deletion(-)
 create mode 100644 examples/official-storybook/components/ForwardedRefButtonWDisplayName.js

diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js
index 87e9a787253e..926b664c3588 100644
--- a/addons/info/src/components/Node.js
+++ b/addons/info/src/components/Node.js
@@ -73,7 +73,7 @@ export default function Node(props) {
     );
   }
 
-  if (isForwardRef(node)) {
+  if (isForwardRef(node) && !node.type.displayName) {
     const childElement = node.type.render(node.props);
     return (
       <div>
diff --git a/examples/official-storybook/components/ForwardedRefButtonWDisplayName.js b/examples/official-storybook/components/ForwardedRefButtonWDisplayName.js
new file mode 100644
index 000000000000..cbd36e0d3407
--- /dev/null
+++ b/examples/official-storybook/components/ForwardedRefButtonWDisplayName.js
@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import BaseButton from './BaseButton';
+
+const ForwardedRefButtonWDisplayName = forwardRef((props, ref) => (
+  <BaseButton {...props} forwardedRef={ref} />
+));
+
+ForwardedRefButtonWDisplayName.defaultProps = {
+  disabled: false,
+  onClick: () => {},
+  style: {},
+};
+
+ForwardedRefButtonWDisplayName.propTypes = {
+  /** Boolean indicating whether the button should render as disabled */
+  disabled: PropTypes.bool,
+  /** button label. */
+  label: PropTypes.string.isRequired,
+  /** onClick handler */
+  onClick: PropTypes.func,
+  /** Custom styles */
+  style: PropTypes.shape({}),
+};
+
+ForwardedRefButtonWDisplayName.displayName = 'ButtonDisplayName';
+
+export default ForwardedRefButtonWDisplayName;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index 9df5eabc138f..6ba5cff70069 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -626,6 +626,242 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor
 </div>
 `;
 
+exports[`Storyshots Addons|Info/ForwardRef Uses forwardRef displayName if available 1`] = `
+<div>
+  <div
+    style="position:relative;z-index:0"
+  >
+    <button
+      type="button"
+    >
+      Forwarded Ref Button w/ Display Name
+    </button>
+  </div>
+  <button
+    class="info__show-button"
+    style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
+    type="button"
+  >
+    Show Info
+  </button>
+  <div
+    class="info__overlay"
+    style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
+  >
+    <button
+      class="info__close-button"
+      style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
+      type="button"
+    >
+      ×
+    </button>
+    <div>
+      <div
+        style="font-family:Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif;color:black;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
+      >
+        <div
+          style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
+        >
+          <h1
+            style="margin:0;padding:0;font-size:35px"
+          >
+            Addons|Info/ForwardRef
+          </h1>
+          <h2
+            style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
+          >
+            Uses forwardRef displayName if available
+          </h2>
+        </div>
+        <div>
+          <h1
+            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
+          >
+            Story Source
+          </h1>
+          <pre
+            style="display:flex;justify-content:space-between;align-items:center;font-size:.88em;font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+          >
+            <div>
+              <div
+                style="padding-left:18px;padding-right:3px"
+              >
+                <span
+                  style="color:#444"
+                >
+                  &lt;ButtonDisplayName
+                </span>
+                <span>
+                  <span>
+                     
+                    <span>
+                      label
+                    </span>
+                    <span>
+                      =
+                      <span>
+                        "
+                        <span
+                          style="color:#22a;word-break:break-word"
+                        >
+                          Forwarded Ref Button w/ Display Name
+                        </span>
+                        "
+                      </span>
+                    </span>
+                     
+                  </span>
+                </span>
+                <span
+                  style="color:#444"
+                >
+                  /&gt;
+                </span>
+              </div>
+            </div>
+            <button
+              style="background-color:rgb(255, 255, 255);cursor:pointer;font-size:13px;align-self:flex-start;flex-shrink:0;overflow:hidden;border-width:1px;border-style:solid;border-color:rgb(238, 238, 238);border-image:initial;border-radius:3px;padding:3px 10px"
+              type="button"
+            >
+              Copy
+            </button>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h3
+              style="margin:20px 0 0 0"
+            >
+              "BaseButton" Component
+            </h3>
+            <table
+              class="info-table"
+            >
+              <thead>
+                <tr>
+                  <th>
+                    property
+                  </th>
+                  <th>
+                    propType
+                  </th>
+                  <th>
+                    required
+                  </th>
+                  <th>
+                    default
+                  </th>
+                  <th>
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    <span>
+                      bool
+                    </span>
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td>
+                    <span>
+                      false
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    label
+                  </td>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    <span>
+                      string
+                    </span>
+                  </td>
+                  <td>
+                    yes
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    <span>
+                      func
+                    </span>
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td>
+                    <span>
+                      onClick
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    style
+                  </td>
+                  <td
+                    class="info-table-monospace"
+                  >
+                    <span>
+                      other
+                    </span>
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td>
+                    <span>
+                      {}
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
 <div>
   <div
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index cdad5ac7dde8..27738a21bf17 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -7,6 +7,7 @@ import DocgenButton from '../components/DocgenButton';
 import FlowTypeButton from '../components/FlowTypeButton';
 import BaseButton from '../components/BaseButton';
 import ForwardedRefButton from '../components/ForwardedRefButton';
+import ForwardedRefButtonWDisplayName from '../components/ForwardedRefButtonWDisplayName';
 import { NamedExportButton } from '../components/NamedExportButton';
 import TableComponent from '../components/TableComponent';
 import externalMdDocs from './addon-info-resources/EXAMPLE.md';
@@ -319,6 +320,9 @@ storiesOf('Addons|Info/ForwardRef', module)
   .addDecorator(withInfo)
   .add('Displays forwarded ref components correctly', () => (
     <ForwardedRefButton label="Forwarded Ref Button" />
+  ))
+  .add('Uses forwardRef displayName if available', () => (
+    <ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
   ));
 
 storiesOf('Addons|Info/deprecated', module).add(