Appearance of Boolean controls

[matthias-ccri]

This is a small UX/UI request. It would be nice if boolean controls could be visually improved.

Here is their current appearance:

It's blurred to point out the issue.

Describe the solution you'd like
There are a few UX points here:

1. Visual weight — one side of the control is darker, i.e. "heavier".
2. Toggle position — is it to the left or to the right?
3. Direction — which side is "on": left or right?

For 1, it seems that the visual weight should be on the "switch" part of the toggle, not the "track". Visual weight draws attention, and by 2 we see that the main question is which side the toggle switch is on.

3 is more subjective, but I feel like in a LTR culture, the "on" position should be on the right. If you're holding a physical object with physical switches, the rightward position would be outward, and with real protruding switches, this is an "open" state (think of the petals of a flower that has bloomed). This is an "enabled" or "active" state.

Describe alternatives you've considered
N/A

Are you able to assist to bring the feature to reality?
It depends

Additional context

Some light UX nerd-sniping:

• https://ux.stackexchange.com/questions/113683/two-state-switch-toggle-should-the-on-active-state-be-on-the-left-or-on-th
• https://ux.stackexchange.com/questions/1318/should-a-toggle-button-show-its-current-state-or-the-state-to-which-it-will-chan

[shilman]

I'll let @domyen and @ghengeveld field this one 😄

FWIW, I can totally get on board with flipping false/true order 💯

[domyen]

Agree with flipping the true/false order to false/true. PRs welcome!

Not sure about the visual weight comment, we use explicit text labels to communicate on/off state.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.20 containing PR #14820 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.