diff --git a/addons/info/package.json b/addons/info/package.json index 5105d792d4cb..d0310d8ac09f 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -30,6 +30,7 @@ "nested-object-assign": "^1.0.1", "prop-types": "^15.6.2", "react-addons-create-fragment": "^15.5.3", + "react-is": "^16.6.1", "react-lifecycles-compat": "^3.0.4", "util-deprecate": "^1.0.2" }, diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js index 1ce58f3cfd53..87e9a787253e 100644 --- a/addons/info/src/components/Node.js +++ b/addons/info/src/components/Node.js @@ -1,4 +1,5 @@ import React from 'react'; +import { isForwardRef } from 'react-is'; import PropTypes from 'prop-types'; import Props from './Props'; @@ -72,6 +73,43 @@ export default function Node(props) { ); } + if (isForwardRef(node)) { + const childElement = node.type.render(node.props); + return ( +
+
+ + < + {`ForwardRef`} + + + > +
+ +
+ + </ + {`ForwardRef`} + > + +
+
+ ); + } + // Single-line tag if (!children) { return ( diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index d5dfa4013cab..45e4e0009946 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -1,6 +1,7 @@ /* eslint no-underscore-dangle: 0 */ import React, { Component, createElement } from 'react'; +import { isForwardRef } from 'react-is'; import { polyfill } from 'react-lifecycles-compat'; import PropTypes from 'prop-types'; import global from 'global'; @@ -337,9 +338,13 @@ class Story extends Component { if (innerChildren.props && innerChildren.props.children) { extract(innerChildren.props.children); } + if (isForwardRef(innerChildren)) { + extract(innerChildren.type.render(innerChildren.props)); + } if ( typeof innerChildren === 'string' || typeof innerChildren.type === 'string' || + isForwardRef(innerChildren) || (Array.isArray(propTablesExclude) && // also ignore excluded types ~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise ) { diff --git a/examples/official-storybook/components/ForwardedRefButton.js b/examples/official-storybook/components/ForwardedRefButton.js new file mode 100644 index 000000000000..72f69de58bf8 --- /dev/null +++ b/examples/official-storybook/components/ForwardedRefButton.js @@ -0,0 +1,24 @@ +import React, { forwardRef } from 'react'; +import PropTypes from 'prop-types'; +import BaseButton from './BaseButton'; + +const ForwardedRefButton = forwardRef((props, ref) => ); + +ForwardedRefButton.defaultProps = { + disabled: false, + onClick: () => {}, + style: {}, +}; + +ForwardedRefButton.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({}), +}; + +export default ForwardedRefButton; diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot index b6f13985ce04..c6133533b10a 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot @@ -357,6 +357,435 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = ` `; +exports[`Storyshots Addons|Info.ForwardRef Displays forwarded ref components correctly 1`] = ` +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + 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; +} + +.emotion-2 { + overflow: hidden; + border: 1px solid #eee; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; + font-size: 13px; + padding: 3px 10px; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-2:hover { + background-color: #f4f7fa; + border-color: #ddd; +} + +.emotion-2:active { + background-color: #e9ecef; + border-color: #ccc; +} + +.emotion-0 { + -webkit-transition: -webkit-transform .2s ease; + -webkit-transition: transform .2s ease; + transition: transform .2s ease; + height: 16px; + -webkit-transform: translateY(-100%) translateY(-6px); + -ms-transform: translateY(-100%) translateY(-6px); + transform: translateY(-100%) translateY(-6px); +} + +.emotion-56 { + border-collapse: collapse; +} + +.emotion-6 { + padding: 2px 6px; + border: 1px solid #ccc; +} + +.emotion-16 { + padding: 2px 6px; + border: 1px solid #ccc; + white-space: nowrap; + font-family: Monaco,Consolas,"Courier New",monospace; +} + +
+
+ +
+ +
+ +
+
+
+

+ Addons|Info.ForwardRef +

+

+ Displays forwarded ref components correctly +

+
+
+

+ Story Source +

+ 
+            

+              

+                

+                  
+                    <ForwardRef
+                  
+                  
+                    
+                       
+                      
+                        label
+                      
+                      
+                        =
+                        
+                          "
+                          
+                            Forwarded Ref Button
+                          
+                          "
+                        
+                      
+                    
+                  
+                  
+                    >
+                  
+                

+                

+                  
+                    <BaseButton
+                  
+                  
+                    
+                       
+                      
+                        label
+                      
+                      
+                        =
+                        
+                          "
+                          
+                            Forwarded Ref Button
+                          
+                          "
+                        
+                      
+                    
+                    
+                       
+                      
+                        onClick
+                      
+                      
+                        =
+                        
+                          {
+                          
+                            onClick
+                          
+                          }
+                        
+                      
+                    
+                    
+                       
+                      
+                        style
+                      
+                      
+                        =
+                        
+                          {
+                          
+                            {}
+                          
+                          }
+                        
+                      
+                       
+                    
+                  
+                  
+                    />
+                  
+                

+                

+                  
+                    </ForwardRef>
+                  
+                

+              

+            

+            
+
+
+
+

+ Prop Types +

+
+

+ "BaseButton" Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ disabled + + + + - + + + false + + +
+ label + + + + yes + + - + +
+ onClick + + + + - + + + onClick + + +
+ style + + + + - + + + {} + + +
+
+
+
+
+
+
+`; + exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = ` .emotion-4 { display: -webkit-box; diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js index 80c8630509b2..776ed75586b1 100644 --- a/examples/official-storybook/stories/addon-info.stories.js +++ b/examples/official-storybook/stories/addon-info.stories.js @@ -6,6 +6,7 @@ import { action } from '@storybook/addon-actions'; import DocgenButton from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; import BaseButton from '../components/BaseButton'; +import ForwardedRefButton from '../components/ForwardedRefButton'; import { NamedExportButton } from '../components/NamedExportButton'; import TableComponent from '../components/TableComponent'; import externalMdDocs from './addon-info-resources/EXAMPLE.md'; @@ -432,6 +433,12 @@ storiesOf('Addons|Info.Parameters', module) { info: { disable: true } } ); +storiesOf('Addons|Info.ForwardRef', module) + .addDecorator(withInfo) + .add('Displays forwarded ref components correctly', () => ( + + )); + storiesOf('Addons|Info.deprecated', module).add( 'Displays Markdown in description', withInfo(markdownDescription)(() => )