style(storybook): refine form component stories

src/components/checkbox.stories.tsx

@@ -1,18 +1,48 @@
 import { useId, useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Checkbox, Label } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Current HM Checkbox. ui-viz has no Checkbox spec, so it was reference only.
 // The option label is the HM Label; its foreground role for Checkbox options is still TBD in ui_viz.
 
+// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility
+// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default
+// text color; a Label next to a disabled Checkbox (`peer-disabled`) keeps the secondary color. State titles are untouched.
+const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]"
+
 function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) {
   const id = useId()
   return (
     <div className="flex items-center gap-2">
       {children(id)}
-      <Label htmlFor={id}>{label}</Label>
+      <Label htmlFor={id} className={optionLabel}>{label}</Label>
+    </div>
+  )
+}
+
+// Representative-page layout (Storybook presentation only): 3 equal columns on PC (iframe width 1000px and up), shrinking
+// to fit below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so StateBoard's
+// auto-fill grid cannot leave an empty or stretched track.
+function StateGrid({ states }: { states: BoardState[] }) {
+  return (
+    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))] min-[1000px]:grid-cols-3">
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
+// The wrapping Long Label example (former Usage section of the representative page), also used by the hidden `LongLabel` Story.
+function LongLabelExample() {
+  return (
+    <div className="max-w-[220px]">
+      <div className="flex items-start gap-2">
+        <Checkbox id="cb-long" className="mt-0.5" />
+        <Label htmlFor="cb-long" className={optionLabel}>A very long checkbox label that wraps onto multiple lines</Label>
+      </div>
     </div>
   )
 }
@@ -49,20 +79,12 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Checkbox" />
-      <StorySection title="Overview">
-        <StateBoard
-          min={240}
+      <StorySection title="States">
+        <StateGrid
           states={[
             { id: "unchecked", label: "Unchecked", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
             { id: "checked", label: "Checked", children: <Option label="Option">{(id) => <Checkbox id={id} defaultChecked />}</Option> },
             { id: "indeterminate", label: "Indeterminate", children: <Controlled /> },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="States">
-        <StateBoard
-          min={240}
-          states={[
             {
               id: "hover",
               label: "Hover",
@@ -89,26 +111,7 @@ export const All: Story = {
         />
       </StorySection>
       <StorySection title="Validation">
-        <StateBoard min={240} states={[{ id: "error", label: "Error", children: <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }]} />
-      </StorySection>
-      <StorySection title="Usage">
-        <StateBoard
-          min={240}
-          states={[
-            {
-              id: "long",
-              label: "Long Label",
-              children: (
-                <div className="max-w-[220px]">
-                  <div className="flex items-start gap-2">
-                    <Checkbox id="cb-long" className="mt-0.5" />
-                    <Label htmlFor="cb-long">A very long checkbox label that wraps onto multiple lines</Label>
-                  </div>
-                </div>
-              ),
-            },
-          ]}
-        />
+        <StateGrid states={[{ id: "error", label: "Error", children: <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }]} />
       </StorySection>
     </StoryPage>
   ),
@@ -123,6 +126,8 @@ export const Checked: Story = { tags: ["verification"], render: () => <Option la
 export const Indeterminate: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} checked="indeterminate" />}</Option> }
 export const Disabled: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} disabled defaultChecked />}</Option> }
 export const Error: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }
+// Former Usage section of the representative page, kept as its own Story.
+export const LongLabel: Story = { tags: ["verification"], name: "Long Label", render: () => <LongLabelExample /> }
 export const Playground: Story = {
   tags: ["verification"],
   args: { disabled: false, defaultChecked: false },