style(storybook): refine form component stories

src/components/label.stories.tsx

@@ -1,11 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Input, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } 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"
 
 // Label has no standalone ui_viz spec. Its typography and color are the Field Label role owned by Input / Textarea
 // (14/20/500, color.fg.secondary). Required star and messages are composed here as a consumer would (not part of Label).
 
+// 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. The Disabled example keeps the
+// shared secondary color (at 0.5 through `peer-disabled`). State titles are untouched.
+const fieldLabel = "[--hm-label-text:var(--foreground)]"
+
+// Representative-page layout (Storybook presentation only): 3 equal columns on PC (iframe width 1000px and up), shrinking to
+// fit below that (240px minimum). 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. A section with fewer than 3 specimens keeps the
+// same column width and leaves the remaining tracks empty.
+function SpecimenGrid({ states }: { states: BoardState[] }) {
+  return (
+    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
 const meta = {
   title: "Components/Form/Label",
   component: Label,
@@ -28,25 +47,19 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Label" />
-      <StorySection title="Overview">
-        <StateBoard
+      <StorySection title="States">
+        <SpecimenGrid
           states={[
             {
               id: "default",
               label: "Default",
               children: (
                 <div className="grid max-w-sm gap-2">
-                  <Label htmlFor="label-default">Project name</Label>
+                  <Label htmlFor="label-default" className={fieldLabel}>Project name</Label>
                   <Input id="label-default" size="medium" placeholder="Enter a project name" />
                 </div>
               ),
             },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="States">
-        <StateBoard
-          states={[
             {
               id: "disabled",
               label: "Disabled",
@@ -63,20 +76,26 @@ export const All: Story = {
         />
       </StorySection>
       <StorySection title="Usage">
-        <div className="mb-4 grid max-w-sm gap-2">
-          <Label htmlFor="label-select">부서 선택</Label>
-          <Select><SelectTrigger id="label-select" size="medium"><SelectValue placeholder="부서를 선택하세요" /></SelectTrigger>
-            <SelectContent><SelectItem value="design">디자인</SelectItem><SelectItem value="engineering">개발</SelectItem></SelectContent>
-          </Select>
-        </div>
-        <StateBoard
+        <SpecimenGrid
           states={[
+            {
+              id: "select",
+              label: "Select",
+              children: (
+                <div className="grid max-w-sm gap-2">
+                  <Label htmlFor="label-select" className={fieldLabel}>부서 선택</Label>
+                  <Select><SelectTrigger id="label-select" size="medium"><SelectValue placeholder="부서를 선택하세요" /></SelectTrigger>
+                    <SelectContent><SelectItem value="design">디자인</SelectItem><SelectItem value="engineering">개발</SelectItem></SelectContent>
+                  </Select>
+                </div>
+              ),
+            },
             {
               id: "required",
               label: "Required",
               children: (
                 <div className="grid max-w-sm gap-2">
-                  <Label htmlFor="label-required">
+                  <Label htmlFor="label-required" className={fieldLabel}>
                     Project name
                     <span aria-hidden="true" className="text-destructive">
                       *
@@ -91,7 +110,7 @@ export const All: Story = {
               label: "Long Label",
               children: (
                 <div className="grid max-w-[220px] gap-2">
-                  <Label htmlFor="label-long">A very long label text that wraps to multiple lines</Label>
+                  <Label htmlFor="label-long" className={fieldLabel}>A very long label text that wraps to multiple lines</Label>
                   <Input id="label-long" size="medium" />
                 </div>
               ),