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

Apply Figma design updates: change Input border-radius from None to
Rounded, and remove the large size variant from Button.

Closes #4784

Author: pomfrida

packages/eds-core-react/src/components/next/Button/Button.docs.mdx

@@ -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} />
 

packages/eds-core-react/src/components/next/Button/Button.figma.tsx

@@ -29,7 +29,6 @@ figma.connect(
       }),
       geometry: figma.nestedProps('.Geometry Options', {
         size: figma.enum('Size', {
-          Large: 'large',
           Default: 'default',
           Small: 'small',
         }),
@@ -88,7 +87,6 @@ figma.connect(
       }),
       geometry: figma.nestedProps('.Geometry Options', {
         size: figma.enum('Size', {
-          Large: 'large',
           Default: 'default',
           Small: 'small',
         }),

packages/eds-core-react/src/components/next/Button/Button.stories.tsx

@@ -26,7 +26,7 @@ const meta: Meta<StoryArgs> = {
     },
     size: {
       control: 'select',
-      options: ['small', 'default', 'large'],
+      options: ['small', 'default'],
       description: 'Button size',
     },
     tone: {
@@ -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>
   ),
 }
@@ -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>
@@ -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: {
@@ -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">
@@ -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>

packages/eds-core-react/src/components/next/Button/Button.test.tsx

@@ -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(
@@ -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) => {
@@ -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>
@@ -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(

packages/eds-core-react/src/components/next/Button/Button.tsx

@@ -5,7 +5,6 @@ import { TypographyNext } from '../../Typography'
 const SIZE_MAPPING = {
   small: 'sm',
   default: 'md',
-  large: 'lg',
 } as const
 
 const sizeToTypography = SIZE_MAPPING

packages/eds-core-react/src/components/next/Button/Button.types.ts

@@ -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

packages/eds-core-react/src/components/next/Button/button.css

@@ -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 */
@@ -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 */
   }

packages/eds-core-react/src/components/next/Input/input.css

@@ -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);
         }
@@ -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);
         }
@@ -92,6 +102,7 @@
 
       & .eds-input {
         color: var(--_readonly-text-color);
+
         /* Safari autofill override */
         -webkit-text-fill-color: var(--_readonly-text-color);
       }
@@ -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);
   }