Skip to content

Commit

Permalink
Merge pull request #6222 from Krustal/addon-info-forward-ref-opt-in
Browse files Browse the repository at this point in the history 
forwardRef elements use displayName if available
  • Loading branch information
@ndelangen
ndelangen authored Mar 27, 2019
2 parents 1012fbd + 5e48b8f commit 5908559
Show file tree
Hide file tree
Showing 4 changed files with 269 additions and 1 deletion.
2 changes: 1 addition & 1 deletion addons/info/src/components/Node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 28 additions & 0 deletions examples/official-storybook/components/ForwardedRefButtonWDisplayName.js
View file
Original file line number Diff line number Diff line change
@@ -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;
236 changes: 236 additions & 0 deletions examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,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
Expand Down
4 changes: 4 additions & 0 deletions examples/official-storybook/stories/addon-info.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit 5908559

Please sign in to comment.