Storybook: L'interface utilisateur de l'objet Knobs disparaît lors de la modification des valeurs

Créé le 25 févr. 2020 · 2Commentaires · Source: storybookjs/storybook

Décrivez le bogue

Lors de la modification des valeurs d'un object rendu via @storybook/addon-knobs , l'interface utilisateur disparaît.

Reproduire

Créez un object utilisant des boutons addon
npm run storybook
Modifiez les valeurs object dans l'onglet Boutons de Storybook
Notez que le object disparaît

Comportement prévisible

Les valeurs object doivent être modifiables à partir de l'interface utilisateur de Storybook sans que le bouton ne disparaisse.

Captures d'écran

storybook-knobs-object-bug

Extraits de code

Exemple de travail ici: https://github.com/benjarwar/storybook-knobs-object-test

Cloner le repo
npm i
npm run storybook

Système:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v8.15.1/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v8.15.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.14 => 5.3.14 
    @storybook/addon-knobs: ^5.3.14 => 5.3.14 
    @storybook/addon-links: ^5.3.14 => 5.3.14 
    @storybook/addons: ^5.3.14 => 5.3.14 
    @storybook/react: ^5.3.14 => 5.3.14

knobs question / support

Source

benjarwar

👍1

Commentaire le plus utile

Le problème ici est que vous ne créez pas le bouton d'objet dans la fonction d'histoire. Si vous changez votre exemple en quelque chose comme ça, vous devriez être prêt:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer le 26 févr. 2020

👍5

Tous les 2 commentaires

Le problème ici est que vous ne créez pas le bouton d'objet dans la fonction d'histoire. Si vous changez votre exemple en quelque chose comme ça, vous devriez être prêt:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer le 26 févr. 2020

👍5

Ah, merci @jonspalmer. Cela a effectivement fait l'affaire et a du sens.

benjarwar le 26 févr. 2020

Cette page vous a été utile?

0 / 5 - 0 notes