Skip to content

style: design updates - Input border-radius and remove Button large size #4786

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

Merged
pomfrida merged 1 commit into from
Apr 14, 2026
+38 −73
Merged

style: design updates - Input border-radius and remove Button large size #4786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/Button/Button.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ import { add, chevron_right } from '@equinor/eds-icons'

### Sizes

Three sizes are available: `small` (24px spacious / 20px comfortable), `default` (36px spacious / 24px comfortable), and `large` (44px spacious / 36px comfortable).
Two sizes are available: `small` (24px spacious / 20px comfortable) and `default` (36px spacious / 24px comfortable).

<Canvas of={ComponentStories.Sizes} />

Expand Down
2 changes: 0 additions & 2 deletions packages/eds-core-react/src/components/next/Button/Button.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ figma.connect(
}),
geometry: figma.nestedProps('.Geometry Options', {
size: figma.enum('Size', {
Large: 'large',
Default: 'default',
Small: 'small',
}),
Expand Down Expand Up @@ -88,7 +87,6 @@ figma.connect(
}),
geometry: figma.nestedProps('.Geometry Options', {
size: figma.enum('Size', {
Large: 'large',
Default: 'default',
Small: 'small',
}),
Expand Down
21 changes: 1 addition & 20 deletions packages/eds-core-react/src/components/next/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const meta: Meta<StoryArgs> = {
},
size: {
control: 'select',
options: ['small', 'default', 'large'],
options: ['small', 'default'],
description: 'Button size',
},
tone: {
Expand Down Expand Up @@ -106,7 +106,6 @@ export const Sizes: Story = {
<Wrapper direction="row" align="center">
<Button size="small">Small</Button>
<Button size="default">Default</Button>
<Button size="large">Large</Button>
</Wrapper>
),
}
Expand Down Expand Up @@ -244,10 +243,6 @@ export const AllVariants: Story = {
<Icon data={add} aria-hidden />
Default
</Button>
<Button variant={variant} tone={color} size="large">
<Icon data={add} aria-hidden />
Large
</Button>
</Wrapper>
))}
</Wrapper>
Expand Down Expand Up @@ -299,9 +294,6 @@ export const IconOnly: Story = {
<Button icon aria-label="Add" size="default">
<Icon data={add} aria-hidden />
</Button>
<Button icon aria-label="Add" size="large">
<Icon data={add} aria-hidden />
</Button>
</Wrapper>
),
parameters: {
Expand Down Expand Up @@ -362,9 +354,6 @@ export const CircularIconOnly: Story = {
<Button icon round aria-label="Add" size="default">
<Icon data={add} aria-hidden />
</Button>
<Button icon round aria-label="Add" size="large">
<Icon data={add} aria-hidden />
</Button>
</Wrapper>
<Wrapper direction="row" align="center">
<Button variant="primary" icon round aria-label="Add">
Expand Down Expand Up @@ -398,33 +387,25 @@ export const DensityComparison: Story = {
<Wrapper direction="row" align="center" gap={12}>
<Button size="small">Small</Button>
<Button size="default">Default</Button>
<Button size="large">Large</Button>
<Button size="small" icon aria-label="Add">
<Icon data={add} aria-hidden />
</Button>
<Button size="default" icon aria-label="Add">
<Icon data={add} aria-hidden />
</Button>
<Button size="large" icon aria-label="Add">
<Icon data={add} aria-hidden />
</Button>
</Wrapper>
</div>
<div data-density="comfortable">
<h3 style={{ marginBottom: '12px' }}>Comfortable</h3>
<Wrapper direction="row" align="center" gap={12}>
<Button size="small">Small</Button>
<Button size="default">Default</Button>
<Button size="large">Large</Button>
<Button size="small" icon aria-label="Add">
<Icon data={add} aria-hidden />
</Button>
<Button size="default" icon aria-label="Add">
<Icon data={add} aria-hidden />
</Button>
<Button size="large" icon aria-label="Add">
<Icon data={add} aria-hidden />
</Button>
</Wrapper>
</div>
</Wrapper>
Expand Down
21 changes: 1 addition & 20 deletions packages/eds-core-react/src/components/next/Button/Button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,6 @@ describe('Button (next)', () => {
)
})

it('renders with large size', () => {
render(<Button size="large">Large</Button>)
expect(screen.getByRole('button')).toHaveAttribute(
'data-selectable-space',
'lg',
)
})

it('renders with accent tone', () => {
render(<Button tone="accent">Accent</Button>)
expect(screen.getByRole('button')).toHaveAttribute(
Expand Down Expand Up @@ -313,7 +305,6 @@ describe('Button (next)', () => {
it.each([
['small', 'sm'],
['default', 'md'],
['large', 'lg'],
] as const)(
'renders %s size with data-selectable-space=%s',
(size, expected) => {
Expand Down Expand Up @@ -419,16 +410,6 @@ describe('Button (next)', () => {
expect(button).toHaveAttribute('data-selectable-space', 'sm')
})

it('uses selectable space tokens for icon-only (large size)', () => {
render(
<Button icon aria-label="Add" size="large">
<MockIcon />
</Button>,
)
const button = screen.getByRole('button')
expect(button).toHaveAttribute('data-selectable-space', 'lg')
})

it('uses selectable space tokens for regular button', () => {
render(
<Button>
Expand All @@ -449,7 +430,7 @@ describe('Button (next)', () => {
expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
})

it.each(['small', 'default', 'large'] as const)(
it.each(['small', 'default'] as const)(
'renders icon-only with %s size',
(size) => {
render(
Expand Down
1 change: 0 additions & 1 deletion packages/eds-core-react/src/components/next/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { TypographyNext } from '../../Typography'
const SIZE_MAPPING = {
small: 'sm',
default: 'md',
large: 'lg',
} as const

const sizeToTypography = SIZE_MAPPING
Expand Down
3 changes: 1 addition & 2 deletions packages/eds-core-react/src/components/next/Button/Button.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ export type ButtonVariant = 'primary' | 'secondary' | 'ghost'
* Button size options
* - `small`: Compact size (24px height)
* - `default`: Standard size (36px height)
* - `large`: Generous size (44px height)
*/
export type ButtonSize = 'small' | 'default' | 'large'
export type ButtonSize = 'small' | 'default'

/**
* Color tone for theming
Expand Down
14 changes: 2 additions & 12 deletions packages/eds-core-react/src/components/next/Button/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,10 @@
* Button height is controlled by min-height.
* The span keeps its natural line-height and is centered by flexbox.
*
* Spacious (default): sm=24px, md=36px, lg=44px
* Comfortable: sm=20px, md=24px, lg=36px
* Spacious (default): sm=24px, md=36px
* Comfortable: sm=20px, md=24px
*/

.eds-button[data-selectable-space='lg'] {
gap: var(--eds-typography-gap-horizontal);
min-height: 2.75rem; /* 44px */
padding-inline: var(--eds-selectable-space-horizontal);
}

.eds-button[data-selectable-space='md'] {
gap: var(--eds-typography-gap-horizontal);
min-height: 2.25rem; /* 36px */
Expand All @@ -53,10 +47,6 @@

/* Comfortable density */

[data-density='comfortable'] .eds-button[data-selectable-space='lg'] {
min-height: 2.25rem; /* 36px */
}

[data-density='comfortable'] .eds-button[data-selectable-space='md'] {
min-height: 1.5rem; /* 24px */
}
Expand Down
47 changes: 32 additions & 15 deletions packages/eds-core-react/src/components/next/Input/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,45 @@
.eds-input-container {
/* Temporary alias until proper input background token is available */
--_bg-input: var(--eds-color-bg-canvas);

/* Temporary alias until proper readonly text token is available */
--_readonly-text-color: var(--eds-color-border-strong);

isolation: isolate;

display: flex;
flex-direction: row;
align-items: center;
gap: var(--eds-typography-gap-horizontal);
align-items: center;

box-sizing: border-box;
inline-size: 100%;
padding-block: var(--eds-selectable-space-vertical);
padding-inline: var(--eds-selectable-space-horizontal);
border-radius: var(--eds-spacing-border-radius-rounded, 4px);

background: var(--_bg-input);

/* Outline instead of border to not affect height calculation */
outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-subtle);
outline-offset: calc(-1 * var(--eds-sizing-stroke-thin));
border-radius: var(--eds-spacing-border-radius-none);
padding-inline: var(--eds-selectable-space-horizontal);
padding-block: var(--eds-selectable-space-vertical);

transition:
background-color 150ms,
outline-color 150ms;

&:hover:not([data-disabled]):not([data-readonly]) {
&:hover:not([data-disabled], [data-readonly]) {
outline-color: var(--eds-color-border-strong);

& .eds-input {
color: var(--eds-color-text-strong);

/* Safari autofill override */
-webkit-text-fill-color: var(--eds-color-text-strong);

&::placeholder {
color: var(--eds-color-text-strong);

/* Safari autofill override */
-webkit-text-fill-color: var(--eds-color-text-strong);
}
Expand Down Expand Up @@ -66,14 +74,16 @@
outline-color: transparent;

& .eds-input {
color: var(--eds-color-text-disabled);
cursor: not-allowed;
color: var(--eds-color-text-disabled);
opacity: 1;

/* Safari autofill override */
-webkit-text-fill-color: var(--eds-color-text-disabled);

&::placeholder {
color: var(--eds-color-text-disabled);

/* Safari autofill override */
-webkit-text-fill-color: var(--eds-color-text-disabled);
}
Expand All @@ -92,6 +102,7 @@

& .eds-input {
color: var(--_readonly-text-color);

/* Safari autofill override */
-webkit-text-fill-color: var(--_readonly-text-color);
}
Expand All @@ -112,37 +123,43 @@
.eds-input {
--_placeholder-text-color: var(--eds-color-text-subtle);

resize: none;

overflow: hidden;
flex: 1;

min-inline-size: 0;
padding: 0;
border: var(--eds-sizing-stroke-none);
background: transparent;
outline: none;

color: var(--eds-color-text-strong);
padding: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
resize: none;
white-space: nowrap;

background: transparent;
outline: none;

&::placeholder {
color: var(--_placeholder-text-color);

/* Safari autofill override */
-webkit-text-fill-color: var(--_placeholder-text-color);
}
}

/* Error icon */
.eds-error-icon {
color: var(--eds-color-text-subtle);
flex-shrink: 0;
color: var(--eds-color-text-subtle);
}

/* Adornments container */
.eds-adornment {
display: flex;
align-items: center;
gap: var(--eds-typography-gap-horizontal);
flex-shrink: 0;
gap: var(--eds-typography-gap-horizontal);
align-items: center;

color: var(--eds-color-text-subtle);
}

Expand Down
Loading