ui-components icon indicating copy to clipboard operation
ui-components copied to clipboard
verified publisher icon GovAlta

feat(#2955): update Text Input component for V2

Open twjeffery opened this issue 5 months ago • 2 comments

Summary

Updates the Input (TextField) component to support V2 design system styling while maintaining full backward compatibility with V1.

Changes

New Props

  • version ("1" | "2", default "1"): Controls V1 vs V2 styling
  • size ("default" | "compact", default "default"): Controls input height (56px vs 40px)

V2 Styling Updates

Focus State

  • V2 focus shows only the blue focus border (no layered default border)
  • Maintains V1 behavior with layered borders when version="1"

Size Variants

  • Default: 56px height with updated padding (9px 16px 11px)
  • Compact: 40px height with updated padding (4px 12px)
  • Leading/trailing content automatically adjusts to match input size

State Styling

  • Disabled: Updated text color using inputs/color/text/disabled token for input text and leading/trailing content
  • Readonly: New readonly state with distinct background (inputs/color/background/readonly) and border (inputs/color/border/readonly)
  • Placeholder: Updated to use inputs/color/text/placeholder token

Other Improvements

  • Fixed disabled hover state (no longer shows hover border)
  • Added autofill styling to match default input appearance
  • Leading/trailing content now uses component typography tokens

Technical Implementation

Token Remapping Pattern

  • Input-level remapping for compact sizing (height, padding, typography)
  • Container-level remapping for leading/trailing content (sibling elements)
  • Uses CSS custom property fallbacks for V1 compatibility

V2 CSS Scoping

  • All V2-specific styles use .v2 class selector
  • V1 behavior preserved exactly as-is

Testing

All changes tested in web components playground with:

  • Default and compact sizes
  • All input states (default, hover, focus, disabled, readonly, error)
  • Leading/trailing content combinations
  • Autofill behavior

Screenshots

Before

image image

After

image image image

Related

  • Parent issue: #2998
  • Design tokens PR for Text input: https://github.com/GovAlta/design-tokens/pull/91
  • V2 Figma component

twjeffery avatar Oct 01 '25 18:10 twjeffery

Looking good! I have some questions and recommendations about the CSS. Let me know if you want to discuss anything.

Thanks @bdfranck, all changes made. I also noticed a couple small issues with the styling on the text and border of the trailing/leading content specifically on the disabled state, fixed that as well.

twjeffery avatar Oct 06 '25 23:10 twjeffery

Looks good! Just one more small tweak.

@bdfranck Updated!

twjeffery avatar Oct 08 '25 18:10 twjeffery

@bdfranck @chrisolsen re-requesting reviews after changing the base branch to dev

twjeffery avatar Nov 18 '25 02:11 twjeffery

:tada: This PR is included in version 1.40.0-dev.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge avatar Nov 19 '25 17:11 tzuge

:tada: This PR is included in version 6.10.0-dev.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge avatar Nov 20 '25 23:11 tzuge

:tada: This PR is included in version 4.10.0-dev.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge avatar Nov 26 '25 23:11 tzuge