Storybook: Info addon markdown with inline code (backtick `) is broken

Created on 15 Aug 2017 · 3Comments · Source: storybookjs/storybook

Versions

@storybook/react v3.2.4
@storybook/addon-info v3.2.4

Example input

This entry in the official example

storiesOf('Button').addWithInfo(
  'simple usage (custom propTables)',
  `
      This is the basic usage with the button with providing a label to show the text.
      Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
      So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
      ~~~js
      storiesOf('Button')
        .addWithInfo(
          'simple usage (custom propTables)',
          <info>,
          <storyFn>,
          { inline: true, propTables: [Button]}
        );
      ~~~
    `,
  () => (
    <div>
      <Button label="The Button" onClick={action('onClick')} />
      <br />
    </div>
  ),
  { inline: true, propTables: [Button] }
);

Notice the propTypes is enclosed in backticks.

Expected output

The word propTypes is shown in monospaced font, alongside with the sentence it belongs to.

Current output

The word propTypes becomes an empty <pre><code></code></pre> element, as shown below.

Screenshot

Suspected cause

The default component for backtick is <Code>, which is implemented as <code> inside <pre>, which is a block element that breaks the sentence into two.
<Code> renders text from this.props.code, but the actual text is in this.props.children.

info bug

Source

MrOrz

Most helpful comment

Looks like code used for both inline and block code sections.
For inline code it should render props.children but for code block props.code

UsulPro on 20 Aug 2017

👍2

All 3 comments

@MrOrz I faced this issue as well and going to fix it in this PR #1501

Thanks for the help!

UsulPro on 15 Aug 2017

🎉1

It's great hearing that!

I can just overwrite marksyConf to workaround this issue, so no hurries on the PR, take your time ;)

ex:


import React from 'react';
import { configure } from '@storybook/react';
import { setDefaults } from '@storybook/addon-info';

function Code({ children }) {
  return <code>{children}</code>;
}

function loadStories() {/* loading stories here */}

setDefaults({ marksyConf: { code: Code } });
configure(loadStories, module);

MrOrz on 20 Aug 2017

Looks like code used for both inline and block code sections.
For inline code it should render props.children but for code block props.code

UsulPro on 20 Aug 2017

👍2

Was this page helpful?

0 / 5 - 0 ratings