storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.4k stars 9.28k forks source link

react: Apostrophes in strings are rendered incorrectly #9589

Closed mfulton26 closed 4 years ago

mfulton26 commented 4 years ago

Describe the bug Apostrophes are rendered as ' instead of as '.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://storybooks-official.netlify.com/?path=/story/addons-knobs-withknobs--tweaks-static-values
  2. Click on Knobs
  3. Change Name from "Storyteller" to "Mc'Storyteller"
  4. See error rendered on the Canvas: My name is Mc'Storyteller

Expected behavior Canvas should be rendered with My name is Mc'Storyteller

Code snippets Any string used in JSX containing an apostrophe will be rendered incorrectly.

e.g.

render() {
  const string = "I'm wrong";
  return <>{string}</>;
}

System:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.14.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 70.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.2.8 => 5.2.8 
    @storybook/addon-knobs: ^5.2.8 => 5.2.8 
    @storybook/react: ^5.2.8 => 5.2.8 

Additional context

Apostrophes in JSX text nodes will render correctly (from what I've seen so far):

render() {
  return <>I'm right</>;
}

So this issue might only apply to strings that are used within JSX elements (and not to JSX text nodes directly).

stale[bot] commented 4 years ago

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!

joey80 commented 4 years ago

I'm experiencing this issue with Vue as well

stale[bot] commented 4 years ago

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[bot] commented 4 years ago

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!

cellog commented 4 years ago

This is still happening, is there any reason it's been ignored or just inertia?

shilman commented 4 years ago

@cellog we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

PRs on addon-knobs still welcomed