fix(Field.Email): add default maxLength of 254 (#7244)

Motivation:
https://dnb-it.slack.com/archives/CMXABCHEY/p1774429640322809

RFC 5321 and DNB's email guidelines limits the total length of an email
address to 254 characters. This makes maxLength=254 the default for
Field.Email, removing the need for consumers to set it manually.

The default can be overridden via props, or removed by passing
undefined.


I think this is fine, and am not really considering this as a breaking
change, more like a fix, that we should have a max length by default.
Can't hardly see this being breaking for anyone.

Author: langz

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/info.mdx

@@ -28,3 +28,4 @@ There is a corresponding [Value.Email](/uilib/extensions/forms/Value/Email) comp
 - Only valid characters are allowed.
 - `autocomplete` is set to `email`.
 - `inputmode` is set to `email`.
+- `maxLength` defaults to `254`, based on the RFC 5321 email address length limit. Can be overridden.

packages/dnb-eufemia/src/extensions/forms/Field/Email/Email.tsx

@@ -41,6 +41,8 @@ function Email(props: Props) {
     label,
     autoComplete: 'email',
     inputMode: 'email',
+    // RFC 5321, which is used in DNB, limits the total length of an email address to 254 characters
+    maxLength: 254,
     pattern,
     trim: true,
     ...props,

packages/dnb-eufemia/src/extensions/forms/Field/Email/EmailDocs.tsx

@@ -3,4 +3,9 @@ import { StringProperties } from '../String/StringDocs'
 
 export const EmailProperties: PropertiesTableProps = {
   ...StringProperties,
+  maxLength: {
+    doc: 'Validation for maximum length of the text (number of characters). Defaults to `254` based on the RFC 5321 email address length limit.',
+    type: 'number',
+    status: 'optional',
+  },
 }

packages/dnb-eufemia/src/extensions/forms/Field/Email/__tests__/Email.test.tsx

@@ -111,6 +111,67 @@ describe('Field.Email', () => {
     expect(input).toHaveAttribute('inputmode', 'email')
   })
 
+  it('should have a default maxLength of 254', async () => {
+    render(
+      <Form.Handler>
+        <Field.Email path="/email" />
+      </Form.Handler>
+    )
+
+    const input = document.querySelector('input')
+
+    // 245 + '@' + 'test.com' = 254 characters – should be valid
+    const validEmail = `${'a'.repeat(245)}@test.com`
+    expect(validEmail).toHaveLength(254)
+    await userEvent.type(input, validEmail)
+    fireEvent.blur(input)
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+
+    // 246 + '@' + 'test.com' = 255 characters – should be invalid
+    await userEvent.clear(input)
+    const tooLongEmail = `${'a'.repeat(246)}@test.com`
+    expect(tooLongEmail).toHaveLength(255)
+    await userEvent.type(input, tooLongEmail)
+    fireEvent.blur(input)
+
+    expect(screen.queryByRole('alert')).toBeInTheDocument()
+  })
+
+  it('should allow overriding maxLength via props', async () => {
+    render(
+      <Form.Handler>
+        <Field.Email path="/email" maxLength={10} />
+      </Form.Handler>
+    )
+
+    const input = document.querySelector('input')
+
+    // 11 characters should be invalid with maxLength=10
+    await userEvent.type(input, 'aa@test.com')
+    fireEvent.blur(input)
+
+    expect(screen.queryByRole('alert')).toBeInTheDocument()
+  })
+
+  it('should not enforce maxLength when set to undefined', async () => {
+    render(
+      <Form.Handler>
+        <Field.Email path="/email" maxLength={undefined} />
+      </Form.Handler>
+    )
+
+    const input = document.querySelector('input')
+
+    // 255 characters would fail default maxLength of 254, but should pass when undefined
+    const longEmail = `${'a'.repeat(246)}@test.com`
+    expect(longEmail).toHaveLength(255)
+    await userEvent.type(input, longEmail)
+    fireEvent.blur(input)
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
   it('should have type="text" to avoid browser input manipulation', () => {
     const { rerender } = render(<Field.Email />)