Storybook: Text knob transforms characters

Created on 16 Oct 2018  路  6Comments  路  Source: storybookjs/storybook

knob issue

Bug or support request summary

With storybook and knobs release candidate 4, I have the ' string misformated as in the image.

Steps to reproduce

Configure a text knob with text like You're great!, it will be displayed as You're great!.

Minimal repository reproducing the bug

Please specify which version of Storybook and optionally any affected addons that you're running

  • @storybook/react 4.0.0-rc.0
  • @storybook/addon-knobs 4.0.0-rc.0

Affected platforms

Saw it on Chrome and Firefox

Screenshots / Screencast / Code Snippets (Optional)

import { withKnobs, text } from '@storybook/addon-knobs';

import Title from '../Title';

storiesOf('Knobs', module)
  .addDecorator(withKnobs)
  .add('Title', () => <Title text={text('text', "You're great!")} />);
knobs bug

Most helpful comment

This can be applied globally by passing it to the decorator setup.

addDecorator(
  withKnobs({
    escapeHTML: false,
  })
);

All 6 comments

I found the same behavior on object knob props on alpha.16

Is there a workaround for this?

Knobs are using https://github.com/component/escape-html package to escapes ", ', &, <, and >.

To prevent escaping you can use it like this:

storiesOf(...)
  .add('name', () => {}, {
    knobs: {
      escapeHTML: false
    }
  })

This can be applied globally by passing it to the decorator setup.

addDecorator(
  withKnobs({
    escapeHTML: false,
  })
);

Using 4.1.11 across the board, only @igor-dv 's answer worked:

storiesOf(...)
  .add('name', () => {}, {
    knobs: {
      escapeHTML: false
    }
  })

This is in a Vue project where the knobs are being included directly in the components. It would be cleaner if escapeHtml was an option on text knobs - this way the logic will reside with the knob in the component. Please consider exposing this option.

fwiw, with the new exported story format, it goes under parameters:

export default {
  title: 'Base Component',
  component: { BaseComponent },
  decorators: [withKnobs],
  parameters: {
    knobs: {
      escapeHTML: false,
    },
  },
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rpersaud picture rpersaud  路  3Comments

oriSomething picture oriSomething  路  3Comments

MrOrz picture MrOrz  路  3Comments

purplecones picture purplecones  路  3Comments

wahengchang picture wahengchang  路  3Comments