From 16ed8214ec099ca4ddb4d21416031866f03a6daf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 9 Jan 2024 13:12:36 +0100 Subject: [PATCH] fix(PhoneNumber): show read outline on both fields in error state (#3196) --- .../feature-fields/PhoneNumber/Examples.tsx | 5 ++++- .../__tests__/__snapshots__/Input.test.tsx.snap | 2 ++ .../input/style/themes/dnb-input-theme-ui.scss | 2 ++ .../forms/Field/PhoneNumber/PhoneNumber.tsx | 1 + .../__tests__/PhoneNumber.screenshot.test.ts | 7 +++++++ ...ber-for-ui-have-to-match-with-error.snap.png | Bin 0 -> 10881 bytes 6 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-for-ui-have-to-match-with-error.snap.png diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx index 3c0de733680..46bbbf75597 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx @@ -83,7 +83,10 @@ export const Disabled = () => { export const Error = () => { return ( - + { }) 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/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-for-ui-have-to-match-with-error.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-for-ui-have-to-match-with-error.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..0c1f70019221bc41eb5d533d4f398504d1c4e831 GIT binary patch literal 10881 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 XtfHYltQ2#!6iY=x6J9N69{N83+qpM= literal 0 HcmV?d00001