fix(Forms): ensure error shows correct border and text colors (#2717)

dnbexperience · Oct 3, 2023 · f1bc34d · f1bc34d
1 parent 5bcfdd9
commit f1bc34d
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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', () => {