Storybook: La démarque de l'addon d'informations avec le code en ligne (backtick `) est cassée

Créé le 15 août 2017 · 3Commentaires · Source: storybookjs/storybook

Versions

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

Exemple d'entrée

Cette entrée dans l'exemple officiel

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

Notez que le propTypes est entouré de backticks.

Production attendue

Le mot propTypes est affiché en police à espacement fixe, à côté de la phrase à laquelle il appartient.

Sortie courant

Le mot propTypes devient un élément <pre><code></code></pre> vide, comme illustré ci-dessous.

Screenshot

Cause présumée

Le composant par défaut pour backtick est <Code> , qui est implémenté sous la forme <code> intérieur de <pre> , qui est un élément de bloc qui divise la phrase en deux.
<Code> rend le texte de this.props.code , mais le texte réel est en this.props.children .

info bug

Source

MrOrz

Commentaire le plus utile

Ressemble à code utilisé pour les sections de code en ligne et de bloc.
Pour le code en ligne, il devrait rendre props.children mais pour le bloc de code props.code

UsulPro le 20 août 2017

👍2

Tous les 3 commentaires

@MrOrz J'ai également rencontré ce problème et je vais le résoudre dans ce PR #1501

Merci pour l'aide!

UsulPro le 15 août 2017

🎉1

C'est super d'entendre ça !

Je peux simplement écraser marksyConf pour contourner ce problème, alors ne vous pressez pas pour le PR, prenez votre temps ;)

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 le 20 août 2017

Ressemble à code utilisé pour les sections de code en ligne et de bloc.
Pour le code en ligne, il devrait rendre props.children mais pour le bloc de code props.code

UsulPro le 20 août 2017

👍2

Cette page vous a été utile?

0 / 5 - 0 notes