Uh oh!
There was an error while loading. Please reload this page.
Render the Logo and Input stories inline again - #2449
Merged
Conversation
Both files disabled inline rendering for reasons that no longer exist, and both trace to the same removed library. Logo's comment names it: html-to-react, which Storybook 6 used to convert story HTML into React elements, dropped CSS custom properties from inline styles -- and Logo sets --logo-align, --logo-justify and --logo-scale that way. Input's comment describes React syncing properties between identical input elements, which only happens if React is managing those nodes, which required the same conversion. html-to-react is gone from node_modules and the lockfile as of #2405, and the Storybook 10 HTML renderer assigns innerHTML with no HTML-to-React step anywhere in @storybook/html or addon-docs. Neither mechanism can apply. Elastic Textarea's iframeHeight goes too: with the story rendering inline there is no iframe to size, and a valid-looking parameter that does nothing is worse than none. Part of #2428
|
✅ Deploy Preview for cloudfour-patterns ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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 freeto 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.
Overview
Two files disabled inline story rendering for reasons that no longer hold, both traceable to the same removed library. This is the documented half of #2428's Part 2 — the other eleven locations either have a reason that still applies or no recorded reason at all, and are left alone.
Logo's comment names the culprit: html-to-react#144. Storybook 6 used that library to convert story HTML into React elements, and it dropped CSS custom properties from inline styles — which is exactly how Logo works, setting
--logo-align,--logo-justifyand--logo-scalevia astyleattribute on the wrapper. Input's comment describes a different symptom, "React syncs all their properties" between identicalinputelements in the same file, but that can only happen if React is managing those DOM nodes, which required the same conversion step.Both mechanisms are gone.
html-to-reactis absent fromnode_modulesand from the lockfile as of #2405, and the Storybook 10 HTML renderer assignsinnerHTML— there is no HTML-to-React step left anywhere in@storybook/htmlor@storybook/addon-docs. Verified against the installed packages rather than inferred from the upgrade.One consequence worth flagging rather than burying: Elastic Textarea's
iframeHeight: '250px'goes too. With the story rendering inline there is no iframe to size, so keeping it would leave exactly the kind of valid-looking-but-inert parameter #2420 removed from Illustrations for the same reason. If a reviewer would rather that story kept its own frame, the fix is to restoreinline: falseon that story alone rather than to keep the height.Screenshots
Testing
Both pages should now render their examples directly in the docs page rather than in scrollable frames. The specific things the old workarounds were protecting:
startand thenend. The logo should visibly move within its box. Then change justify the same way, and set scale to0.5— the logo should shrink. This is the behaviour the old library broke, so if any of these controls do nothing, this PR is wrong.