Fix: addon panel content is invisible for any addon listed after the interactions panel #19771
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
Addon-panel content is invisible if the addon is listed after the Interactions panel. The addon content is in the DOM but hidden due to a style error. See: #17818
What I did
I removed the
addon-panel
transform style. This code was originally added as a hack to "prevent a bug where the content would be invisible." The original PR is here: #6759I couldn't find any documentation about said bug, and the fix is over 3 years old. @ndelangen do you recall how to recreate that bug? Is it still an issue in modern browsers or with vite-builder? In my testing this transform fix has now become the cause. Removing the style override is the simplest way to resolve the issue.
How to test
To test, simply add any custom addon to Storybook and list is after the Interactions panel. See: #17818
Addon doesn't work:
Addon works when changing the order:
Addon works when disabling transform:
Alternatives
If we need to keep the translate hack, then we should consider adding
height: 100%
to the AddonPanel div style to ensure addons using relative heights will render. This would also be a sufficient fix.Height fix: