fix: ♻️ Fixing review comments

Author: pomfrida

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

@@ -134,14 +134,19 @@ const Wrapper = ({
   </div>
 )
 
-const AllVariants = () => (
+const AllVariants = ({ prefix = 'default' }: { prefix?: string }) => (
   <>
-    <Radio label="Unchecked" name="all-variants" value="unchecked" />
-    <Radio label="Checked" name="all-variants" value="checked" defaultChecked />
-    <Radio label="Disabled" name="all-variants-disabled" disabled />
+    <Radio label="Unchecked" name={`${prefix}-unchecked`} value="unchecked" />
+    <Radio
+      label="Checked"
+      name={`${prefix}-checked`}
+      value="checked"
+      defaultChecked
+    />
+    <Radio label="Disabled" name={`${prefix}-disabled`} disabled />
     <Radio
       label="Disabled checked"
-      name="all-variants-disabled-checked"
+      name={`${prefix}-disabled-checked`}
       disabled
       defaultChecked
     />
@@ -154,13 +159,13 @@ export const Introduction: StoryFn<RadioProps> = (args) => {
 
 export const Spacious: StoryFn<RadioProps> = () => (
   <Wrapper data-density="spacious">
-    <AllVariants />
+    <AllVariants prefix="spacious" />
   </Wrapper>
 )
 
 export const Comfortable: StoryFn<RadioProps> = () => (
   <Wrapper data-density="comfortable">
-    <AllVariants />
+    <AllVariants prefix="comfortable" />
   </Wrapper>
 )
 
@@ -216,6 +221,14 @@ export const GroupedRadio: StoryFn<RadioProps> = () => (
     </Wrapper>
   </fieldset>
 )
+GroupedRadio.parameters = {
+  docs: {
+    description: {
+      story:
+        'Radio buttons with the same `name` form a group. Use arrow keys (↑↓ or ←→) to navigate and select within the group.',
+    },
+  },
+}
 
 export const WithoutVisibleLabel: StoryFn<RadioProps> = () => (
   <div style={{ display: 'flex', gap: '32px', alignItems: 'flex-start' }}>

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

@@ -104,21 +104,6 @@ describe('Radio (next)', () => {
       )
       expect(await axe(container)).toHaveNoViolations()
     })
-
-    it('connects helperMessage to input via aria-describedby', () => {
-      render(
-        <Radio
-          label="Test Label"
-          name="test"
-          helperMessage="Helper text for a11y"
-        />,
-      )
-
-      const radio = screen.getByRole('radio')
-      const helperMessage = screen.getByText('Helper text for a11y')
-
-      expect(radio).toHaveAttribute('aria-describedby', helperMessage.id)
-    })
   })
 
   describe('Interaction', () => {
@@ -170,26 +155,6 @@ describe('Radio (next)', () => {
     })
   })
 
-  describe('Field props', () => {
-    it('supports indicator prop for required/optional text', () => {
-      render(<Radio label="Test Label" name="test" indicator="(Required)" />)
-
-      expect(screen.getByText('(Required)')).toBeInTheDocument()
-    })
-
-    it('supports helperMessage prop', () => {
-      render(
-        <Radio
-          label="Test Label"
-          name="test"
-          helperMessage="This is a helper message"
-        />,
-      )
-
-      expect(screen.getByText('This is a helper message')).toBeInTheDocument()
-    })
-  })
-
   describe('Radio group behavior', () => {
     it('only one radio in a group can be selected', () => {
       render(

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

@@ -7,32 +7,22 @@ import {
 import { Field } from '../Field'
 import { Icon } from '../Icon'
 import type { RadioProps } from './Radio.types'
-import './radio.css'
 
 const classNames = (...classes: (string | boolean | undefined)[]) =>
   classes.filter(Boolean).join(' ')
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
-  {
-    label,
-    disabled = false,
-    indicator,
-    helperMessage,
-    id: providedId,
-    ...rest
-  },
+  { label, disabled = false, id: providedId, ...rest },
   ref,
 ) {
   const generatedId = useId()
   const inputId = providedId ?? generatedId
-  const helperMessageId = `${inputId}-helper`
 
   const radioInput = (
     <>
       <input
         type="radio"
         id={inputId}
-        aria-describedby={helperMessage ? helperMessageId : undefined}
         className="eds-radio__input"
         disabled={disabled}
         ref={ref}
@@ -65,14 +55,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
         data-space-proportions="squished"
       >
         {radioInput}
-        <Field.Label htmlFor={inputId} indicator={indicator}>
-          {label}
-        </Field.Label>
-        {helperMessage && (
-          <Field.HelperMessage id={helperMessageId}>
-            {helperMessage}
-          </Field.HelperMessage>
-        )}
+        <Field.Label htmlFor={inputId}>{label}</Field.Label>
       </Field>
     )
   }

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

@@ -3,10 +3,4 @@ import type { InputHTMLAttributes, ReactNode } from 'react'
 export type RadioProps = {
   /** Label for the radio button */
   label?: ReactNode
-  /** If true, the radio button will be disabled */
-  disabled?: boolean
-  /** Indicator text shown after the label, e.g. "(Required)" or "(Optional)" */
-  indicator?: string
-  /** Helper message shown below the radio button, useful for additional context */
-  helperMessage?: ReactNode
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>

packages/eds-core-react/src/components/next/Radio/radio.css

@@ -2,22 +2,37 @@
   .eds-radio {
     --_radio-icon-color: var(--eds-color-bg-fill-emphasis-default);
     --_radio-hover-color: var(--eds-color-bg-fill-muted-default);
+    --_radio-icon-size: var(--eds-sizing-icon-lg);
+    /* Touch target: 36px spacious, 28px comfortable */
+    --_radio-touch-target: 2.25rem;
     cursor: pointer;
     position: relative;
     box-sizing: border-box;
   }
 
+  [data-density='comfortable'] .eds-radio {
+    --_radio-touch-target: 1.75rem;
+  }
+
   .eds-radio--standalone {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     position: relative;
-    padding: 0.375rem; /* 6px for spacious: 24px icon + 12px = 36px */
+    /* Padding calculated from touch target and icon size */
+    padding: calc((var(--_radio-touch-target) - var(--_radio-icon-size)) / 2);
   }
 
   .eds-field.eds-radio {
-    /* Gap compensates for icon-wrapper negative margin (-4.8px) */
-    gap: 0.925rem;
+    /*
+     * Gap must compensate for icon-wrapper negative margin (-4.8px inline).
+     * This negative margin matches Figma's icon container padding for optical alignment.
+     * Compensation: 4.8px (margin) + 2px (visual balance) ≈ 6.8px (0.425rem)
+     */
+    --_radio-gap-compensation: 0.425rem;
+    gap: calc(
+      var(--eds-generic-gap-horizontal) + var(--_radio-gap-compensation)
+    );
     padding-inline: var(--eds-selectable-space-horizontal);
     padding-block: var(--eds-selectable-space-vertical);
     width: auto;
@@ -89,21 +104,17 @@
     outline: none;
   }
 
-  .eds-radio:has(.eds-radio__input:focus-visible)::after {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border: 1px solid var(--eds-color-border-focus);
-    border-radius: 6px;
-    pointer-events: none;
+  .eds-radio:has(.eds-radio__input:focus-visible) {
+    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
+    outline-offset: var(--eds-sizing-stroke-thick);
+    border-radius: var(--eds-spacing-border-radius-rounded);
   }
 
-  .eds-radio--standalone:has(.eds-radio__input:focus-visible)::after {
+  .eds-radio--standalone:has(.eds-radio__input:focus-visible) {
     border-radius: var(--eds-spacing-border-radius-pill);
   }
 
   .eds-radio__icon {
-    position: relative;
     pointer-events: none;
     fill: var(--_radio-icon-color);
     flex-shrink: 0;
@@ -138,14 +149,4 @@
     color: var(--eds-color-border-neutral-medium);
     cursor: not-allowed;
   }
-
-  .eds-field.eds-radio[data-color-appearance='accent'] {
-    --_eds-field-helper-color: var(--eds-color-text-neutral-subtle);
-  }
-
-  /* Comfortable density for standalone radio */
-  /* Icon is 20px in comfortable (--eds-sizing-icon-lg: 1.25rem) */
-  [data-density='comfortable'] .eds-radio--standalone {
-    padding: 0.25rem; /* 4px: 20px icon + 8px = 28px */
-  }
 }

packages/eds-core-react/src/components/next/index.css

@@ -1,7 +1,7 @@
 /* EDS 2.0 Next Components - CSS */
+/* Define layer order - eds-components has lowest priority for easy user overrides */
+@layer eds-components;
+
 @import '@equinor/eds-tokens/css/variables';
 @import './Field/field.css';
 @import './Radio/radio.css';
-
-/* Define layer order - eds-components has lowest priority for easy user overrides */
-@layer eds-components;