Layout/FlowRoot

Utility wrapper that creates a new block formatting context. Applies CSS `flow-root` display to contain floated elements within their parent container — used with floated images in MDX articles.

Article Layout

Default

Content

Without FlowRoot

With FlowRoot

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for FlowRoot — colocated with its component in the reusable-UI package // (@takazudo-modular/ui-preact) as a wave-2 pilot (epic #1647 / #2044, #2049). import { defineStory } from '@takazudo-modular/ui-preact/story-contract'; import type { StoryMeta } from '@takazudo-modular/ui-preact/story-contract'; import { FlowRoot } from './flow-root'; const meta: StoryMeta = { title: 'Layout/FlowRoot', category: 'Article Layout', description: 'Utility wrapper that creates a new block formatting context. Applies CSS `flow-root` display to contain floated elements within their parent container — used with floated images in MDX articles.', usage: `import { FlowRoot } from '@takazudo-modular/ui-preact/flow-root';\n\n<FlowRoot>\n <img className="float-left" src="..." />\n <p>本文</p>\n</FlowRoot>`, }; export default meta; /** Scene args for the interactive Default variant — `content` drives FlowRoot's children text. */ interface FlowRootArgs { content: string; } /** Default - Contains floated content */ export const Default = defineStory<FlowRootArgs>({ name: 'Default', controls: [ { type: 'text', prop: 'content', label: 'Content', defaultValue: 'このテキストはフロートされた要素の横に配置されます。FlowRootコンポーネントは新しいブロックフォーマティングコンテキストを作成し、フロートされた要素を適切に含みます。', }, ], render: ({ content = 'このテキストはフロートされた要素の横に配置されます。FlowRootコンポーネントは新しいブロックフォーマティングコンテキストを作成し、フロートされた要素を適切に含みます。', } = {}) => ( <FlowRoot> <div className="float-left w-[150px] h-[100px] bg-zd-gray2 mr-hgap-md mb-vgap-sm flex items-center justify-center text-zd-white"> Floated Left </div> <p className="text-zd-white">{content}</p> </FlowRoot> ), }); /** Without FlowRoot (for comparison) */ export const WithoutFlowRoot = defineStory({ name: 'Without FlowRoot', render: () => ( <div className="border border-zd-gray2 p-hgap-sm"> <p className="text-muted text-sm pb-vgap-xs">Without FlowRoot (border shows issue):</p> <div> <div className="float-left w-[100px] h-[80px] bg-zd-gray2 mr-hgap-md flex items-center justify-center text-zd-white text-sm"> Float </div> <p className="text-zd-white text-sm">Short text</p> </div> </div> ), }); /** With FlowRoot (proper containment) */ export const WithFlowRoot = defineStory({ name: 'With FlowRoot', render: () => ( <div className="border border-zd-gray2 p-hgap-sm"> <p className="text-muted text-sm pb-vgap-xs">With FlowRoot (properly contained):</p> <FlowRoot> <div className="float-left w-[100px] h-[80px] bg-zd-gray2 mr-hgap-md flex items-center justify-center text-zd-white text-sm"> Float </div> <p className="text-zd-white text-sm">Short text</p> </FlowRoot> </div> ), });