fix(PhoneNumber): show read outline on both fields in error state (#3196

)
dnbexperience · Jan 9, 2024 · 16ed821 · 16ed821
1 parent b856a46
commit 16ed821
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 1 deletion.
diff --git a/...ign-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx b/...ign-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx
@@ -83,7 +83,10 @@ export const Disabled = () => {
 
 export const Error = () => {
   return (
-    <ComponentBox scope={{ FormError }}>
+    <ComponentBox
+      scope={{ FormError }}
+      data-visual-test="phone-number-error"
+    >
       <Field.PhoneNumber
         value="007"
         label="Label text"

diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -1338,12 +1338,14 @@ exports[`Input scss have to match default theme snapshot 1`] = `
   color: var(--color-fire-red);
 }
 .dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell {
+  --input-border-color: transparent;
   --border-color: var(--color-fire-red);
   --border-width: 0.0625rem;
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell, .dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover, .dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell {
+  --input-border-color: var(--color-fire-red);
   --border-color: var(--color-fire-red);
   --border-width: var(--input-border-width--focus);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);

diff --git a/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss
@@ -74,11 +74,13 @@
   }
   &__status--error#{&}:not([data-input-state='focus']):not(:hover)
     &__shell {
+    --input-border-color: transparent;
     @include fakeBorder(var(--color-fire-red));
   }
   &__status--error#{&}[data-input-state='focus'] &__shell,
   &__status--error#{&}:not([data-input-state='disabled']) &__shell:hover,
   &__status--error#{&}:not([data-input-state='disabled']):hover &__shell {
+    --input-border-color: var(--color-fire-red);
     @include fakeBorder(
       var(--color-fire-red),
       var(--input-border-width--focus)

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -312,6 +312,7 @@ function PhoneNumber(props: Props) {
             }
             data={dataRef.current}
             value={countryCodeRef.current}
+            status={error ? 'error' : undefined}
             disabled={disabled}
             on_focus={onFocusHandler}
             on_blur={handleBlur}

diff --git a/...b-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.screenshot.test.ts b/...b-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.screenshot.test.ts
@@ -17,6 +17,13 @@ describe.each(['ui'])('PhoneNumber for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match with error', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="phone-number-error"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('PhoneNumber', () => {

diff --git a/...ests__/__image_snapshots__/phonenumber-for-ui-have-to-match-with-error.snap.png b/...ests__/__image_snapshots__/phonenumber-for-ui-have-to-match-with-error.snap.png