fix(controls): honor control: false and table.disable argTypes on device - #920
Merged
Conversation
The on-device Controls panel only hid an arg when it was removed by
parameters.controls.include/exclude, because core deletes those argTypes
before they reach the panel. The per-argType forms Storybook documents
for disabling a single control are left in place with a flag instead,
and the panel ignored the flag:
- control: false (normalized by core to control: { disable: true })
- control: { disable: true }
- table: { disable: true }
Since { disable: true } is truthy, the existing Boolean(argType.control)
check let these through and the control rendered as editable.
Move the row filtering into a controlArgTypes helper that checks the
disable flags alongside the existing if-condition handling, and base the
no-controls warning on the filtered rows so a story with every control
hidden shows the warning instead of an empty table.
Add a DisabledControls example story covering each form, a test against
the composed story, and a docs section.
馃 Changeset detectedLatest commit: d9f66a6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue: N/A. Only
parameters.controls.exclude/includecould hide a control on device; the per-argType forms Storybook documents for disabling controls for specific properties were ignored and the control still rendered as editable.What I did
Storybook core handles
include/excludeby deleting the argType in theinferControlsenhancer, so those already worked. The three per-argType forms are left in place with a flag instead, and the panel'sBoolean(argType.control)check passed them through because{ disable: true }is truthy:control: false(core normalizes this tocontrol: { disable: true })control: { disable: true }table: { disable: true }Changes:
controlArgTypes.tsin@storybook/addon-ondevice-controlswith agetControlArgTypeshelper that filters out disabled controls alongside the existingifconditional handling. The on-device panel has no description column, so all three forms hide the row rather than web's "row with a dash" for thecontrolforms.ControlsPanelnow uses the helper and bases the "not configured to handle controls" warning on the filtered rows, so a story with every control hidden shows the warning instead of an empty table.ControlExamples/DisabledControlsstory inexamples/expo-examplecovering each form plusexclude, with a test that composes the story and checks which rows survive.@storybook/addon-ondevice-controls.How to test
pnpm build pnpm --filter expo-example test components/ControlExamples/DisabledControlsThen in the example app open
ControlExamples/DisabledControls:Only Label Editableshould show a singlelabelcontrol. The other four props are still rendered by the component but have no control.All Disabledshould show the "This story is not configured to handle controls" message.ControlExamples/WebCompatibility/Undefinedpreviously showed editable color controls despitecontrol: false; they should now be hidden.Does this need a new example in examples/expo-example? Yes, added
DisabledControls.Does this need an update to the documentation? Yes, added a section to
docs/docs/intro/addons/controls.md.