feat: ✨ Input and TextField - new version for EDS 2.0. using new tokens - #4219
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new version of the Input component that replaces styled-components with vanilla CSS, aligning with the project's modernization efforts towards EDS 2.0. The new component maintains full functional parity with the original while using CSS custom properties for styling.
Key Changes
- New Input component implementation using vanilla CSS instead of styled-components
- Complete test coverage matching the original component
- Comprehensive Storybook documentation and examples
- Exported as
InputNewto allow gradual migration
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
packages/eds-core-react/src/components/Input/index.ts |
Exports the new component as InputNew |
packages/eds-core-react/src/components/Input/Input.new.types.ts |
Type definitions for the new Input component |
packages/eds-core-react/src/components/Input/Input.new.tsx |
Main component implementation using vanilla CSS |
packages/eds-core-react/src/components/Input/Input.new.test.tsx |
Comprehensive test suite with accessibility checks |
packages/eds-core-react/src/components/Input/Input.new.stories.tsx |
Storybook stories demonstrating all variants and features |
packages/eds-core-react/src/components/Input/Input.new.docs.mdx |
Documentation with usage examples and migration guide |
packages/eds-core-react/src/components/Input/Input.new.css |
CSS implementation with BEM naming convention |
packages/eds-core-react/src/components/Input/__snapshots__/Input.new.test.tsx.snap |
Jest snapshot for regression testing |
millus
changed the title
millus
changed the title
millus
force-pushed
the
feat/4194-text-input-update-code-in-eds-core
branch
from
November 12, 2025 12:24
8629bc0 to
8ea5903
Compare
millus
force-pushed
the
feat/4194-text-input-update-code-in-eds-core
branch
from
November 14, 2025 09:22
3378bbc to
79f9cfc
Compare
- Add info prop to Label component for displaying tooltip on hover/focus - Add labelInfo prop to TextField that passes through to Label - Info icon displays on the right side of the label with hover background - Add Label stories to Storybook under EDS 2.0 (beta) - Add comprehensive tests for info tooltip functionality
- Add labelInfo to Introduction story default args - Organize argTypes into categories: Core, Label, Content, States, Adornments, Other - Add as prop control for input/textarea selection - Add id and className to Other category - Align category order with Input stories
…Label - Replace old Icon import with new Icon from ../Icon - Use token-based sizes (xs) instead of pixel values (16, 18) - Both error icon (Input) and info icon (Label) now use size='xs' (16px)
- Removed info prop from Label component (simplified) - Added labelInfo prop handling in TextField with Tooltip - Created text-field.css for header layout styling - Added DensityModes story with live password validation - Label now uses inline-flex without wrapper div
- Refactor TextField to use Field.Label, Field.Description, Field.HelperMessage - Replace optional/required props with indicator prop for visual text - Remove standalone Label and HelperMessage folders (now using Field's versions) - Update Input stories to use Field.Label and document TextField recommendation - Fix CSS import order in index.css - Update tests for new indicator prop API
- Align font sizes with Figma (md for input value, xs for adornments) - Rename leftText/rightText to startText/endText for RTL support - Rename leftAdornment/rightAdornment to startAdornment/endAdornment - Use data-font-size for dynamic density-aware spacing - Remove redundant data-line-height attribute - Update TextField FullExample with money icon and type=number - Update documentation and tests
- Use CSS nesting for cleaner code structure - Replace hardcoded 2px with --eds-sizing-stroke-thick token - Use inline-size instead of width for RTL support - Add gap token for header spacing - Add flex-shrink: 0 to info button
- Fix TextField ref type to support HTMLInputElement | HTMLTextAreaElement - Remove duplicate 'Next (EDS 2.0)' entry from Storybook preview - Move aria-invalid after spread to prevent accidental override - Add InputHTMLAttributes to InputProps for proper type exports - Remove duplicate props from InputProps (now inherited from HTMLAttributes) - Add role=alert to HelperMessage when invalid for screen readers - Fix adornment text vertical alignment with display: flex - Add accessibility note about aria-label in Input docs - Simplify TextField.types.ts (InputProps already includes HTMLAttributes) - Remove duplicate FieldDescription.tsx (merged from main)
- Remove 'use client' directive from index.next.ts for SSR compatibility - Remove automatic CSS import - users must import CSS separately - Update docs to clarify CSS must be imported manually: import '@equinor/eds-core-react/next/index.css'
- Change position: relative to isolation: isolate - Add padding-block for 36px height using sm + squished tokens - Add webkit comment for Safari autofill styling - Add data-baseline to adornments for text alignment - Add data-line-height to input element - Add invalid state styling for adornments and error icon - Simplify adornment CSS with nesting - Update tests for new token values
- Rename className to containerClassName for explicit container styling - Keep className for input element (standard React behavior) - Add Storybook documentation showing both props - Add tests for both className and containerClassName Addresses pomfrida's feedback on PR #4219
- Use box-shadow for focus ring since outline is used for border - Focus ring has stroke-thin thickness with stroke-thick gap - Border stays in place on focus, only changes color
millus
force-pushed
the
feat/4194-text-input-update-code-in-eds-core
branch
from
January 26, 2026 13:34
4edf983 to
0511874
Compare
pomfrida
approved these changes
Jan 26, 2026
millus
dismissed
vnys’s stale review
January 27, 2026 08:59
Addressed vnys's feedback:
- ✅ Changed from position: relative to isolation: isolate as suggested
- The -webkit-text-fill-color property is used to override Safari's autofill background styling (added comment explaining this in the code)
- Placeholder using border/strong, will revisit this when we have token available
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
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.
This pull request introduces the new EDS 2.0
Inputcomponent as a low-level, flexible form input for the next generation of the Equinor Design System. It includes the component implementation, types, documentation, comprehensive tests, and updates to package exports and Storybook configuration to support the new features.New EDS 2.0 Input component:
Inputcomponent insrc/components/next/Input/Input.tsx, supporting flexible props such as adornments, text, invalid/disabled/readOnly states, and rendering as eitherinputortextarea. The component uses EDS 2.0 token system data attributes and is fully accessible.InputPropstype inInput.types.tsto document and enforce the supported props for the new component.Documentation and Storybook:
Inputcomponent, covering usage, examples, and guidance for composition and accessibility.Testing:
Inputcomponent, covering accessibility, states, adornments, EDS 2.0 token system attributes, and CSS classes.Package and build updates:
package.jsonto include the build output for EDS 2.0 CSS files and ensure they are exported and included in the published package. [1] [2]Also added TextField component that uses both the new Field wrapper and Input component.