Closed
Description
openedon Sep 7, 2016
Hey there. First of all great work on storybook. I've been using it for a couple of weeks now, and it's a great tool. Thanks!
I'm using @kadira/storybook@2.11.0 and I'm getting this weird PropType error on initial load, even though my component children are not even rendered yet. After that, everything works as expected. Anyway, it's not a problem at all, just wanted to report it. Could be an error on my side ...
I'm using a "portal" technique to similar to react-portal to open a menu in the body. Here's my simplified code
import React from 'react'
import { storiesOf, action } from '@kadira/storybook'
import Button from 'components/ux/Button'
import Menu, { MenuItem } from 'components/ux/Menu'
storiesOf('Menu', module)
.add('default', () => (
<Menu target={<Button style={{margin:'20px'}}>Open menu</Button>}>
<MenuItem>One</MenuItem>
<MenuItem>Two</MenuItem>
<MenuItem>Three</MenuItem>
</Menu>
))
The render function of Menu only renders Button and only after user clicks on that button, the menu is rendered inside portal node which is appended to body.
render() {
return cloneElement(this.props.target, {
onMouseUp: this.onTargetMouseUp
})
}
This is my storybook webpack.config.js
const path = require('path');
module.exports = {
devtool: 'eval',
module: {
loaders: [{
test: /\.(scss|css)$/,
loader: 'style!css?sourceMap!resolve-url?sourceMap!sass?sourceMap!postcss',
},{
test: /\.(png|jpg|svg|woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=100000',
}]
},
sassLoader: {
includePaths: [path.resolve(__dirname, '..', 'client', 'styles')],
},
postcss: function() {
return [
require('autoprefixer'),
]
},
}
And this is the error I get
VM28411:36 Warning: Failed prop type: Required prop `tabIndex` was not specified in `MenuItem`.
in MenuItem
printWarning @ VM28411:36
warning @ VM28411:60
checkReactTypeSpec @ VM28429:81
validatePropTypes @ VM28427:153
createElement @ VM28427:189
(anonymous function) @ ?d41d:82
renderMain @ render.js?714e:84
renderPreview @ render.js?714e:99
renderUI @ index.js?0342:89
dispatch @ VM29080:186
_renderMain @ config_api.js?9a1b:45
render @ config_api.js?9a1b:64
configure @ config_api.js?9a1b:80
(anonymous function) @ ?d41d:10
(anonymous function) @ ?d41d:6
(anonymous function) @ preview.bundle.js:4824
__webpack_require__ @ preview.bundle.js:556
fn @ preview.bundle.js:87
(anonymous function) @ preview.bundle.js:590
__webpack_require__ @ preview.bundle.js:556
(anonymous function) @ preview.bundle.js:579
(anonymous function) @ preview.bundle.js:582
client.js?3ac5:58[HMR] connected
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
No labels