Describe the bug
If a decorator itself uses child components, those components are displayed in the Story Source. This can be seen in the following example, where the decorator uses a child component to handle the layout. Prop Tables are also displayed for each of these components. There is no way to exclude these components using the withInfo
addon as they are internal to the Component.
Screenshots
Code snippets
ProgressBar.js
import styled from 'styled-components'
import React from 'react'
import PropTypes from 'prop-types'
import { height, themeColor } from '../../styles/api/helpers'
import { ratioToPercentage } from '../../helpers/units'
const Layout = styled.div`
${height(1)};
position: relative;
width: 100%;
background-color: ${themeColor(`inset`)};
border-radius: 20px;
`
const Fill = styled.div`
position: absolute;
left: 0;
height: 100%;
background-color: ${themeColor(`primary`)};
width: ${p => ratioToPercentage(p.progress)};
border-radius: 20px;
`
const ProgressBar = ({ progress }) => (
<Layout>
<Fill progress={progress} />
</Layout>
)
ProgressBar.propTypes = {
progress: PropTypes.number,
}
ProgressBar.defaultProps = {
progress: 0,
}
export default ProgressBar
VerticalLayoutDecorator.js
import React from 'react'
import styled from 'styled-components'
import VLayout from '../../components/layouts/VLayout'
const Layout = styled(VLayout).attrs({ spacing: 1 })``
const VerticalLayoutDecorator = storyFn => <Layout>{storyFn()}</Layout>
export default VerticalLayoutDecorator
ProgressBar.story.js
import React from 'react'
import { storiesOf } from '@storybook/react'
import VerticalLayoutDecorator from '../../storybook/decorators/VerticalLayoutDecorator'
import ProgressBar from './ProgressBar'
storiesOf(`ProgressBar`, module)
.addDecorator(VerticalLayoutDecorator)
.add(`Default`, () => (
<React.Fragment>
<ProgressBar progress={0} />
<ProgressBar progress={0.25} />
<ProgressBar progress={0.5} />
<ProgressBar progress={1} />
</React.Fragment>
))
<VerticalLayoutDecorator__Layout>
<Unknown>
<ProgressBar/>
<ProgressBar progress={0.25} />
<ProgressBar progress={0.5} />
<ProgressBar progress={1} />
</Unknown>
</VerticalLayoutDecorator__Layout>
Expected behavior
The Story Source Should Display:
<ProgressBar/>
<ProgressBar progress={0.25} />
<ProgressBar progress={0.5} />
<ProgressBar progress={1} />
System:
"@storybook/react": "^4.0.7"
Additional context
Possibly related to: https://github.com/storybooks/storybook/issues/4759
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
I am also experiencing this problem. Please don't close as inactive 馃槄!
Yep. This is definitely still a problem. It pretty much ruins one of the most useful features.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Still a problem, stalebot.
Still a problem. Please can a maintainer remove the inactive label.
Place withInfo
decorator before other decorator works for me.
addDecorator(withInfo({
inline: true,
header: false,
}));
addDecorator(story => <Wrapper>{story()}</Wrapper>);
Yep, same here. Global decorators work just fine, story decorators still have this issue.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Not inactive stalebot. Still a problem.
Same problem for me.
I use the decorator for providing data to my component:
But it can't be provided with the global addDecorator
because data might be different between components.
It would be great if this can be fixed with the local addDecorator
.
I think the info addon is really nice, but not usable in my case :/
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Still an issue.
Hmmm @tmeasday I bet this is due to https://github.com/storybooks/storybook/blob/next/MIGRATION.md#individual-story-decorators
Nevermind
at this location, global decorators are merged after local ones.
But to work properly, the info addon must be the first one.
So by using local decorators it simply fail this rule.
Maybe local decorators must be merged after global ones.
But I don't know if this change can impact other things...
The thing you can do in your project to get around this issue, is to remove the global withInfo
decorator you have in your .storybook/conffig.js
file and add a local withInfo
decotors in each of your stories:
storiesOf('Component', module)
.addDecorator(withInfo)
.addDecorator(story => (<Provider store={store}>{story()}</Provider>))
.add(...);
@tonai I tried this but now the whole thing is wrapped around this (including the withInfo stuff) rather than just the source from the .add()
:/
Hi @lookapanda ,
I have created a little example repo to show you how I am using it : https://github.com/tonai/storybook-addon-info-example
If you look at info for the component in the demo it only show the source of the component event if I'm using the react-redux <Provider>
as decorator.
Also tested with the 4.x version.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Also experiencing this issue. @tonai 's workaround works (thanks !) but is not practical for our use case as we need both a global and a local withInfo decorator.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
FYI I'm redoing addon-info
features as part of the Storybook Docs project.
https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a
I plan to use the analysis from addon-storysource
to determine the source to show, if possible, and that wouldn't have this problem. Will post here when there's something to try out, and for anybody who's interested there's a channel called #docs-mode
in the Storybook Discord for project updates: https://discord.gg/UUt2PJb
@shilman I'll grin from ear-to-ear if you fix this.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Still an issue stale bot.
@Undistraction this is working well in addon-docs
thanks to the storysource addon
@shilman great news. I'll try that out later today.
Still an issue
Still an issue, be great if this could be fixed.
Still an issue, please don't close :D
Bump! Say no to stale bot
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Still a problem stalebot.
Still an issue.
If you haven't tried it yet, addon-docs
is currently in beta and is designed to replace addon-info
: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!
Still an issue :(
i still have the same issue :(
came across this issue after googling, I as well see the issue.
Was this ever fixed?
Not that I know of. All dev effort is going into addon-docs
now, which fixes this issue and many others: https://medium.com/storybookjs/storybook-docspage-e185bc3622bf
Not that I know of. All dev effort is going into
addon-docs
now, which fixes this issue and many others: https://medium.com/storybookjs/storybook-docspage-e185bc3622bf
Thanks! I came acros yesterday. It's indeed superior and it seems like there are just too many edge cases where using the info without being able to specify the component itself is not sufficient.
Most helpful comment
Place
withInfo
decorator before other decorator works for me.