Repository navigation
fix(storybook): align Repeatable Rows labels with Field Anatomy - #1413
Conversation
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
🟡 Changes recommended
Stacked-row delete buttons retain the old label-height spacer and become misaligned with their controls.
1 open issue
What changed in this PR
Aligns Repeatable Rows examples with Field Anatomy label styling without changing shared components.
Changes:
- Uses
FormFieldLabelfor plain labels. - Groups column labels and rows to standardize spacing.
- Updates guidance to describe the label pattern.
| File | Description |
|---|---|
| apps/storybook/src/patterns/RepeatableRowsGuidance.stories.tsx | Updates labeling guidance. |
| apps/storybook/src/patterns/repeatable-rows-panels.tsx | Replaces a plain header with a label. |
| apps/storybook/src/patterns/repeatable-row-primitives.tsx | Standardizes labels and column spacing. |
Review effort: Balanced
📊 Coverage + size by packagePer-package bundle size on this PR (no JS/TS source changes detected under
"Coverage" is each package's own |
Labels on the Repeatable Rows Guidance page mixed two styles: muted column and stacked-row labels next to default card and rule labels. - Plain and column labels use FormFieldLabel, matching the Forms pages (medium weight, foreground color, 6px label-to-control gap). - FormFieldHeader only where the label row has a badge or actions. - Column labels and their row list share one FormField, so the first row sits the same distance below its label as any other field. - Guidance copy follows the Field Anatomy rule; fix a missing space. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
f06711f to
8c330f4
Compare
Storybook visual diff⏭️ Skipped: the apollo-design preview deployment did not succeed, so no comparison ran. Logs Updated (PT): Oct 19, 2026, 09:52:34 AM |

Summary
Labels on the Repeatable Rows Guidance page used two styles. Column labels and stacked-row labels (Field, Operator, Value, Name) were muted: regular weight, gray. Card and rule labels (Outcome, Column name, Description) used the default style. Both appeared together in the same rule card.
This PR brings the page in line with the rule Field Anatomy already defines. It doesn't change the Forms docs or the apollo-wind components.
FormFieldLabel. They now match Field Anatomy, Field Help, and Field Validation: medium weight, foreground color, 6px label-to-control gap.FormFieldHeaderis kept only where the label row has a badge or actions ("Headers 2/20", "total").FormField, so the first row sits 6px below its label like any other field.FormField.Only this page uses the changed helper files (
repeatable-row-primitives.tsx,repeatable-rows-panels.tsx).Test plan
🤖 Generated with Claude Code