Project solar/phase 1/forms controls by KristinLBradley · Pull Request #3911 · hashicorp/design-system

KristinLBradley · 2026-06-05T17:05:53Z

WIP

TODO: Go through and create new shared tokens as necessary for Carbon themes to replace hard-coded values. (in progress)

📌 Summary

If merged, this PR adds carbonized Form control components to the carbonization branch.

Previews:

TextInput: Showcase preview (Figma design)
- Status: WIP on latest design & dev feedback rounds
FileInput: Showcase preview (Figma design)
- Status: Ready for design & eng preliminary feedback
Checkbox: Showcase preview (Figma design)
- Status: Ready for design & eng preliminary feedback
Select: Showcase preview (Figma design)
- Status: Ready for design & eng preliminary feedback
Radio: Showcase preview (Figma design)
- Status: Ready for design & eng preliminary feedback
Textarea: Showcase preview (Figma design)
- Status: Ready for design & eng preliminary feedback
MaskedInput: Showcase preview (Figma design)
- Status: Ready for design & eng preliminary feedback
Toggle: Showcase preview (Figma design) (Needs updating?)
- Status: Ready for design & eng preliminary feedback on Showcase examples
SuperSelect: Showcase preview (Figma design)
- Status: Ready for design & eng preliminary feedback
KeyValueInputs: Showcase preview (Figma design)
- Status: Ready for design & eng feedback (Showcase only, no component-specific styles)

🛠️ Detailed description

👀 Component checklist

