feat: allow React Node type for label props to allow it to be more cu…

…stomizable (#3140)

packages/eds-core-react/src/components/Autocomplete/Autocomplete.test.tsx

@@ -54,6 +54,29 @@ describe('Autocomplete', () => {
     expect(optionsList.nodeName).toBe('UL')
   })
 
+  it('Has provided ReactNode label', async () => {
+    render(
+      <Autocomplete
+        disablePortal
+        label={<div>{labelText}</div>}
+        options={items}
+      />,
+    )
+
+    // The same label is used for both the input field and the list of options
+    const labeledNodes = await screen.findAllByLabelText(labelText)
+    const input = labeledNodes[0]
+    const optionsList = labeledNodes[1]
+
+    expect(input).toBeDefined()
+    expect(input).toHaveAccessibleName(labelText)
+    expect(input.nodeName).toBe('INPUT')
+
+    expect(optionsList).toBeDefined()
+    expect(optionsList).toHaveAccessibleName(labelText)
+    expect(optionsList.nodeName).toBe('UL')
+  })
+
   it('Has provided option label', async () => {
     const labler = (text: string) => `${text}+1`
     render(

packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx

@@ -187,7 +187,7 @@ export type AutocompleteProps<T> = {
   /** List of options in dropdown */
   options: T[]
   /** Label for the select element */
-  label: string
+  label: ReactNode
   /** Array of initial selected items
    * @default []
    */

packages/eds-core-react/src/components/Label/Label.test.tsx

@@ -33,6 +33,13 @@ describe('Label', () => {
     expect(screen.getByText(labelText)).toBeInTheDocument()
   })
 
+  it('Has correct label ReactNode', () => {
+    const labelText = 'Some label'
+    render(<Label label={<div>{labelText}</div>} />)
+
+    expect(screen.getByText(labelText)).toBeInTheDocument()
+  })
+
   it('Can add a meta text', () => {
     const labelText = 'Some label'
     const metaText = 'Meta'

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

@@ -1,4 +1,4 @@
-import { LabelHTMLAttributes, forwardRef } from 'react'
+import { LabelHTMLAttributes, ReactNode, forwardRef } from 'react'
 import styled from 'styled-components'
 import { typographyTemplate } from '@equinor/eds-utils'
 import { label as tokens } from './Label.tokens'
@@ -25,7 +25,7 @@ const Text = styled.span`
 `
 
 export type LabelProps = {
-  label: string
+  label: ReactNode
   meta?: string
   disabled?: boolean
 } & LabelHTMLAttributes<HTMLLabelElement>

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

@@ -47,6 +47,13 @@ describe('TextField', () => {
     expect(screen.getByText(labelText)).toBeInTheDocument()
   })
 
+  it('Has correct label ReactNode', () => {
+    const labelText = 'Some label'
+    render(<TextField id="test-label" label={<div>{labelText}</div>} />)
+
+    expect(screen.getByText(labelText)).toBeInTheDocument()
+  })
+
   it('Has correct default value', () => {
     const value = 'Some value'
     render(<TextField id="test-value" value={value} readOnly />)

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

@@ -31,7 +31,7 @@ type SharedTextFieldProps = {
   /** Input unique id. This is required to ensure accesibility */
   id: string
   /** Label text */
-  label?: string
+  label?: ReactNode
   /** Meta text */
   meta?: string
   /** Unit text */