Skip to content

fix!: convert Input and TextField BEM classes to flat class names #5127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
millus wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix!: convert Input and TextField BEM classes to flat class names #5127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a15b4e5
fix!: convert Input BEM classes to flat class names
millus Jun 26, 2026
46cbcc9
fix!: convert TextField BEM classes to flat class names
millus Jun 26, 2026
fd92e4c
docs: add ADR 0006 for flat CSS class name convention
millus Jun 29, 2026
d23bf8d
fix!: remove eds- prefix from Input inner class names
millus Jun 29, 2026
7bba776
fix!: rename eds-input root class and inner control element
millus Jun 29, 2026
f36df65
docs: add CUBE CSS and discussion #4639 references to ADR 0006
millus Jun 29, 2026
9602e8e
docs: note native element selectors vs flat classes in ADR 0006
millus Jun 29, 2026
dd0567e
fix: update TextField snapshot after Input class name changes
millus Jun 29, 2026
95d2d5f
chore: move ADR 0006 to its own PR (#5134)
millus Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/eds-core-react/src/components/next/Autocomplete/autocomplete.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

/* Square connecting corners, suppress focus ring, and use medium border when dropdown is open */
&:has(input[aria-expanded='true']) .eds-input-container {
&:has(input[aria-expanded='true']) .eds-input {
border-end-start-radius: 0;
border-end-end-radius: 0;
outline-color: var(--eds-color-border-medium);
Expand Down
2 changes: 1 addition & 1 deletion packages/eds-core-react/src/components/next/Foundation/elements.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@
.eds-elements :where(input):not(
[type='checkbox'], [type='radio'],
[type='range'], [type='color'], [type='file'], [type='image'],
[type='submit'], [type='reset'], [type='button'], .eds-input
[type='submit'], [type='reset'], [type='button'], .control

@pomfrida pomfrida Aug 3, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.control is a really common class name, so this can now accidentally exclude a consumer's own <input class="control"> from the foundation styles. What we actually want to exclude is "an input inside our Input", so maybe:

[type='submit'], [type='reset'], [type='button'], .eds-input input

) {
--_bg-color: var(--eds-color-bg-input);

Expand Down
26 changes: 11 additions & 15 deletions packages/eds-core-react/src/components/next/Input/Input.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ describe('Input (Next EDS 2.0)', () => {
it('Can be extended with className on input element', () => {
render(<Input value="textfield" className="input-class" readOnly />)
const input = screen.getByDisplayValue('textfield')
expect(input).toHaveClass('eds-input')
expect(input).toHaveClass('control')
expect(input).toHaveClass('input-class')
})
})
Expand Down Expand Up @@ -100,7 +100,7 @@ describe('Input (Next EDS 2.0)', () => {
it('Shows error icon when invalid by default', () => {
const { container } = render(<Input invalid aria-label="Invalid input" />)
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const errorIcon = container.querySelector('.eds-error-icon')
const errorIcon = container.querySelector('.error-icon')
expect(errorIcon).toBeInTheDocument()
})

Expand All @@ -109,7 +109,7 @@ describe('Input (Next EDS 2.0)', () => {
<Input invalid hideErrorIcon aria-label="Invalid input" />,
)
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const errorIcon = container.querySelector('.eds-error-icon')
const errorIcon = container.querySelector('.error-icon')
expect(errorIcon).not.toBeInTheDocument()
})

Expand All @@ -118,7 +118,7 @@ describe('Input (Next EDS 2.0)', () => {
<Input invalid disabled aria-label="Disabled invalid input" />,
)
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const errorIcon = container.querySelector('.eds-error-icon')
const errorIcon = container.querySelector('.error-icon')
expect(errorIcon).not.toBeInTheDocument()
})

Expand All @@ -127,7 +127,7 @@ describe('Input (Next EDS 2.0)', () => {
<Input invalid readOnly aria-label="ReadOnly invalid input" />,
)
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const errorIcon = container.querySelector('.eds-error-icon')
const errorIcon = container.querySelector('.error-icon')
expect(errorIcon).not.toBeInTheDocument()
})
})
Expand Down Expand Up @@ -164,8 +164,8 @@ describe('Input (Next EDS 2.0)', () => {
it('Text has text class', () => {
const { container } = render(<Input startText="NOK" endText="kg" />)
/* eslint-disable testing-library/no-container, testing-library/no-node-access */
const startText = container.querySelector('.eds-adornment__text')
const endText = container.querySelectorAll('.eds-adornment__text')[1]
const startText = container.querySelector('.text')
const endText = container.querySelectorAll('.text')[1]
/* eslint-enable testing-library/no-container, testing-library/no-node-access */
expect(startText).toBeInTheDocument()
expect(endText).toBeInTheDocument()
Expand All @@ -179,12 +179,8 @@ describe('Input (Next EDS 2.0)', () => {
/>,
)
/* eslint-disable testing-library/no-container, testing-library/no-node-access */
const startAdornment = container.querySelector(
'.eds-adornment__adornment',
)
const endAdornment = container.querySelectorAll(
'.eds-adornment__adornment',
)[1]
const startAdornment = container.querySelector('.item')
const endAdornment = container.querySelectorAll('.item')[1]
/* eslint-enable testing-library/no-container, testing-library/no-node-access */
expect(startAdornment).toBeInTheDocument()
expect(endAdornment).toBeInTheDocument()
Expand Down Expand Up @@ -274,14 +270,14 @@ describe('Input (Next EDS 2.0)', () => {
it('Applies base class and custom containerClassName', () => {
render(<Input containerClassName="test-class" />)
const wrapper = getInputWrapper()
expect(wrapper).toHaveClass('eds-input-container')
expect(wrapper).toHaveClass('eds-input')
expect(wrapper).toHaveClass('test-class')
})

it('Applies input class to input element', () => {
render(<Input value="test" readOnly />)
const input = screen.getByDisplayValue('test')
expect(input).toHaveClass('eds-input')
expect(input).toHaveClass('control')
})

it('Applies disabled data attribute when disabled', () => {
Expand Down
18 changes: 9 additions & 9 deletions packages/eds-core-react/src/components/next/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
const hasStartAdornment = startText || startAdornment
const hasEndAdornment = endText || endAdornment

const containerClasses = ['eds-input-container', containerClassName]
const containerClasses = ['eds-input', containerClassName]

@pomfrida pomfrida Aug 3, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since eds-input used to be the inner input and is now the container, existing CSS against it won't break visibly — it just starts styling the wrong element. Worth mentioning that in the BREAKING CHANGE note, e.g. ".eds-input is now the container; the inner input is .control." A specific footer also avoids the manual dedup we had to do in the release PR after #5114/#5115, where the identical footer texts ended up as duplicate changelog entries.

.filter(Boolean)
.join(' ')

Expand All @@ -46,7 +46,7 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
>
{displayErrorIcon && (
<span
className="eds-error-icon"
className="error-icon"
data-font-size="xs"
data-font-family="ui"
data-baseline="center"
Expand All @@ -55,10 +55,10 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
</span>
)}
{hasStartAdornment && (
<div className="eds-adornment" data-color-appearance="neutral">
<div className="adornment" data-color-appearance="neutral">
{startText && (
<span
className="eds-adornment__text"
className="text"
data-font-family="ui"
data-font-size="xs"
data-baseline="center"
Expand All @@ -67,7 +67,7 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
</span>
)}
{startAdornment && (
<span className="eds-adornment__adornment" data-font-size="xs">
<span className="item" data-font-size="xs">
{startAdornment}
</span>
)}
Expand All @@ -78,7 +78,7 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
type={Component === 'textarea' ? undefined : type}
disabled={disabled}
readOnly={readOnly}
className={['eds-input', className].filter(Boolean).join(' ')}
className={['control', className].filter(Boolean).join(' ')}
data-color-appearance="neutral"
data-font-family="ui"
data-font-size="md"
Expand All @@ -89,10 +89,10 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
aria-invalid={invalid || undefined}
/>
{hasEndAdornment && (
<div className="eds-adornment" data-color-appearance="neutral">
<div className="adornment" data-color-appearance="neutral">
{endText && (
<span
className="eds-adornment__text"
className="text"
data-font-family="ui"
data-font-size="xs"
data-baseline="center"
Expand All @@ -101,7 +101,7 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
</span>
)}
{endAdornment && (
<span className="eds-adornment__adornment" data-font-size="xs">
<span className="item" data-font-size="xs">
{endAdornment}
</span>
)}
Expand Down
4 changes: 2 additions & 2 deletions packages/eds-core-react/src/components/next/Input/__snapshots__/Input.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
exports[`Input (Next EDS 2.0) Matches snapshot 1`] = `
<DocumentFragment>
<div
class="eds-input-container"
class="eds-input"
data-color-appearance="neutral"
data-font-size="md"
data-readonly="true"
data-selectable-space="sm"
data-space-proportions="squished"
>
<input
class="eds-input"
class="control"
data-color-appearance="neutral"
data-font-family="ui"
data-font-size="md"
Expand Down
Loading
Loading