Skip to content

FE-850: use ds form field in petrinaut - #9211

Open
alex-e-leon wants to merge 13 commits into
mainfrom
FE-850-use-ds-form-field-in-petrinaut
Open

FE-850: use ds form field in petrinaut#9211
alex-e-leon wants to merge 13 commits into
mainfrom
FE-850-use-ds-form-field-in-petrinaut

Conversation

@alex-e-leon

Copy link
Copy Markdown
Contributor

🌟 What is the purpose of this PR?

  • Switch Petrinaut to use Form.Field, Form.Row and Form.Section components
  • Adds inline layout to Form.Field
  • Adds align prop to HelpTooltip

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

@vercel

vercel Bot commented Aug 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Ready Ready Preview Aug 13, 2026 1:51pm
hashdotdesign-tokens Ready Ready Preview Aug 13, 2026 1:51pm
petrinaut Ready Ready Preview Aug 13, 2026 1:51pm

@cursor

cursor Bot commented Aug 12, 2026

Copy link
Copy Markdown

PR Summary

Medium Risk
Large UI refactor across many Petrinaut panels and publishable ds-components API changes (inline layout, labelActions type); behavior/regression risk is mostly visual and form accessibility rather than backend logic.

Overview
Extends the design-system Form primitives so Petrinaut can use shared labels, errors, and aligned property panels instead of ad hoc Section + manual labels.

Form.Field gains layout="inline" with optional inputAlign (start/end), subgrid-friendly styling when nested in Form.Section, and labelActions as a single node (inline actions sit beside the control). Inline as="legend" fields get aria-labelledby handling so tooltips/actions stay out of the accessible name. Form.Section is new—a three-column grid so adjacent inline fields share label/input tracks.

Smaller DS tweaks: Button.testId, HelpTooltip.align, tooltip open/close animations, and expanded Form Ladle stories (inline, section, TanStack checkbox/radio fields).

Petrinaut replaces custom field chrome across properties panels, DraftFieldInput, and simulate drawers (scenarios, metrics, experiments, optimizations) with Form.Field / Form.Row / Form.Section, routing validation and footer errors through Form.Field.Errors where applicable.

Reviewed by Cursor Bugbot for commit e2c0d23. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions github-actions Bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps > hash.design Affects the `hash.design` design site (app) labels Aug 12, 2026
@alex-e-leon
alex-e-leon force-pushed the FE-850-use-ds-form-field-in-petrinaut branch from f915fea to eb4f182 Compare August 12, 2026 21:34
Comment thread libs/@hashintel/ds-components/src/components/Form/form-field.tsx
Comment thread libs/@hashintel/ds-components/src/components/Form/form-section.recipe.ts Outdated
Comment thread libs/@hashintel/ds-components/src/components/Form/form-field.tsx Outdated

@cursor cursor Bot 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.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 72e9d23. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

1 participant