Decorator Children Displayed In Story Source

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

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

[hdnha11]

Place withInfo decorator before other decorator works for me.

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

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

[Glavin001]

I am also experiencing this problem. Please don’t close as inactive 😅!