Storybook: Уценка инфо-аддона со встроенным кодом (обратная ссылка `) не работает

Созданный на 15 авг. 2017 · 3Комментарии · Источник: storybookjs/storybook

Версии

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

Пример ввода

Эта запись в официальном примере

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] }
);

Обратите внимание, что propTypes заключен в обратные кавычки.

Ожидаемый результат

Слово propTypes отображается моноширинным шрифтом вместе с предложением, которому оно принадлежит.

Текущий выход

Слово propTypes становится пустым элементом <pre><code></code></pre> , как показано ниже.

Screenshot

Предполагаемая причина

Компонент по умолчанию для обратной кавычки - <Code> , который реализован как <code> внутри <pre> , который является блочным элементом, который разбивает предложение на два.
<Code> отображает текст из this.props.code , но фактический текст находится в this.props.children .

info bug

Источник

MrOrz

Самый полезный комментарий

Похоже, что code используется как для встроенного, так и для блочного кода.
Для встроенного кода он должен отображать props.children но для блока кода props.code

UsulPro 20 авг. 2017

👍2

Все 3 Комментарий

@MrOrz Я

Спасибо за помощь!

UsulPro 15 авг. 2017

🎉1

Как здорово это слышать!

Я могу просто перезаписать marksyConf чтобы обойти эту проблему, так что не торопитесь с пиаром, не торопитесь;)

бывший:


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 20 авг. 2017