From f1bc34d713105c893d95aa6f339131cb33124e13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Tue, 3 Oct 2023 15:27:08 +0200
Subject: [PATCH] fix(Forms): ensure error shows correct border and text colors
 (#2717)

---
 .../src/extensions/forms/Field/Number.tsx     |  1 +
 .../src/extensions/forms/Field/String.tsx     |  3 ++
 .../src/extensions/forms/Field/Toggle.tsx     |  5 +-
 .../forms/Field/__tests__/Boolean.test.tsx    | 48 +++++++++++++++++++
 .../forms/Field/__tests__/Number.test.tsx     |  6 +++
 .../forms/Field/__tests__/Selection.test.tsx  | 11 +++++
 .../forms/Field/__tests__/String.test.tsx     | 32 +++++++++++++
 7 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
index 06132bde93e..4fcfe8634f1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
@@ -169,6 +169,7 @@ function NumberComponent(props: Props) {
         on_blur={handleBlur}
         on_change={handleChange}
         disabled={disabled}
+        status={error ? 'error' : undefined}
         stretch={width !== undefined}
         suffix={
           help ? (
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
index 7512ad1a661..7f8151b1e1e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
@@ -152,6 +152,7 @@ function StringComponent(props: Props) {
           disabled={disabled}
           stretch={width !== undefined}
           inner_ref={innerRef}
+          status={error ? 'error' : undefined}
         />
       ) : mask ? (
         <InputMasked
@@ -173,6 +174,7 @@ function StringComponent(props: Props) {
           disabled={disabled}
           stretch={width !== undefined}
           inner_ref={innerRef}
+          status={error ? 'error' : undefined}
         />
       ) : (
         <Input
@@ -195,6 +197,7 @@ function StringComponent(props: Props) {
           disabled={disabled}
           stretch={width !== undefined}
           inner_ref={innerRef}
+          status={error ? 'error' : undefined}
         />
       )}
     </FieldBlock>
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
index 0355f898536..3599f165f14 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
@@ -88,6 +88,7 @@ function Toggle(props: Props) {
             label={label}
             checked={isOn}
             disabled={disabled}
+            status={error ? 'error' : undefined}
             on_change={handleCheckboxChange}
             {...pickSpacingProps(props)}
           />
@@ -105,6 +106,7 @@ function Toggle(props: Props) {
             }
             checked={isOn}
             disabled={disabled}
+            status={error ? 'error' : undefined}
             value={value ? 'true' : 'false'}
             on_change={handleCheckboxChange}
           />
@@ -127,8 +129,8 @@ function Toggle(props: Props) {
               text={textOff ?? sharedContext?.translation.Forms.booleanNo}
               on_click={setOff}
               variant={isOn ? 'secondary' : undefined}
-              status={error ? 'error' : undefined}
               disabled={disabled}
+              status={error ? 'error' : undefined}
             />
           </ButtonRow>
           <Space bottom="x-small" />
@@ -147,6 +149,7 @@ function Toggle(props: Props) {
             }
             checked={isOn}
             disabled={disabled}
+            status={error ? 'error' : undefined}
             value={value ? 'true' : 'false'}
             on_change={handleCheckboxChange}
           />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx
index b00e5be888a..0521ff359a8 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx
@@ -22,6 +22,17 @@ describe('Field.Boolean', () => {
       ).toBeInTheDocument()
     })
 
+    it('shows error border', () => {
+      render(
+        <Field.Boolean
+          variant="checkbox"
+          error={new Error('This is what went wrong')}
+        />
+      )
+      const element = document.querySelector('.dnb-checkbox')
+      expect(element.className).toContain('dnb-checkbox__status--error')
+    })
+
     it('should toggle when clicking', async () => {
       const onChange = jest.fn()
       render(
@@ -93,6 +104,19 @@ describe('Field.Boolean', () => {
       ).toBeInTheDocument()
     })
 
+    it('shows error border', () => {
+      render(
+        <Field.Boolean
+          variant="button"
+          error={new Error('This is what went wrong')}
+        />
+      )
+      const element = document.querySelector('.dnb-toggle-button')
+      expect(element.className).toContain(
+        'dnb-toggle-button__status--error'
+      )
+    })
+
     it('should show error when no value is given', () => {
       render(<Field.Boolean variant="button" required validateInitially />)
       expect(screen.getByRole('alert')).toBeInTheDocument()
@@ -143,6 +167,19 @@ describe('Field.Boolean', () => {
       ).toBeInTheDocument()
     })
 
+    it('shows error border', () => {
+      render(
+        <Field.Boolean
+          variant="checkbox-button"
+          error={new Error('This is what went wrong')}
+        />
+      )
+      const element = document.querySelector('.dnb-toggle-button')
+      expect(element.className).toContain(
+        'dnb-toggle-button__status--error'
+      )
+    })
+
     it('should show error when no value is given', () => {
       render(
         <Field.Boolean
@@ -197,6 +234,17 @@ describe('Field.Boolean', () => {
       ).toBeInTheDocument()
     })
 
+    it('shows error border', () => {
+      render(
+        <Field.Boolean
+          variant="buttons"
+          error={new Error('This is what went wrong')}
+        />
+      )
+      const element = document.querySelector('.dnb-button')
+      expect(element.className).toContain('dnb-button__status--error')
+    })
+
     it('should show error when no value is given', () => {
       render(
         <Field.Boolean variant="buttons" required validateInitially />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx
index 1ed7feb2b27..b228ebb6a80 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx
@@ -31,6 +31,12 @@ describe('Field.Number', () => {
       ).toBeInTheDocument()
     })
 
+    it('shows error border', () => {
+      render(<Field.Number error={new Error('This is what went wrong')} />)
+      const element = document.querySelector('.dnb-input')
+      expect(element.className).toContain('dnb-input__status--error')
+    })
+
     it('formats with given thousandSeparator', () => {
       const { rerender } = render(
         <Field.Number value={12345} thousandSeparator=" " />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx
index 0426bfa968a..70621835f8c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx
@@ -288,4 +288,15 @@ describe('Selection', () => {
       })
     })
   })
+
+  it('shows error border', () => {
+    render(
+      <Field.Selection error={new Error('This is what went wrong')}>
+        <Field.Option value="foo">Fooo</Field.Option>
+        <Field.Option value="bar">Baar</Field.Option>
+      </Field.Selection>
+    )
+    const element = document.querySelector('.dnb-dropdown')
+    expect(element.className).toContain('dnb-dropdown__status--error')
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
index aa4cbee921a..a59caba6b82 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
@@ -81,6 +81,38 @@ describe('Field.String', () => {
         screen.getByText('This is what went wrong')
       ).toBeInTheDocument()
     })
+
+    describe('shows error border', () => {
+      it('for basis input', () => {
+        render(
+          <Field.String error={new Error('This is what went wrong')} />
+        )
+        const element = document.querySelector('.dnb-input')
+        expect(element.className).toContain('dnb-input__status--error')
+      })
+
+      it('for masked input', () => {
+        render(
+          <Field.String
+            mask={[/\/d/]}
+            error={new Error('This is what went wrong')}
+          />
+        )
+        const element = document.querySelector('.dnb-input-masked')
+        expect(element.className).toContain('dnb-input__status--error')
+      })
+
+      it('for multiline input', () => {
+        render(
+          <Field.String
+            multiline
+            error={new Error('This is what went wrong')}
+          />
+        )
+        const element = document.querySelector('.dnb-textarea')
+        expect(element.className).toContain('dnb-textarea__status--error')
+      })
+    })
   })
 
   describe('event handlers', () => {