Form layout—Components (HDS-4885) #2898

KristinLBradley · 2025-05-22T22:31:47Z

📌 Summary

If merged, this PR adds Form layout components to HDS.

👉 Showcase: https://hds-showcase-git-kristin-hds-4885-form-layout-d00037-hashicorp.vercel.app/components/form/layout

🛠️ Detailed description

Changes:

Reorganized Showcase links on home page to create new "section" for Form-related components: https://hds-showcase-git-kristin-hds-4885-form-layout-d00037-hashicorp.vercel.app/
- Please let me know your opinions on this change.
Created Form component with @tag prop.
Created FormHeader component with @hasMaxWidth prop
Created FormHeaderTitle component with @tag & @size props
Created FormHeaderDescription component.
Created FormSection component with @hasMaxWidth & @hasBorder props
Created FormSectionHeader component
Created FormSectionHeaderTitle component with @tag & @size props
Created FormSectionHeaderDescription component.
Created FormSectionFieldGroup component based off Layout::Flex component which exposes @direction prop & includes responsive behavior to stack Fields at screen width below 768px
Created FormSeparator component with @hasMaxWidth prop
Created Showcase page for Form layout components

Component structure in use:

Form
- FormHeader
  - FormHeaderTitle
  - FormHeaderDescription
- FormSection
  - FormSectionHeader
    - FormSectionHeaderTitle
    - FormSectionHeaderDescription
  - Form Fields such as TextInput::Field (pre-existing)
  - FieldGroup (lay out related groups of inputs in a row or stacked)
    - Form Fields such as TextInput::Field (pre-existing)
- FormSeparator (extra visual separation between Sections)
- ButtonSet (pre-existing, can be wrapped in Section to control max-width)

How widths work:

For Form Sections & similar:

