MDX/Layout/FlowRoot

Default

content

import type { FunctionComponent, ComponentChildren } from 'preact'; interface FlowRootProps { children: ComponentChildren; } export const FlowRoot: FunctionComponent<FlowRootProps> = ({ children }) => { return <div className="flow-root">{children}</div>; };

Story Source

import { FlowRoot } from './flow-root';
import type { ControlsMap } from '../../../sub-packages/styleguide/src/data/control-types';

/**
 * FlowRoot Component
 *
 * A utility wrapper that creates a new block formatting context.
 * Used to contain floated elements within their parent container.
 * Features:
 * - Applies CSS `flow-root` display property
 * - Prevents float overflow issues
 * - Used with floated images in MDX articles
 */
export const meta = {
  title: 'MDX/Layout/FlowRoot',
};

export const controls: ControlsMap = {
  content: {
    type: 'text',
    default:
      'このテキストはフロートされた要素の横に配置されます。FlowRootコンポーネントは新しいブロックフォーマティングコンテキストを作成し、フロートされた要素を適切に含みます。',
  },
};

/**
 * Default - Contains floated content
 */
export const Default = {
  args: {
    content:
      'このテキストはフロートされた要素の横に配置されます。FlowRootコンポーネントは新しいブロックフォーマティングコンテキストを作成し、フロートされた要素を適切に含みます。',
  },
  render: ({ content }: { content: string }) => (
    <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 = () => (
  <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 = () => (
  <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>
);