Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Knobs render improperly using HTML and addon-docs

See original GitHub issue

Describe the bug In an HTML Storybook, when switching to Docs and then back to Canvas, the knobs panel renders all knobs defined in the stories file.

To Reproduce Steps to reproduce the behavior:

Build an MDX file with multiple HTML stories that each use a unique knob
Open Storybook to the Canvas
Navigate to Docs and then back to Canvas
Observe multiple knobs appear

Expected behavior Only the knobs relevant to the selected story should render.

Screenshots

bug

Code snippets

import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import { withKnobs, text } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';

# HTML

<Meta
    title='Components|Alert'
    decorators={[withKnobs({ escapeHTML: false }), withA11y]}
/>

<Preview>
    <Story name='Base'>{`
        <div class="alert" role="alert">${text('Alert text', 'Hello World')}</div>
    `}</Story>
</Preview>

<Preview>
    <Story name='Error'>{`
        <div class="alert alert--error" role="alert">${text('Error text', 'Error')}</div>
    `}</Story>
</Preview>

<Preview>
    <Story name='More text'>{`
        <div class="alert alert--error" role="alert">${text('More text', 'MOAR')}</div>
    `}</Story>
</Preview>

System:

Environment Info

  System:
    OS: macOS Mojave 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.79
    Firefox: 67.0.1
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/addon-docs: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/addon-knobs: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/addon-storysource: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/html: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/react: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/source-loader: ^5.3.0-beta.31 => 5.3.0-beta.31

Additional context This seems like it could relate to #7880 / #7992 but I can’t say for sure.

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:13 (7 by maintainers)

Top GitHub Comments

1reaction

ndelangencommented, Aug 17, 2020

Happy to re-open if requested

1reaction

ndelangencommented, Aug 17, 2020

Is this something we can close then?

I think the goal long term is to deprecate knobs.

Top Results From Across the Web

Knobs Addon | Storybook: Frontend workshop for UI ...

Storybook Addon Knobs allow you to edit props dynamically using the Storybook UI. You can also use Knobs as a dynamic variable inside...

storybook @storybook/addon-options dosent work

Aside: The reason it has to be within a decorator is because the UI of storybook is rendered as part of each story,...

Setup CSF + MDX stories with @storybook/addon-docs - GitLab

Something went wrong while fetching related merge requests.

@storybook/addon-controls | Yarn - Package Manager

NOTE: For Angular users using inline story rendering in addon-docs, this is a breaking prerelease change. See below and apologies for the back...

MIGRATION.md - Storybook - Fossies

React 16.3+; Generic addons; Knobs select ordering; Knobs URL parameters ... In SB6.5, this only happens if you are using addon-docs or addon-controls ......