Storybook: Decorator Children Displayed In Story Source

Created on 16 Nov 2018  路  42Comments  路  Source: storybookjs/storybook

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
src

Code snippets

Component

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

Decorator

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

Story

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>
  ))

Displayed In Story Source:

<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:

  • OS: OSX
  • Device: iMac
  • Browser: All
  • Framework: React
  • Addons:
    ```
    "@storybook/addon-a11y": "^4.0.7",
    "@storybook/addon-actions": "^4.0.7",
    "@storybook/addon-backgrounds": "^4.0.7",
    "@storybook/addon-info": "^4.0.7",
    "@storybook/addon-links": "^4.0.7",
    "@storybook/addon-notes": "^4.0.7",
    "@storybook/addon-options": "^4.0.7",
    "@storybook/addon-viewport": "^4.0.7",
    "@storybook/addons": "^4.0.7",
    ````
  • Version:
    "@storybook/react": "^4.0.7"

Additional context
Possibly related to: https://github.com/storybooks/storybook/issues/4759

info inactive question / support

Most helpful comment

Place withInfo decorator before other decorator works for me.

addDecorator(withInfo({
  inline: true,
  header: false,
}));

addDecorator(story => <Wrapper>{story()}</Wrapper>);

All 42 comments

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:

  • material UI theme
  • date provider for material-ui-pickers
  • redux store
  • ...etc

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tlrobinson picture tlrobinson  路  3Comments

oriSomething picture oriSomething  路  3Comments

dnlsandiego picture dnlsandiego  路  3Comments

purplecones picture purplecones  路  3Comments

zvictor picture zvictor  路  3Comments