Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Controls][Bug] conditional controls break with mapped options #19130

Open
c-vetter opened this issue Sep 7, 2022 · 1 comment
Open

[Controls][Bug] conditional controls break with mapped options #19130

c-vetter opened this issue Sep 7, 2022 · 1 comment

Comments

@c-vetter
Copy link

c-vetter commented Sep 7, 2022

Describe the bug
When using the conditional-controls feature in connection with a mapped options-controlled arg, control display and value assignment are often out of sync.

To Reproduce
Checkout and run https://github.com/c-vetter/repro_storybook_conditional-controls-with-mapped-options

System
Binaries:
Node: 16.15.0
npm: 8.5.5
npmPackages:
@storybook/addon-a11y: ^6.5.9 => 6.5.9
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-interactions: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/react: ^6.5.9 => 6.5.9
@storybook/testing-library: ^0.0.13 => 0.0.13

Additional information
In the repro, I stripped down the Button component to only its original size prop and added a children prop that gets a control with mapped options.

Then, I worked through all the combinations I could think of and came out to this table (generated in the repro based on the actual behavior):
image

The table correlates the possible conditions with the control table's state for the children and size props of the Button component. It shows these findings:

  • falsy values are handled wrong when mapping is used
  • eq/neq yields bad results across the board when mapping is used
  • when children is set to undefined (the default), all conditions yield out-of-sync results

The main issue seems to be that the conditional checks use different data for args and controls.
The controls seem to be checked against the mapping keys, i.e. the values in the options key of the argTypes setting.
The arguments seem to be checked against the mapping values, i.e. the values that the component would actually receive.

I think all the checks should use the mapping keys (= control values), because they will always be strings and therefore easy to check, whereas checking equality with the mapping values requires writing non-primitive values into variables.

@wtfluckey
Copy link

Running into this problem as well. Commenting here so I can follow this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants