fix: replace styled-components Tooltip with next/Tooltip in TextField and TextArea (#4981)

* fix(next): replace old styled-components Tooltip with next/Tooltip in TextField and TextArea

Part of #4978

* fix(next): restore label-row spacing when Tooltip wraps the info button

The next/Tooltip wraps children in .eds-tooltip-anchor which becomes the
flex item instead of the button, bypassing the existing negative-margin fix.
Extend the selector to also target the anchor span.

Part of #4978

* fix(eds-core-react): narrow labelInfo to string to match next/Tooltip title prop

Part of #4978

* fix(eds-core-react): mock Popover API in TextField tests for jsdom compatibility

Part of #4978

* style(eds-core-react): fix prettier formatting in TextField test mock

* test: restore Element.prototype.matches after TextField tests

Prevents the override from leaking into other test files running in the same worker.

* fix: scope text-field header info selector to direct children

Prevents margin-block being applied twice when the info button is
wrapped in .eds-tooltip-anchor, which caused unintended positioning.

* fix: scope text-field info selector to direct children; clean up test polyfill teardown

- Use > combinator on .eds-text-field__info to prevent double margin-block
  when the button is wrapped in .eds-tooltip-anchor
- Restore HTMLElement.prototype.matches after tests via Reflect.deleteProperty
  instead of saving/restoring the method reference (avoids unbound-method lint)

Author: millus

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

@@ -5,8 +5,7 @@ import type { TextAreaProps } from './TextArea.types'
 import { Field, useFieldIds } from '../Field'
 import { Input } from '../Input'
 import { Button } from '../Button'
-// TODO: swap to next/Tooltip when available
-import { Tooltip } from '../../Tooltip'
+import { Tooltip } from '../Tooltip'
 import { Icon } from '../Icon'
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(

packages/eds-core-react/src/components/next/TextArea/textarea.css

@@ -2,30 +2,35 @@
   .eds-text-area {
     & .label-row {
       display: flex;
+      gap: var(--eds-typography-gap-horizontal);
       align-items: center;
       justify-content: space-between;
-      gap: var(--eds-typography-gap-horizontal);
+
       inline-size: 100%;
 
-      & > button {
+      & > button,
+      & > .eds-tooltip-anchor {
         flex-shrink: 0;
         margin-block: calc(var(--eds-sizing-icon-xs) / -2);
       }
     }
 
     & .eds-input-container {
+      overflow: hidden;
       align-items: flex-start;
       padding-block: var(--eds-container-space-vertical);
-      overflow: hidden;
 
       & textarea.eds-input {
-        box-sizing: border-box;
-        overflow: auto;
-        white-space: pre-wrap;
-        text-overflow: clip;
         resize: vertical;
+
+        overflow: auto;
+
+        box-sizing: border-box;
         padding-block-end: var(--eds-container-space-vertical);
         padding-inline-end: var(--eds-selectable-space-horizontal);
+
+        text-overflow: clip;
+        white-space: pre-wrap;
       }
 
       &:has(+ .helper-row) {
@@ -37,8 +42,8 @@
 
     & .helper-row {
       display: flex;
-      align-items: baseline;
       gap: var(--eds-typography-gap-horizontal);
+      align-items: baseline;
       inline-size: 100%;
     }
 

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

@@ -3,6 +3,28 @@ import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 import { TextField } from './TextField'
 
+// jsdom does not implement the Popover API (used by next/Tooltip)
+beforeAll(() => {
+  HTMLElement.prototype.showPopover = function (this: HTMLElement) {
+    this.setAttribute('data-popover-open', '')
+  }
+  HTMLElement.prototype.hidePopover = function (this: HTMLElement) {
+    this.removeAttribute('data-popover-open')
+  }
+  HTMLElement.prototype.matches = function (
+    this: HTMLElement,
+    selector: string,
+  ) {
+    if (selector === ':popover-open')
+      return this.hasAttribute('data-popover-open')
+    return Element.prototype.matches.call(this, selector)
+  }
+})
+afterAll(() => {
+  // Remove the own-property override — prototype chain falls back to Element.prototype.matches
+  Reflect.deleteProperty(HTMLElement.prototype, 'matches')
+})
+
 describe('TextField (Next EDS 2.0)', () => {
   it('Matches snapshot', () => {
     const { container } = render(

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

@@ -4,7 +4,7 @@ import type { TextFieldProps } from './TextField.types'
 import { Field, useFieldIds } from '../Field'
 import { Input } from '../Input'
 import { Button } from '../Button'
-import { Tooltip } from '../../Tooltip'
+import { Tooltip } from '../Tooltip'
 import { Icon } from '../Icon'
 import './text-field.css'
 

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

@@ -5,7 +5,7 @@ export type TextFieldProps = {
   /** Label for the field */
   label?: ReactNode
   /** Info tooltip content shown next to the label */
-  labelInfo?: ReactNode
+  labelInfo?: string
   /** Indicator text shown after label, e.g. "(Required)" or "(Optional)" */
   indicator?: string
   /** Descriptive text that provides additional context for the field */

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

@@ -1,14 +1,17 @@
 @layer eds-components {
   .eds-text-field__header {
     display: flex;
+    gap: var(--eds-typography-gap-horizontal);
     align-items: center;
     justify-content: space-between;
-    gap: var(--eds-typography-gap-horizontal);
+
     inline-size: 100%;
   }
 
-  .eds-text-field__info {
+  .eds-text-field__header > .eds-text-field__info,
+  .eds-text-field__header > .eds-tooltip-anchor {
     flex-shrink: 0;
+
     /* Negative margin collapses the button's 24px layout contribution to ~8px,
        matching Figma's 8px icon container. Label text-box height determines row height. */
     margin-block: calc(var(--eds-sizing-icon-xs) / -2);