Skip to content

fix(storybook): align Repeatable Rows labels with Field Anatomy - #1413

Merged
dbacomputer merged 1 commit into
mainfrom
fix/repeatable-rows-label-alignment
Oct 19, 2026
Merged

dbacomputer merged 1 commit into
mainfrom
fix/repeatable-rows-label-alignment

Conversation

@dbacomputer

@dbacomputer dbacomputer commented Oct 19, 2026 •

Copy link
Copy Markdown
Collaborator
Screenshot 2026-10-19 at 9 26 42 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.

  • Plain and column labels use FormFieldLabel. They now match Field Anatomy, Field Help, and Field Validation: medium weight, foreground color, 6px label-to-control gap.
  • FormFieldHeader is kept only where the label row has a badge or actions ("Headers 2/20", "total").
  • Column labels and their row list share one FormField, so the first row sits 6px below its label like any other field.
  • The "Visible labels" copy now follows the Field Anatomy rule. Also fixes a missing space before FormField.

Only this page uses the changed helper files (repeatable-row-primitives.tsx, repeatable-rows-panels.tsx).

Test plan

  • Measured every label on the page in the browser: one style (500, foreground, 6px gap), matching the other Forms guidance pages
  • Column labels sit directly over their controls
  • Biome check passes; no type errors in the changed files

🤖 Generated with Claude Code

Copilot AI balanced review requested due to automatic review settings October 19, 2026 16:27
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 19, 2026 16:27 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 19, 2026 16:27 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 19, 2026 16:27 Destroyed
@github-actions github-actions Bot added app:storybook size:L 100-499 changed lines. labels Oct 19, 2026
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 19, 2026 16:27 Destroyed
@github-actions

Copy link
Copy Markdown
Contributor

Dependency License Review

  • ✅ 1947 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1713
ISC 91
Apache-2.0 56
BSD-3-Clause 28
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.3.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 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 FormFieldLabel for 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

Comment thread apps/storybook/src/patterns/repeatable-row-primitives.tsx
@github-actions

github-actions Bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

📊 Coverage + size by package

Per-package bundle size on this PR (no JS/TS source changes detected under packages/* or web-packages/*).

Package Coverage New-line coverage Packed (gzip) Unpacked vs main
@uipath/apollo-core — — 42.02 MB 50.17 MB ±0
@uipath/apollo-react — — 8.01 MB 31.60 MB ±0
@uipath/apollo-ui-icons — — 2.86 MB 6.97 MB ±0
@uipath/apollo-vertex — — — — —
@uipath/apollo-wind — — 785.1 KB 4.55 MB −29 B
@uipath/ap-chat — — 40.37 MB 45.58 MB ±0

"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.

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>
Copilot AI balanced review requested due to automatic review settings October 19, 2026 16:36
@dbacomputer
dbacomputer force-pushed the fix/repeatable-rows-label-alignment branch from f06711f to 8c330f4 Compare October 19, 2026 16:36
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 19, 2026 16:37 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 19, 2026 16:37 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 19, 2026 16:37 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 19, 2026 16:37 Destroyed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The scoped Storybook changes preserve accessible naming and focus behavior, with no unresolved findings.

No open issues 🎉

1 resolved since last review

Review effort: Balanced

@dbacomputer
dbacomputer enabled auto-merge (rebase) October 19, 2026 16:44
@github-actions

github-actions Bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

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

@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 19, 2026 16:48 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 19, 2026 16:48 Destroyed
@dbacomputer
dbacomputer merged commit c783914 into main Oct 19, 2026
46 of 48 checks passed
@dbacomputer
dbacomputer deleted the fix/repeatable-rows-label-alignment branch October 19, 2026 17:13

This branch was successfully deployed

No deployments
preview/apollo-docs — 8c330f46 Deployed Oct 19, 2026 by github-actions[bot]
preview/apollo-design — 8c330f46 Deployed Oct 19, 2026 by github-actions[bot]
preview/apollo-vertex — 8c330f46 Deployed Oct 19, 2026 by github-actions[bot]
preview/apollo-landing — 8c330f46 Deployed Oct 19, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app:storybook size:L 100-499 changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants