Storybook: Discussion: data flow from components to knobs.

[shilman]

Issue by kevinSuttle
_Tuesday Oct 11, 2016 at 19:05 GMT_
_Originally opened as https://github.com/storybooks/storybook-addon-knobs/issues/58_

---

Specifically: Controlled vs Uncontrolled

Seems to be the typical one-way, top-down props via knobs down into components.

Repro:

<textArea
          placeholder={text('placeholder', "Don't use placeholder text in place of labels")}
          value={text('value', '')}
          onChange={action('TextArea changed')}
          onFocus={action('TextArea focused')}
          onBlur={action('TextArea un-focused')}
          disabled={boolean('disabled', false)}
        />

Typing in a value won't change the knobs, because this isn't how React works (no two-way binding).

Just wondering if there is a better UX for this.
We tend to use Storybook and knobs to allow our designers to stress test UI components.
This behavior (while not the primary concern of Kadira 😄 ) can be a bit confusing.

Thanks all. Love the work you're doing.

[shilman]

Comment by arunoda
_Wednesday Oct 12, 2016 at 00:13 GMT_

---

How about if we have a way to update the value of knob. So then you can plug that in somehow for the onChange.

[shilman]

Comment by kevinSuttle
_Wednesday Oct 12, 2016 at 02:04 GMT_

---

Ah that makes sense!

[shilman]

Comment by arunoda
_Wednesday Oct 12, 2016 at 02:49 GMT_

---

I'll play with a pattern for this.

[ndelangen]

I'm not sure what to do with this, might re-open this later.

[primetwig]

you could add a method update, so others could use it like this:

import { text, update } from '@storybook/addon-knobs';

<textArea
  placeholder={text('placeholder', "Some placeholder")}
  value={text('value', '')}
  onChange={e => update('value', e.target.value)}
/>