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

Knobs from other stories appearing on inappropriate stories #10590

Closed
IntusFacultas opened this issue Apr 29, 2020 · 9 comments
Closed

Knobs from other stories appearing on inappropriate stories #10590

IntusFacultas opened this issue Apr 29, 2020 · 9 comments

Comments

@IntusFacultas
Copy link

Description:

When using the Knobs addon, knobs from other stories occasionally appear in inappropriate stories until you click "Reset" at which point they disappear.

Reference: #1869

Reproduction:

In my case, a very specific set of knobs are the ones that reappear. Specifically:
Steps to reproduce the behavior:

  1. Create a story for some component and add the following Props
const propData = {
  transitions: {
    default: object("Transitions", [
      {
        transitionId: 1,
        originState: {
          stateId: 1,
          stateName: "Start",
          stateDescription: "Start state",
          stateType: "START"
        },
        destinationState: {
          stateId: 2,
          stateName: "Task 1",
          stateDescription: "Do something",
          stateType: "TASK"
        }
      },
      {
        transitionId: 2,
        originState: {
          stateId: 1,
          stateName: "Start",
          stateDescription: "Start state",
          stateType: "START"
        },
        destinationState: {
          stateId: 3,
          stateName: "Task Cancelled",
          stateDescription: "Don't do something",
          stateType: "CANCEL"
        }
      },
      {
        transitionId: 3,
        originState: {
          stateId: 1,
          stateName: "Start",
          stateDescription: "Start state",
          stateType: "START"
        },
        destinationState: {
          stateId: 4,
          stateName: "Rework",
          stateDescription: "Do something again",
          stateType: "REWORK"
        }
      },
      {
        transitionId: 4,
        originState: {
          stateId: 1,
          stateName: "Start",
          stateDescription: "Start state",
          stateType: "START"
        },
        destinationState: {
          stateId: 5,
          stateName: "Complete Task",
          stateDescription: "Done something",
          stateType: "COMPLETE"
        }
      }
    ])
  },
  instanceId: {
    default: text("Instance ID", instanceID)
  },
  workflowUrl: {
    default: text("Workflow URL", baseURL)
  },
  workflowId: {
    default: text("Workflow ID", workflowID)
  },
  textFlavor: {
    default: text("Flavor", "")
  }
};
  1. Define another story with different props
  2. Run storybook and view the second story
  3. See error

Expected Behavior:
The appropriate knobs should appear without the additional knobs showing up.

Screenshots
Here is the bug appearing:
image

Here is after pressing reset on the same story:
image

Code snippets
This is the source code for the above story:

export const Alert = () => ({
  components: { VueStaticAlert },
  props: {
    flavor: {
      default: text("Flavor", ""),
    },
    animated: {
      default: boolean("Animated", false),
    },
    closeable: {
      default: boolean("Closeable", false),
    },
  },
  template: `
        <div>
          <vue-static-alert :flavor="flavor" :animated="animated" :closeable="closeable"><span>Test</span></vue-static-alert>
          <hr>
          Available Flavors:
          <ul>
            <li>success</li>
            <li>warning</li>
            <li>info</li>
            <li>danger</li>
          </ul>
        </div>
    `,
});

System:

Environment Info:

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz    
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\Documents\Work\Storybook\node_modules\.bin\yarn.CMD
    npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @storybook/addon-a11y: ^5.3.18 => 5.3.18 
    @storybook/addon-actions: ^5.3.18 => 5.3.18 
    @storybook/addon-console: ^1.2.1 => 1.2.1 
    @storybook/addon-knobs: ^5.3.18 => 5.3.18 
    @storybook/addon-notes: ^5.3.18 => 5.3.18 
    @storybook/addon-storysource: ^5.3.18 => 5.3.18 
    @storybook/addon-viewport: ^5.3.18 => 5.3.18 
    @storybook/vue: ^5.3.18 => 5.3.18 
@stale
Copy link

stale bot commented May 22, 2020

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!

@stale stale bot added the inactive label May 22, 2020
@IntusFacultas
Copy link
Author

Hi just bumping this since its still an issue.

@stale stale bot removed the inactive label May 27, 2020
@shilman
Copy link
Member

shilman commented May 28, 2020

Hi gang, We’ve just released addon-controls in 6.0-beta!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

@shilman
Copy link
Member

shilman commented Jun 1, 2020

For anybody who is interested in Controls but don't know where to start, I've created a quick & dirty step-by-step walkthrough to go from a fresh CRA project to a working demo. Check it out:

=> Storybook Controls w/ CRA & TypeScript

There are also some "knobs to controls" migration docs in the Controls README:

=> How do I migrate from addon-knobs?

@IntusFacultas
Copy link
Author

Thank you! I'll integrate this ASAP.

@stale
Copy link

stale bot commented Jun 23, 2020

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!

@stale stale bot added the inactive label Jun 23, 2020
@stale
Copy link

stale bot commented Jul 25, 2020

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!

@stale stale bot closed this as completed Jul 25, 2020
@madebycaliper
Copy link

@IntusFacultas I'm having the same exact issue. While the upcoming release of args in v6.x is cool, I'm using 5.3 and would like this to work without updating. What can I do?

@YaronMiro
Copy link

I also encountered this bug when knobs are not cleared between stories, if using the @storybook/react up to version 6.3.13 it works as expected but higher versions are not. At least there is a possibility to upgrade from version 5 to 6 but not the latest version 6.x if intending to use knobs.

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

4 participants