refactor: migrate Field off TypographyNext (#4843)

Author: pomfrida

packages/eds-core-react/src/components/next/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -67,11 +67,6 @@ exports[`Checkbox (next) matches snapshot 1`] = `
     <label
       class="eds-field__label"
       data-baseline="center"
-      data-font-family="ui"
-      data-font-size="md"
-      data-font-weight="normal"
-      data-line-height="default"
-      data-tracking="normal"
       for="test-id"
     >
       checkbox

packages/eds-core-react/src/components/next/Field/Field.Description.tsx

@@ -1,27 +1,21 @@
 import { forwardRef } from 'react'
-import { TypographyNext } from '../../Typography'
 import type { FieldDescriptionProps } from './Field.types'
 
 export const FieldDescription = forwardRef<
   HTMLParagraphElement,
   FieldDescriptionProps
 >(function FieldDescription({ children, className, ...rest }, ref) {
   return (
-    <TypographyNext
+    <p
       ref={ref}
-      as="p"
-      family="ui"
-      size="sm"
-      baseline="center"
-      lineHeight="default"
-      tracking="normal"
+      data-baseline="center"
       className={['eds-field__description', className]
         .filter(Boolean)
         .join(' ')}
       {...rest}
     >
       {children}
-    </TypographyNext>
+    </p>
   )
 })
 

packages/eds-core-react/src/components/next/Field/Field.HelperMessage.tsx

@@ -1,5 +1,4 @@
 import { forwardRef } from 'react'
-import { TypographyNext } from '../../Typography'
 import type { HelperMessageProps } from './Field.HelperMessage.types'
 
 /**
@@ -23,23 +22,18 @@ export const HelperMessage = forwardRef<
   HelperMessageProps
 >(function HelperMessage({ children, className, role, id, ...rest }, ref) {
   return (
-    <TypographyNext
+    <p
       ref={ref}
-      as="p"
+      data-baseline="grid"
       id={id}
-      family="ui"
-      size="sm"
-      baseline="grid"
-      lineHeight="default"
-      tracking="normal"
       role={role}
       className={['eds-field__helper-message', className]
         .filter(Boolean)
         .join(' ')}
       {...rest}
     >
       {children}
-    </TypographyNext>
+    </p>
   )
 })
 

packages/eds-core-react/src/components/next/Field/Field.Label.tsx

@@ -1,29 +1,18 @@
 import { forwardRef } from 'react'
-import { TypographyNext } from '../../Typography'
 import type { FieldLabelProps } from './Field.types'
 
 export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
   function FieldLabel({ children, className, indicator, ...rest }, ref) {
     return (
-      <TypographyNext
+      <label
         ref={ref}
-        as="label"
-        family="ui"
-        size="md"
-        baseline="center"
-        lineHeight="default"
-        weight="normal"
-        tracking="normal"
+        data-baseline="center"
         className={['eds-field__label', className].filter(Boolean).join(' ')}
         {...rest}
       >
         {children}
-        {indicator && (
-          <span className="eds-field__indicator" data-font-size="sm">
-            {indicator}
-          </span>
-        )}
-      </TypographyNext>
+        {indicator && <span className="eds-field__indicator">{indicator}</span>}
+      </label>
     )
   },
 )

packages/eds-core-react/src/components/next/Field/field.css

@@ -1,24 +1,28 @@
 @layer eds-components {
   .eds-field {
-    /* Layout - use CSS variable for configurable width */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--eds-generic-gap-vertical);
-    width: var(--eds-field-width, 100%);
     /* Private color variables */
     --_eds-field-label-color: var(--eds-color-text-strong);
     --_eds-field-description-color: var(--eds-color-text-subtle);
     --_eds-field-indicator-color: var(--eds-color-text-neutral-subtle);
     --_eds-field-helper-color: var(--eds-color-text-subtle);
+
+    /* Layout - use CSS variable for configurable width */
+    display: flex;
+    flex-direction: column;
+    gap: var(--eds-generic-gap-vertical);
+    align-items: flex-start;
+
+    width: var(--eds-field-width, 100%);
+
+    /* Shared font-family — inherits to all text children */
+    font-family: var(--eds-typography-ui-body-font-family);
   }
 
   /* Horizontal layout for toggle inputs (checkbox, radio, switch) */
   .eds-field:is([data-position='start'], [data-position='end']) {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
+    flex-flow: row wrap;
     gap: var(--eds-generic-gap-horizontal);
+    align-items: center;
   }
 
   .eds-field[data-position='end'] {
@@ -31,17 +35,23 @@
     flex-basis: 100%;
   }
 
+  /* Label uses data-baseline="center" for text-box trim + grid-snap padding —
+     see [data-baseline='center'] rule in eds-tokens/src/css/typography.css */
   .eds-field__label {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
+    display: block;
+
+    font-size: var(--eds-typography-ui-body-md-font-size);
+    line-height: var(--eds-typography-ui-body-md-line-height-default);
+    font-weight: var(--eds-typography-ui-body-md-font-weight-normal);
     color: var(--_eds-field-label-color);
   }
 
   .eds-field__indicator {
     margin-inline-start: var(--eds-selectable-space-horizontal);
+
+    font-size: var(--eds-typography-ui-body-sm-font-size);
+    line-height: var(--eds-typography-ui-body-sm-line-height-default);
     color: var(--_eds-field-indicator-color);
-    font-size: var(--eds-typography-font-size);
     vertical-align: middle;
   }
 
@@ -50,16 +60,22 @@
     color: var(--_eds-field-description-color);
   }
 
-  /* HelperMessage styling */
   .eds-field__helper-message {
     margin: 0;
+    /* Tighten spacing above helper-message to 3xs (overrides parent gap).
+       Longhand follows shorthand to win the cascade. */
+    margin-block-start: calc(
+      var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical)
+    );
     color: var(--_eds-field-helper-color);
   }
 
-  /* Reduce gap before helper message to 3xs spacing.
-     Applied to the preceding sibling (not helper message) to avoid [data-font-family] margin: 0 override. */
-  .eds-field > :has(+ .eds-field__helper-message) {
-    margin-block-end: calc(var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical));
+  /* data-baseline="grid" on these elements handles text-box trim via
+     [data-baseline='grid'] in eds-tokens/src/css/typography.css */
+  .eds-field__description,
+  .eds-field__helper-message {
+    font-size: var(--eds-typography-ui-body-sm-font-size);
+    line-height: var(--eds-typography-ui-body-sm-line-height-default);
   }
 
   /* Only helper message changes color when disabled */

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

@@ -52,11 +52,6 @@ exports[`Radio (next) matches snapshot 1`] = `
     <label
       class="eds-field__label"
       data-baseline="center"
-      data-font-family="ui"
-      data-font-size="md"
-      data-font-weight="normal"
-      data-line-height="default"
-      data-tracking="normal"
       for="test-id"
     >
       radio

packages/eds-core-react/src/components/next/Switch/__snapshots__/Switch.test.tsx.snap

@@ -31,11 +31,6 @@ exports[`Switch (next) matches snapshot 1`] = `
     <label
       class="eds-field__label"
       data-baseline="center"
-      data-font-family="ui"
-      data-font-size="md"
-      data-font-weight="normal"
-      data-line-height="default"
-      data-tracking="normal"
       for="test-id"
     >
       switch

packages/eds-core-react/src/components/next/TextField/__snapshots__/TextField.test.tsx.snap

@@ -11,11 +11,6 @@ exports[`TextField (Next EDS 2.0) Matches snapshot 1`] = `
       <label
         class="eds-field__label"
         data-baseline="center"
-        data-font-family="ui"
-        data-font-size="md"
-        data-font-weight="normal"
-        data-line-height="default"
-        data-tracking="normal"
         for="test-id-input"
       >
         Label
@@ -24,10 +19,6 @@ exports[`TextField (Next EDS 2.0) Matches snapshot 1`] = `
     <p
       class="eds-field__description"
       data-baseline="center"
-      data-font-family="ui"
-      data-font-size="sm"
-      data-line-height="default"
-      data-tracking="normal"
       id="test-id-description"
     >
       Description text
@@ -54,10 +45,6 @@ exports[`TextField (Next EDS 2.0) Matches snapshot 1`] = `
     <p
       class="eds-field__helper-message"
       data-baseline="grid"
-      data-font-family="ui"
-      data-font-size="sm"
-      data-line-height="default"
-      data-tracking="normal"
       id="test-id-helper-message"
     >
       Helper message