You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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):
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.
The text was updated successfully, but these errors were encountered:
Describe the bug
When using the conditional-controls feature in connection with a mapped
options
-controlledarg
, 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 achildren
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):
The table correlates the possible conditions with the control table's state for the
children
andsize
props of the Button component. It shows these findings:eq
/neq
yields bad results across the board when mapping is usedchildren
is set toundefined
(the default), all conditions yield out-of-sync resultsThe 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 theargTypes
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.
The text was updated successfully, but these errors were encountered: