Storybook: Info-Addon-Markdown mit Inline-Code (Backtick `) ist defekt

Erstellt am 15. Aug. 2017 · 3Kommentare · Quelle: storybookjs/storybook

Versionen

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

Beispieleingabe

Dieser Eintrag im offiziellen Beispiel

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

Beachten Sie, dass propTypes in Backticks eingeschlossen ist.

Erwartete Ausgabe

Das Wort propTypes wird in Monospace-Schrift angezeigt, zusammen mit dem Satz, zu dem es gehört.

Aktueller Output

Das Wort propTypes wird zu einem leeren <pre><code></code></pre> Element, wie unten gezeigt.

Screenshot

Vermutete Ursache

Die Standardkomponente für Backtick ist <Code> , die als <code> innerhalb von <pre> implementiert ist, einem Blockelement, das den Satz in zwei Teile aufteilt.
<Code> rendert Text aus this.props.code , aber der eigentliche Text befindet sich in this.props.children .

info bug

Quelle

MrOrz

Hilfreichster Kommentar

Sieht so aus, als würde code sowohl für Inline- als auch für Blockcode-Abschnitte verwendet.
Für Inline-Code sollte es props.children rendern, aber für Codeblock props.code

UsulPro am 20. Aug. 2017

👍2

Alle 3 Kommentare

@MrOrz Ich hatte auch dieses Problem und werde es in diesem PR #1501 beheben

Danke für die Hilfe!

UsulPro am 15. Aug. 2017

🎉1

Das ist toll zu hören!

Ich kann marksyConf einfach überschreiben, um dieses Problem zu umgehen, also keine Eile mit der PR, nimm dir Zeit ;)

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 am 20. Aug. 2017