Storybook: La IU del objeto de las perillas desaparece al cambiar los valores

Creado en 25 feb. 2020 · 2Comentarios · Fuente: storybookjs/storybook

Describe el error

Al cambiar los valores de un object renderizado a través de @storybook/addon-knobs , la interfaz de usuario desaparece.

Reproducir

Crea un object usando addon-knobs
npm run storybook
Cambie los valores object en la pestaña de controles de Storybook
Tenga en cuenta que object desaparece

Comportamiento esperado

Los valores de object deben poder editarse desde la interfaz de usuario de Storybook sin que desaparezca la perilla.

Capturas de pantalla

storybook-knobs-object-bug

Fragmentos de código

Ejemplo de trabajo aquí: https://github.com/benjarwar/storybook-knobs-object-test

Clonar el repositorio
npm i
npm run storybook

Sistema:

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

Fuente

benjarwar

👍1

Comentario más útil

El problema aquí es que no está creando la perilla de objeto dentro de la función de historia. Si cambia su ejemplo a algo como esto, debería estar todo listo:

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 en 26 feb. 2020

👍5

Todos 2 comentarios

El problema aquí es que no está creando la perilla de objeto dentro de la función de historia. Si cambia su ejemplo a algo como esto, debería estar todo listo:

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 en 26 feb. 2020

👍5

Ah, gracias @jonspalmer. Eso de hecho funcionó y tiene sentido.

benjarwar en 26 feb. 2020

¿Fue útil esta página

0 / 5 - 0 calificaciones