If @isFullWidth="false" (the default) FormSection will expand to a max of 700px
If @isFullWidth="true" FormSection & similar will expand to 100% of available width
It will be possible for consumers to set a custom max-width value if they write their own CSS style. (The components don't directly support this on their own.)

For Field Groups:

For non-wrappping rows/groups, inputs will be laid out in equal width columns by default (halves, thirds, etc.)
Custom widths can be set specifically for each input element using an optional Item container.
Inputs/Fields will stack when screen width is below 768px (the "md" breakpoint)

🔗 External links

Jira ticket: HDS-4885
Figma file: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/branch/azcdumnXvCyGfSVfEVZhGH/HDS-Components-v2.0?node-id=83107-2070&p=f&t=CeumEO6vBV6h0IuD-0

👀 Component checklist

Percy was checked for any visual regression
A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

vercel · 2025-05-22T22:31:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jun 20, 2025 10:31pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jun 20, 2025 10:31pm

packages/components/src/styles/components/form/layout.scss

packages/components/src/components/hds/form/field-group/index.hbs

alex-ju · 2025-06-19T10:46:17Z

@KristinLBradley This PR seems close to being merged to main, but I suggest we hold from merging it while conducting product testing as we may discover something (and also until we release a fix for the recently surfaced Modal issue).

…e for tool-versions

.changeset/afraid-hornets-lie.md

shleewhite

Nothing blocking! Just a few small comments.

packages/components/src/components/hds/form/index.ts

showcase/app/components/mock/app/main/generic-form/partials/account-signup.gts

shleewhite · 2025-06-20T16:43:18Z

showcase/app/components/mock/app/main/generic-form/partials/account-signup.gts

+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';


Suggestion: not sure if this is out of scope, but could any of these more "real" examples have validation?

That seems likely a bit out of scope as these are meant to demonstrate layouts.

shleewhite · 2025-06-20T16:49:06Z

showcase/app/components/mock/app/main/generic-form/partials/actions.gts

+const MockAppMainGenericFormPartialsActions: TemplateOnlyComponent<MockAppMainGenericFormPartialsActionsSignature> =
+  <template>
+    {{#if @extraText}}
+      <HdsLayoutFlex @gap="24" @align="center" ...attributes>


Question: should this use the Hds::Form::Footer component?

@didoo what do you think? This example seemed too custom to me, so I left it as is when I was adding the Form::Footer.

showcase/app/components/mock/app/main/generic-form/partials/add-policy.gts

showcase/app/components/mock/app/main/generic-form/partials/add-user.gts

shleewhite · 2025-06-20T16:54:00Z

showcase/app/controllers/components/form/frameless/demo-form-complex.js

+  form: 'custom width / form',
+  'header+section': 'custom width / header+section',
+  section: 'custom width / section',
+  // TODO!


Should this be done? or is it for a follow up ticket?

@didoo What do you think? We don't have a real option for a custom width applied to just a single Form::Section.

shleewhite · 2025-06-20T16:59:27Z

showcase/app/templates/components/form/frameless/demo-form-complex.hbs

+        Custom width set via local CSS class only at section level (not at header/separator)
+      {{else if (eq this.customWidthMode "section")}}
+        Custom width set via local CSS class only at section level (not at header/separator)
+        {{! TODO! }}


note: Theres still a couple todos in this file

@didoo Do you think these TODOs here are really necessary?

Co-authored-by: Dylan Hyun <[email protected]>

Co-authored-by: Lee White <[email protected]>

hashibot-hds added packages/components showcase labels May 22, 2025

KristinLBradley force-pushed the kristin/hds-4885-form-layout-components branch from f52c81e to 1cc5dd1 Compare May 27, 2025 15:59

vercel bot deployed to Preview – hds-showcase May 27, 2025 16:00 View deployment

vercel bot deployed to Preview – hds-website May 27, 2025 16:03 View deployment

vercel bot deployed to Preview – hds-showcase May 27, 2025 22:55 View deployment

vercel bot deployed to Preview – hds-website May 27, 2025 22:58 View deployment

vercel bot deployed to Preview – hds-showcase May 27, 2025 23:55 View deployment

vercel bot deployed to Preview – hds-website May 27, 2025 23:58 View deployment

vercel bot deployed to Preview – hds-showcase May 28, 2025 15:40 View deployment

vercel bot deployed to Preview – hds-website May 28, 2025 15:42 View deployment

KristinLBradley force-pushed the kristin/hds-4885-form-layout-components branch from c4ccb5d to dcc2031 Compare May 28, 2025 17:00

vercel bot deployed to Preview – hds-showcase May 28, 2025 17:01 View deployment

vercel bot deployed to Preview – hds-website May 28, 2025 17:04 View deployment

vercel bot deployed to Preview – hds-showcase May 28, 2025 18:08 View deployment

vercel bot deployed to Preview – hds-website May 28, 2025 18:10 View deployment

vercel bot deployed to Preview – hds-showcase May 28, 2025 21:41 View deployment

vercel bot deployed to Preview – hds-website May 28, 2025 21:43 View deployment

vercel bot deployed to Preview – hds-showcase May 28, 2025 23:36 View deployment

vercel bot deployed to Preview – hds-website May 28, 2025 23:38 View deployment

vercel bot deployed to Preview – hds-showcase May 29, 2025 21:57 View deployment

vercel bot deployed to Preview – hds-website May 29, 2025 21:59 View deployment

KristinLBradley commented May 29, 2025

View reviewed changes

packages/components/src/styles/components/form/layout.scss Outdated Show resolved Hide resolved

vercel bot deployed to Preview – hds-showcase May 29, 2025 22:17 View deployment

vercel bot deployed to Preview – hds-website May 29, 2025 22:20 View deployment

vercel bot deployed to Preview – hds-showcase May 30, 2025 19:00 View deployment

vercel bot deployed to Preview – hds-website May 30, 2025 19:02 View deployment

didoo reviewed May 30, 2025

View reviewed changes

packages/components/src/styles/components/form/layout.scss Outdated Show resolved Hide resolved

didoo reviewed May 30, 2025

View reviewed changes

packages/components/src/components/hds/form/field-group/index.hbs Outdated Show resolved Hide resolved

didoo dismissed their stale review via 79469da June 19, 2025 09:12

small tweaks to the showcase page + fix to an export

df060d0

didoo force-pushed the kristin/hds-4885-form-layout-components branch from 315ca62 to df060d0 Compare June 19, 2025 09:13

vercel bot deployed to Preview – hds-showcase June 19, 2025 09:15 View deployment

vercel bot deployed to Preview – hds-website June 19, 2025 09:20 View deployment

alex-ju added this to the [email protected] milestone Jun 19, 2025

KristinLBradley requested a review from LilithJames-HDS June 19, 2025 20:35

HDS-4885 Fix naming of acceptance test and path to page, add gitignor…

f4d37ed

…e for tool-versions

vercel bot deployed to Preview – hds-showcase June 19, 2025 21:57 View deployment

vercel bot deployed to Preview – hds-website June 19, 2025 22:00 View deployment

HDS-4885 Add changeset

3d73270

vercel bot deployed to Preview – hds-showcase June 19, 2025 22:05 View deployment

vercel bot deployed to Preview – hds-website June 19, 2025 22:07 View deployment

KristinLBradley changed the title ~~Form layout components (HDS-4885)~~ Form layout—Components (HDS-4885) Jun 19, 2025

didoo previously approved these changes Jun 20, 2025

View reviewed changes

.changeset/afraid-hornets-lie.md Outdated Show resolved Hide resolved

LilithJames-HDS previously approved these changes Jun 20, 2025

View reviewed changes

shleewhite previously approved these changes Jun 20, 2025

View reviewed changes

Update .changeset/afraid-hornets-lie.md

16c47fa

Co-authored-by: Dylan Hyun <[email protected]>

KristinLBradley dismissed stale reviews from shleewhite, LilithJames-HDS, and didoo via 16c47fa June 20, 2025 21:10

vercel bot deployed to Preview – hds-showcase June 20, 2025 21:12 View deployment

vercel bot deployed to Preview – hds-website June 20, 2025 21:14 View deployment

Apply suggestions from code review

d2b4710

Co-authored-by: Lee White <[email protected]>

vercel bot deployed to Preview – hds-showcase June 20, 2025 21:21 View deployment

vercel bot deployed to Preview – hds-website June 20, 2025 21:24 View deployment

HDS-4885 Use WithBoundArgs in SectionHeaderTitle type

d8db75e

vercel bot deployed to Preview – hds-showcase June 20, 2025 22:28 View deployment

vercel bot deployed to Preview – hds-website June 20, 2025 22:31 View deployment

Form layout—Components (HDS-4885) #2898

Are you sure you want to change the base?

Form layout—Components (HDS-4885) #2898

Uh oh!

Conversation

KristinLBradley commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

Related:

🛠️ Detailed description

Changes:

Component structure in use:

How widths work:

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alex-ju commented Jun 19, 2025

Uh oh!

Uh oh!

shleewhite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KristinLBradley commented May 22, 2025 •

edited

Loading

vercel bot commented May 22, 2025 •

edited

Loading