Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Example Code Not Functioning Without 'args' Variable #27153

Open
petrvostry opened this issue May 15, 2024 · 1 comment
Open

[Bug]: Example Code Not Functioning Without 'args' Variable #27153

petrvostry opened this issue May 15, 2024 · 1 comment

Comments

@petrvostry
Copy link

Describe the bug

There is an issue when writing a story for Storybook where the example code does not function unless the 'args' variable is included.

Workaround:
The issue is resolved when the first line is changed to include the 'args' variable:

const Template6: StoryFn<typeof Chip> = (args) => (

Thank you!

To Reproduce

Create a story using the following code:

const Template6: StoryFn<typeof Chip> = () => (
    <RowContainer>
        <Chip  type="information" size="large" label="Chip with icon" icon={<HelpIcon color="inherit" />} />
    </RowContainer>
);

export const WithCustomIcon: StoryObj<typeof Chip> = {
    render: Template6,
};

Attempt to render the story.

Expected Behavior:
The story should render a demo showing a Chip component with a custom icon.

Actual Behavior:
The resulting example code is:

{ render: Template6 }

System

PS C:\React\daf-fe-sb> npx storybook@latest info

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
  Binaries:
    Node: 18.20.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @storybook/addon-a11y: ^8.1.0 => 8.1.0
    @storybook/addon-essentials: ^8.1.0 => 8.1.0
    @storybook/addon-interactions: ^8.1.0 => 8.1.0
    @storybook/addon-links: ^8.1.0 => 8.1.0
    @storybook/addon-mdx-gfm: ^8.1.0 => 8.1.0
    @storybook/addon-webpack5-compiler-swc: ^1.0.2 => 1.0.2
    @storybook/manager-api: ^8.1.0 => 8.1.0
    @storybook/mdx2-csf: ^1.1.0 => 1.1.0
    @storybook/preview-api: ^8.1.0 => 8.1.0
    @storybook/react: ^8.1.0 => 8.1.0
    @storybook/react-dom-shim: ^8.1.0 => 8.1.0
    @storybook/react-vite: ^8.1.0 => 8.1.0
    @storybook/react-webpack5: ^8.1.0 => 8.1.0
    @storybook/test: ^8.1.0 => 8.1.0
    @storybook/test-runner: ^0.18.0 => 0.18.0
    @storybook/theming: ^8.1.0 => 8.1.0
    storybook: ^8.1.0 => 8.1.0
    storybook-react-context: ^0.6.0 => 0.6.0

Additional context

This issue seems to be related to the way Storybook handles the rendering of components without the 'args' parameter.

@shilman
Copy link
Member

shilman commented May 19, 2024

This is the expected behavior. See the documentation here https://storybook.js.org/docs/api/doc-block-source#type

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants