Closed
Description
Bug or support request summary
Using React.forwardRef cause the prop type of PropTable to be incorrect.
Warning: Failed prop type: Invalid prop `type` of type `object` supplied to `PropTable`, expected `function`.
in PropTable
in Unknown (created by Story)
in div (created by Story)
in div (created by Story)
in div (created by Story)
in div (created by Story)
in div (created by Story)
in ThemeProvider (created by Story)
in Story
in WrapStory
It causes bugs in the story source and proptypes table
Story without the forwardRef wrapper:
Story with the forwardRef wrapper: (Note the Unknown tag)
Steps to reproduce
Add the wrapper React.forwardRef to a working component that is used in a story
React.forwardRef(({ text, onDelete, ...rest }, ref) => { ... }
My code example uses styled-components but normal DOM element reproduce the bug too.
Please specify which version of Storybook and optionally any affected addons that you're running
@storybook/react 3.4.0@storybook/addon-info 3.4.0
Affected platforms
Chrome V65.0.3325.181, windows 10 V1709
I'm pretty sure its not related but my version of styled-components is 3.2.5
Screenshots / Screencast / Code Snippets (Optional)
This is the working exemple code:
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Container = styled.div`
background-color: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.87);
height: 36px;
display: inline-block;
padding: ${({ hasDelete }) => (hasDelete ? ' 0px 4px 0px 12px' : '0px 12px')};
font-family: 'Roboto', sans-serif;
border-radius: 36px;
position: relative;
`;
const Text = styled.p`
display: inline-block;
height: 16px;
margin: 10px 0px;
font-size:14px;
position: relative;
`;
const Chip = ({ text, onDelete, ...rest }) => {
return (
<Container hasDelete={onDelete !== undefined} {...rest} >
<Text>{text}</Text>
</Container>
);
};
Chip.defaultProps = {
onDelete: undefined,
};
Chip.propTypes = {
text: PropTypes.string.isRequired,
onDelete: PropTypes.func,
};
export default Chip;This is the bug exemple code:
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Container = styled.div`
background-color: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.87);
height: 36px;
display: inline-block;
padding: ${({ hasDelete }) => (hasDelete ? ' 0px 4px 0px 12px' : '0px 12px')};
font-family: 'Roboto', sans-serif;
border-radius: 36px;
position: relative;
`;
const Text = styled.p`
display: inline-block;
height: 16px;
margin: 10px 0px;
font-size:14px;
position: relative;
`;
const Chip = React.forwardRef(({ text, onDelete, ...rest }, ref) => {
return (
<Container innerRef={ref} hasDelete={onDelete !== undefined} {...rest} >
<Text>{text}</Text>
</Container>
);
});
Chip.defaultProps = {
onDelete: undefined,
};
Chip.propTypes = {
text: PropTypes.string.isRequired,
onDelete: PropTypes.func,
};
export default Chip;Story
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Chip from '../src/chip';
storiesOf('Chip', module)
.add('Basic Usage', withInfo({
inline: true,
text: `
<div>
<h3>Description</h3>
<p>This is the basic usage of the Chip.</p>
<h3>Requirement</h3>
<p>None</p>
<h3>Props</h3>
<ul>
<li>text: Text added in the chip</li>
<li>onDelete: Function that is called when the delete button is clicked</li>
</ul>
</div>
`,
})((() => (
<div>
<Chip
text="This is a test"
onDelete={() => { console.log('test'); }}
/>
<Chip
text="This can't be deleted"
style={{ marginLeft: '20px' }}
/>
</div>
))));Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment