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

Copied code snippet doesn't reflect properties change #18829

Closed
arybak-dev opened this issue Aug 1, 2022 · 2 comments
Closed

Copied code snippet doesn't reflect properties change #18829

arybak-dev opened this issue Aug 1, 2022 · 2 comments

Comments

@arybak-dev
Copy link

Describe the bug
Since updating storybook from 6.4. to 6.5, we've been facing an issue with the state of copied code snippet for our components. In Docs, once 'Show code' is opened and you try to change some properties in ArgsTable the change is reflected in the code itself, but when you try to use 'Copy' button, it is copying the previous state of a code snippet. To reflect the changes you need to hide and show the code snippet again. To test if this happens not only with our storybook, we generated a brand new CRA project, installed storybook and we ended up with the same problem (tested in generated by default Button story).

Is this behavior related with the Docs framework refactor for React introduced in the storybook 6.5?

To Reproduce

  1. Create React app by running 'npx create-react-app test --template typescript'
  2. Install Storybook by running 'npx sb init --type react'
  3. Run storybook 'npm run storybook'
  4. Open autogenerated Button story -> Docs -> open 'Show code' tab -> change some property in ArgsTable (e.g. primary to false) -> click 'Copy' -> paste somewhere and compare
    (5. To reflect changes hide and show code snippet and copy it again)

System
OS: macOS 12.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 16.15.1 - /usr/local/opt/node@16/bin/node
npm: 8.11.0 - /usr/local/opt/node@16/bin/npm
Browsers:
Chrome: 103.0.5060.134
Safari: 15.5
npmPackages:
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-interactions: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/builder-webpack5: ^6.5.9 => 6.5.9
@storybook/manager-webpack5: ^6.5.9 => 6.5.9
@storybook/react: ^6.5.9 => 6.5.9
@storybook/testing-library: ^0.0.13 => 0.0.13

pocka added a commit that referenced this issue Aug 8, 2022
#18829

Fixed a regression introduced in 5f5cf81.

`highlightableCode` was missing in dependencies array therefore
the copied code snippet was fixed to the first-rendered one.
@beumsk
Copy link

beumsk commented Sep 8, 2022

Hello, I face the exact same issue in Storybook for HTML. Is there any progress on this?

@shilman
Copy link
Member

shilman commented Sep 27, 2022

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.34 containing PR #18888 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Sep 27, 2022
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