Core: Hoist 'control.options', validate them in core and introduce 'control.labels'

[ghengeveld]

Issue: #13888

What I did

This gracefully replaces control.options with top-level options on argTypes. Top-level options are validated by the story store rather than the Controls addon. Contrary to control.options, options only accepts an array of primitives. Labels can be customized using control.labels.

argTypes: {
  foo: {
    options: [true, false, 42],
    control: {
      type: 'select',
      labels: {
        true: 'Yes',
        false: 'No'
      }
    }
  }
}

How to test

• Is this testable with Jest or Chromatic screenshots? No
• Does this need a new example in the kitchen sink apps? No
• Does this need an update to the documentation? Yes

If your answer is yes to any of these, please make sure to include it in your PR.

[shilman]

This looks fantastic. We need to update the controls documentation also!

[tmeasday]

Looks great @ghengeveld

[shilman]

Looks great to me, modulo a few minor suggestions.

I'm also wondering whether we should have a link from the controls docs back into MIGRATION.md for existing controls users who read the updated docs and are confused?

@jonniebigodes can you take a look?

[shilman]

is validator documented?

[ghengeveld]

Looks like you didn't document it when you added it.

I think this isn't used anymore, I think I removed it when we introduced the JSON editor.

[shilman]

LOL almost zero memory of this 😭

Per our slack discussion, let's get rid of validators and also use the JSON editor UI for ALL arrays moving forward

[shilman]

Looking great!

[jonniebigodes]

@shilman just did and it looks fantastic. I'm good with it.