From 6346b90e9b4f0dcb5d168593998bd4f1cc89e5d0 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Mon, 24 Aug 2026 10:52:54 -0700 Subject: [PATCH] Render the Logo and Input stories inline again 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 --- src/components/input/input.stories.js | 5 ----- src/components/logo/logo.stories.js | 7 ------- 2 files changed, 12 deletions(-) diff --git a/src/components/input/input.stories.js b/src/components/input/input.stories.js index c1f2284a0..32e2e5901 100644 --- a/src/components/input/input.stories.js +++ b/src/components/input/input.stories.js @@ -19,13 +19,9 @@ const elasticTextAreaConfig = { class: 'js-elastic-textarea', }; -// Inline stories disabled because when the same input element is rendered with -// different settings within the same file, React syncs all their properties. - /** @type {Meta} */ const meta = { title: 'Components/Input', - parameters: { docs: { story: { inline: false } } }, }; export default meta; @@ -82,7 +78,6 @@ export const ElasticTextarea = { }, parameters: { docs: { - story: { iframeHeight: '250px' }, source: { code: makeTwigInclude( '@cloudfour/components/input/input.twig', diff --git a/src/components/logo/logo.stories.js b/src/components/logo/logo.stories.js index 8a8cad91c..fd4fa1fbf 100644 --- a/src/components/logo/logo.stories.js +++ b/src/components/logo/logo.stories.js @@ -4,16 +4,9 @@ import logoTemplate from './logo.twig'; import './demo/alignment.scss'; const alignOptions = ['start', 'center', 'end']; -// This component's options rely on CSS custom properties, which are currently -// broken in the library we use for inlining Storybook stories. Until that issue -// is resolved, we must fallback to iframes for these stories. 🙈️ -// -// @see https://github.com/aknuds1/html-to-react/issues/144 - /** @type {Meta} */ const meta = { title: 'Components/Logo', - parameters: { docs: { story: { inline: false } } }, }; export default meta;