feat(#3134): update Form item component for V2 #3139
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
twjeffery
changed the title
bdfranck
requested changes
Oct 24, 2025
| type RequirementType = (typeof REQUIREMENT_TYPES)[number]; | ||
| type LabelSizeType = (typeof LABEL_SIZE_TYPES)[number]; | ||
| type VersionType = (typeof Version)[number]; | ||
| type InputTypeType = (typeof INPUT_TYPES)[number]; |
There was a problem hiding this comment.
Suggested change
| type InputTypeType = (typeof INPUT_TYPES)[number]; | |
| type InputType = (typeof INPUT_TYPES)[number]; |
There was a problem hiding this comment.
You can call this InputType like we do elsewhere:
ui-components/libs/common/src/lib/common.ts
Lines 327 to 328 in f245d71
| export let requirement: RequirementType = ""; | ||
| export let maxwidth: string = "none"; | ||
| export let version: VersionType = "1"; | ||
| export let inputType: InputTypeType = ""; |
There was a problem hiding this comment.
Suggested change
| export let inputType: InputTypeType = ""; | |
| export let type: InputType = ""; |
There was a problem hiding this comment.
I'm curious of how many teams will properly apply this input type property. I suspect it will be low for the following reasons:
- It requires a dev to know that the property exists and should be applied correctly. "I added a radio group to this form item so I need to set this to radio group."
- The difference is subltle and easy for a dev to overlook
I think a better approach would be to detect the type of the slotted input then add a class accordingly.
<!-- HTML -->
<div
class:radio-group={hasRadioGroup}
class:checkbox-list={hasCheckboxList}
class:v2={version === "2"}
But that feels like an enhancement beyond the scope of our immediate work.
| <!-- HTML --> | ||
| <div | ||
| class:v2={version === "2"} | ||
| class={`${labelsize}${inputType ? ' ' + inputType : ''}`} |
There was a problem hiding this comment.
Suggested change
| class={`${labelsize}${inputType ? ' ' + inputType : ''}`} | |
| class={`${labelsize}${type ? ' ' + type : ''}`} |
| validateRequirementType(requirement); | ||
| validateLabelSize(labelsize); | ||
| validateVersion(version); | ||
| validateInputType(inputType); |
There was a problem hiding this comment.
Suggested change
| validateInputType(inputType); | |
| validateType(type); |
| false, | ||
| ); | ||
| const [Version, validateVersion] = typeValidator("Version", ["1", "2"]); | ||
| const [INPUT_TYPES, validateInputType] = typeValidator( |
There was a problem hiding this comment.
Suggested change
| const [INPUT_TYPES, validateInputType] = typeValidator( | |
| const [INPUT_TYPES, validateType] = typeValidator( |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Updates the Form Item component to support V2 design system styling while
maintaining full backward compatibility with V1. Introduces compact size
variant, input-type-aware message spacing, and refined error message
structure.
Changes
New Props
version("1" | "2", default"1"): Controls V1 vs V2 stylinginputType("" | "text-input" | "textarea" | "checkbox-list" | "radio-group", default""): Enables input-type-specific message spacing in V2New Size Variant
labelsizenow accepts"compact"in addition to"regular"and"large"V2 Styling Updates
Label Typography & Spacing
padding
Message Container
Message Spacing from Input:
Error Message Structure
Message Stack
Technical Implementation
Input-Type Awareness
inputTypeprop enables CSS to apply different spacing based on controltype
default
.large.checkbox-list .messages-containeruses larger spacingthan
.large.text-inputV2 CSS Scoping
.v2class selector.v2.compact)Messages Container Pattern
Related