Percy was checked for any visual regression
~~[ ] A changelog entry was added via [Changesets]~~(https://github.com/changesets/changesets) if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
If applicable, I've worked with GRC to document the impact of any changes to security controls.
Examples of changes to controls include access controls, encryption, logging, etc.
If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

vercel · 2026-06-05T17:05:59Z

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

Project	Deployment	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Jul 18, 2026 2:37am
hds-website	Ready	Preview	Jul 18, 2026 2:37am

…eckbox carbonizatin showcase examples

…s, fix linting issue

…content examples Update focus outline offset for Select carbon themes and consolidate content examples

…d preliminary theming styles for Radio

…round sizing, add hover background colors

…me styles

…styles

…me styles, fix mis-matched values in generic control color tokens

…ols, add token for textarea vertical padding

dchyun

Sorry for the pile of comments on showcase pages 😅. A lot of them are small and repetitive. A lot of them are related to the two overarching things I saw

The examples used for the "field" and "group" controls vary across a lot of the pages. some show some example and some show others. We should align on what examples we're showing. Or maybe are these even needed? Since they are mainly layout related and only showing base elements which have their own carbonization page?
In a few pages the disabled/hover state is not shown, and only the default disabled state is shown

dchyun · 2026-07-16T18:43:22Z

        <CodeFragmentWithCharacterCount
          @maxLength={{20}}
          @value="Lorem ipsum dolor sit amet"
          @hasValidation={{true}}


Suggested change

@hasValidation={{false}}

[Issue?] This example has the label "Label + Helper Text + Character count". It doesn't mention anything about the error state, but the examples have the error state. Can this be set to false?

dchyun · 2026-07-16T18:45:43Z

[Question] Should we show an example for required/optional fields or is that captured enough in the base form elements?

dchyun · 2026-07-16T18:48:55Z

[Question] Are we missing an example here for the indicator?

There's already examples of "required" & "optional" indicators for the Label and Legend, is that what you mean?

dchyun · 2026-07-16T19:09:12Z

+
+    <ShwDivider />
+
+    <ShwTextH2>“Field” control</ShwTextH2>


[Suggestion] I've made a few comments around examples to include in the "field layout" sections. I don't have strong opinions on what examples to show but maybe we could have some consistency across the different form elements. It seems right now some show some example and some show others. Idk if it's needed to show all of the ones present in the main showcase pages but maybe we can agree on a standard set to show across all the form pages.

Thanks, we can discuss. I think some of the examples may be excessive/redundant so we could possibly stream-line these.

dchyun · 2026-07-16T19:15:18Z

+
+    <ShwDivider />
+
+    <ShwTextH2>“Group” control</ShwTextH2>


[Suggestion] Should we show a required / optional example?

Refactor and improve styling for TextInput search cancel button Fix TextInput invalid focus border color style

…ted tokens

jorytindall

@KristinLBradley found a few small things, there's a lot here to go through, so I'm still kind of working on the review. Everything is looking really solid though!

jorytindall · 2026-07-17T20:28:25Z

+          "unit": "px",
+          "$modes": {
+            "default": "{border.radius.x-small}",
+            "cds-g0": "2",


This is tricky, The Figma component uses an icon/SVG as visual representation of the checkbox control (different ones for the different states). I thought this border radius should have be 1px (the icon is kind of between 1px and 2px). However, looking at the component in code, 2px is more logical. Just noting here for the record.

I could add a comment in the JSON. Do you think that would be helpful?

jorytindall · 2026-07-17T20:43:29Z

          "unit": "px",
          "$modes": {
            "default": "{typography.body-200.font-size}",
            "cds-g0": "{carbon.typography.label01.font-size}",


Is this for the label? The font-size in the showcase is 12px, but from what I'm seeing in the Carbon component should be 14px.

jorytindall · 2026-07-17T21:15:44Z

The vertical alignment of the caret icon here looks slightly off (slightly more space on the bottom), is this something that can be cleaned up?

…zation showcase examples from feedback

Co-authored-by: Dylan Hyun <dylan.hyun@ibm.com>

…ation Showcase examples

…ues with Select mutiple styles

Regenerate files in output

Co-authored-by: Dylan Hyun <dylan.hyun@ibm.com>

hashibot-hds added packages/components docs-website Updates to the documentation website packages/tokens showcase labels Jun 5, 2026

vercel Bot deployed to Preview – hds-website June 5, 2026 17:07 View deployment

didoo changed the base branch from main to project-solar/phase-1-main-feature-branch June 5, 2026 17:13

vercel Bot deployed to Preview – hds-showcase June 5, 2026 17:15 View deployment

vercel Bot deployed to Preview – hds-website June 5, 2026 17:17 View deployment

didoo force-pushed the project-solar/phase-1-main-feature-branch branch from b0faa01 to 0f7c918 Compare June 5, 2026 17:17

didoo force-pushed the project-solar/phase-1/forms-controls branch from a00c188 to da9e8f6 Compare June 5, 2026 17:25

didoo added the project solar label Jun 5, 2026

hashibot-hds removed the docs-website Updates to the documentation website label Jun 5, 2026

vercel Bot deployed to Preview – hds-showcase June 5, 2026 17:27 View deployment

vercel Bot deployed to Preview – hds-website June 5, 2026 17:29 View deployment

KristinLBradley force-pushed the project-solar/phase-1/forms-controls branch from da9e8f6 to 3fb02ec Compare June 5, 2026 18:05

vercel Bot deployed to Preview – hds-showcase June 5, 2026 18:07 View deployment

vercel Bot deployed to Preview – hds-website June 5, 2026 18:09 View deployment

KristinLBradley force-pushed the project-solar/phase-1/forms-controls branch from 3fb02ec to 13a1c66 Compare June 5, 2026 20:58

vercel Bot deployed to Preview – hds-showcase June 5, 2026 21:00 View deployment

vercel Bot deployed to Preview – hds-website June 5, 2026 21:02 View deployment

KristinLBradley force-pushed the project-solar/phase-1/forms-controls branch from 13a1c66 to 6810bba Compare June 5, 2026 22:50

vercel Bot deployed to Preview – hds-showcase June 5, 2026 22:52 View deployment

vercel Bot deployed to Preview – hds-website June 5, 2026 22:54 View deployment

KristinLBradley force-pushed the project-solar/phase-1/forms-controls branch from 6810bba to a00b351 Compare June 12, 2026 17:55

vercel Bot deployed to Preview – hds-showcase June 12, 2026 17:57 View deployment

vercel Bot deployed to Preview – hds-website June 12, 2026 17:59 View deployment

This comment was marked as duplicate.

Sign in to view

KristinLBradley requested a review from LilithJames-HDS June 12, 2026 22:02

This comment was marked as duplicate.

Sign in to view

KristinLBradley added 18 commits July 6, 2026 17:25

Add tokens and additional carbon theme styles for Checkbox, update Ch…

035300c

…eckbox carbonizatin showcase examples

Add FormSelect carbonization showcase and carbon themes, update token…

6436a24

…s, fix linting issue

Update focus outline offset for Select carbon themes and consolidate …

589f4df

…content examples Update focus outline offset for Select carbon themes and consolidate content examples

Revert order of TextInput types back to previous order

53ba184

Fix missing background image value in FileInput token

d5feabb

Add back missing background image value in FileInput token

a3728b3

Fix incorrect token name for search background

b4048e9

Preliminary carbonization Showcase for FormRadio component

106b8af

Refactor design tokens shared between Checkbox and Radio controls, ad…

efad639

…d preliminary theming styles for Radio

Add new tokens for Radio background colors, fix issues with SVG backg…

9c11c3f

…round sizing, add hover background colors

Add carbonization showcase page for Textarea, add Textarea carbon the…

d92a828

…me styles

Fix alphabetical ordering of Showcase links

f603604

Add MaskedInput Carbonization Showcase and preliminary rough theming …

56e8bf5

…styles

Add preliminary Carbonization Showcase examples for FormToggle

e219cdd

Add new Form Toggle tokens and update existing tokens, add carbon the…

89b6ab6

…me styles, fix mis-matched values in generic control color tokens

Add separate tokens for vertical vs. horizontal padding of form contr…

c6623ca

…ols, add token for textarea vertical padding

Add new form-control-height token for use in setting themed min-height

30dedae

Add form-control-border mixin for setting themed border styles

1d0bca8

dchyun reviewed Jul 16, 2026

View reviewed changes

KristinLBradley added 2 commits July 16, 2026 16:39

Refactor and improve styling for TextInput search cancel button

ea7f255

Refactor and improve styling for TextInput search cancel button Fix TextInput invalid focus border color style

Add SuperSelect carbonization showcase, carbon theme styling and rela…

d18af62

…ted tokens

jorytindall reviewed Jul 17, 2026

View reviewed changes

KristinLBradley and others added 8 commits July 17, 2026 16:32

Add KeyValueInputs Carbonization Showcase

fe3bd7b

Remove @hideThemeLabels from Carbonized Form component Showcases

3287148

Make updates to Form Base Elements, Checkbox, and MaskedInput carboni…

d8fbed6

…zation showcase examples from feedback

Apply suggestions from code review

19c3c2e

Co-authored-by: Dylan Hyun <dylan.hyun@ibm.com>

Add examples of deisabled default vs. disabled hover to Form carboniz…

a65a9a6

…ation Showcase examples

Add Select multiple to carbonization showcase state examples, Fix iss…

3a9ddfb

…ues with Select mutiple styles

Regenerate files in output

86f1f01

Regenerate files in output

Apply suggestions from code review

34afe8c

Co-authored-by: Dylan Hyun <dylan.hyun@ibm.com>

Uh oh!

Conversation

KristinLBradley commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

Previews:

🛠️ Detailed description

Related:

👀 Component checklist

Uh oh!

vercel Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as duplicate.

This comment was marked as duplicate.

dchyun left a comment

Choose a reason for hiding this comment

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jorytindall left a comment

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!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

KristinLBradley commented Jun 5, 2026 •

edited

Loading

vercel Bot commented Jun 5, 2026 •

edited

Loading