Skip to content

Commit f5faa4f

Browse files
JulianNymarkJulianNymark
authored
Merge 1e757f6 into fd4358d 
2 parents fd4358d + 1e757f6 commit f5faa4f

File tree

6 files changed

+163
-6
lines changed

6 files changed

+163
-6
lines changed

‎.changeset/kind-flies-cover.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@navikt/ds-react": patch
3+
---
4+
5+
Modal: Bedre feilmeldinger ved feil bruk av props

‎@navikt/core/react/src/modal/modal.stories.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,3 +339,57 @@ ChromaticViewportTesting.parameters = {
339339
},
340340
},
341341
};
342+
343+
// For testing TS error messages:
344+
345+
/* const PropTypeTest = () => {
346+
return (
347+
<>
348+
<Modal header={{ heading: "Label" }}>OK</Modal>
349+
350+
<Modal header={{ heading: "Label" }} aria-label="Label">
351+
OK
352+
</Modal>
353+
354+
<Modal header={{ heading: "Label" }} aria-labelledby="Label">
355+
OK
356+
</Modal>
357+
358+
<Modal aria-label="Label">OK</Modal>
359+
360+
<Modal aria-labelledby="Label">OK</Modal>
361+
362+
<Modal aria-label="Label" open onClose={() => null}>
363+
OK
364+
</Modal>
365+
366+
<Modal>Mangler label</Modal>
367+
368+
<Modal open>Mangler onClose eller label</Modal>
369+
370+
<Modal open aria-label="Label">
371+
Mangler onClose
372+
</Modal>
373+
374+
<Modal open onClose={() => null}>
375+
Mangler label
376+
</Modal>
377+
378+
<Modal header={{ heading: "Label" }} open>
379+
Mangler onClose
380+
</Modal>
381+
382+
<Modal
383+
header={{ heading: "Label" }}
384+
aria-label="Label"
385+
aria-labelledby="Label"
386+
>
387+
For mange labels
388+
</Modal>
389+
390+
<Modal aria-label="Label" aria-labelledby="Label">
391+
For mange labels
392+
</Modal>
393+
</>
394+
);
395+
}; */

‎@navikt/core/react/src/modal/types.test-d.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { expectTypeOf } from "vitest";
2+
import { ModalProps } from "./types";
3+
4+
test("ModalProps works as intended", () => {
5+
expectTypeOf({
6+
header: { heading: "Label" },
7+
children: "OK",
8+
}).toMatchTypeOf<ModalProps>();
9+
10+
expectTypeOf({
11+
header: { heading: "Label" },
12+
"aria-label": "Label",
13+
children: "OK",
14+
}).toMatchTypeOf<ModalProps>();
15+
16+
expectTypeOf({
17+
header: { heading: "Label" },
18+
"aria-labelledby": "Label",
19+
children: "OK",
20+
}).toMatchTypeOf<ModalProps>();
21+
22+
expectTypeOf({
23+
"aria-label": "Label",
24+
children: "OK",
25+
}).toMatchTypeOf<ModalProps>();
26+
27+
expectTypeOf({
28+
"aria-labelledby": "Label",
29+
children: "OK",
30+
}).toMatchTypeOf<ModalProps>();
31+
32+
expectTypeOf({
33+
"aria-label": "Label",
34+
open: true,
35+
onClose: () => null,
36+
children: "OK",
37+
}).toMatchTypeOf<ModalProps>();
38+
39+
expectTypeOf({
40+
children: "Mangler label",
41+
}).not.toMatchTypeOf<ModalProps>();
42+
43+
expectTypeOf({
44+
open: true,
45+
children: "Mangler onClose eller label",
46+
}).not.toMatchTypeOf<ModalProps>();
47+
48+
expectTypeOf({
49+
open: true,
50+
"aria-label": "Label",
51+
children: "Mangler onClose",
52+
}).not.toMatchTypeOf<ModalProps>();
53+
54+
expectTypeOf({
55+
open: true,
56+
onClose: () => null,
57+
children: "Mangler label",
58+
}).not.toMatchTypeOf<ModalProps>();
59+
60+
expectTypeOf({
61+
header: { heading: "Label" },
62+
open: true,
63+
children: "Mangler onClose",
64+
}).not.toMatchTypeOf<ModalProps>();
65+
66+
expectTypeOf({
67+
header: { heading: "Label" },
68+
"aria-label": "Label",
69+
"aria-labelledby": "Label",
70+
children: "For mange labels",
71+
}).not.toMatchTypeOf<ModalProps>();
72+
73+
expectTypeOf({
74+
"aria-label": "Label",
75+
"aria-labelledby": "Label",
76+
children: "For mange labels",
77+
}).not.toMatchTypeOf<ModalProps>();
78+
});

‎@navikt/core/react/src/modal/types.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,25 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
8181
// Require onClose if you use open & Require either header, aria-labelledby or aria-label
8282
export type ModalProps = ModalPropsBase &
8383
(
84-
| { open?: never }
85-
| { open: boolean | undefined; onClose: ModalPropsBase["onClose"] }
84+
| { onClose: ModalPropsBase["onClose"]; open: boolean | undefined }
85+
| { onClose?: ModalPropsBase["onClose"]; open?: never }
8686
) &
8787
(
88-
| { header: ModalPropsBase["header"] }
88+
| {
89+
header: ModalPropsBase["header"];
90+
"aria-labelledby": string;
91+
"aria-label"?: never;
92+
}
93+
| {
94+
header: ModalPropsBase["header"];
95+
"aria-label": string;
96+
"aria-labelledby"?: never;
97+
}
98+
| {
99+
header: ModalPropsBase["header"];
100+
"aria-labelledby"?: never;
101+
"aria-label"?: never;
102+
}
89103
| { "aria-labelledby": string; "aria-label"?: never }
90104
| { "aria-labelledby"?: never; "aria-label": string }
91105
);

‎@navikt/core/react/src/overlays/portal/Portal.stories.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212

1313
export const Default = () => {
1414
return (
15-
<Box background="surface-neutral-subtle" border>
15+
<Box background="surface-neutral-subtle">
1616
<h1>In regular DOM tree</h1>
1717
<p>
1818
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
@@ -65,7 +65,10 @@ export const CustomPortalRootFromProvider = () => {
6565
<p>This is mounted to Tree B, while created inside Tree A</p>
6666
</Portal>
6767
</Box>
68-
<Box background="surface-alt-3-subtle" ref={setPortalContainer}>
68+
<Box
69+
background="surface-alt-3-subtle"
70+
ref={(el) => el && setPortalContainer(el)}
71+
>
6972
<h1>Tree B</h1>
7073
</Box>
7174
</Box>
@@ -75,7 +78,7 @@ export const CustomPortalRootFromProvider = () => {
7578

7679
export const AsChild = () => {
7780
return (
78-
<Box background="surface-neutral-subtle" border>
81+
<Box background="surface-neutral-subtle">
7982
<h1>In regular DOM tree</h1>
8083
<p>
8184
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus

‎@navikt/core/react/tests/vitest.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ export default defineConfig({
66
globals: true,
77
setupFiles: "./tests/setup.ts",
88
environment: "jsdom",
9+
typecheck: {
10+
enabled: true,
11+
},
912
},
1013
});

0 commit comments

Comments
 (0)