Skip to content

Commit 896656b

Browse files
GregOnNetGregOnNet
committed
refactor(modal): remoce ModalTrigger & ModalClose
1 parent 54b69ab commit 896656b

File tree

5 files changed

+79
-102
lines changed

5 files changed

+79
-102
lines changed

‎apps/website/src/routes/docs/headless/(components)/modal/examples/first-example.tsx

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,71 @@
11
import { QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
22
import {
33
Modal,
4-
ModalPopup,
54
ModalContent,
65
ModalFooter,
76
ModalHeader,
8-
ModalTrigger,
9-
ModalClose,
7+
ModalPopup,
108
} from '@qwik-ui/headless';
119

1210
export default component$(() => {
13-
const showSignal = useSignal(false);
11+
const showSig = useSignal(false);
1412

1513
return (
16-
<Modal bind:show={showSignal}>
17-
<ModalTrigger class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white">
14+
<>
15+
<button
16+
onClick$={() => (showSig.value = true)}
17+
class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
18+
>
1819
Open Modal
19-
</ModalTrigger>
20-
<ModalPopup class="shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950">
21-
<ModalHeader class="relative">
22-
<h2 class="mb-2 text-lg font-bold">Edit Profile</h2>
23-
<p class="leading-5">
24-
You can update your profile here. Hit the save button when finished.
25-
</p>
26-
</ModalHeader>
27-
<ModalContent class="mb-2 py-4">
28-
<fieldset class="mb-1 flex items-baseline justify-between">
29-
<label for="name">Name</label>
30-
<input
31-
class="mt-2 rounded-sm px-4 py-[10px] text-white"
32-
id="name"
33-
type="text"
34-
placeholder="John Doe"
35-
/>
36-
</fieldset>
37-
<fieldset class="flex items-baseline justify-between">
38-
<label for="email">Email</label>
39-
<input
40-
class="mt-2 rounded-sm px-4 py-3 text-white"
41-
id="email"
42-
type="text"
43-
placeholder="[email protected]"
44-
/>
45-
</fieldset>
46-
</ModalContent>
47-
<ModalFooter class="flex justify-end gap-4">
48-
<button
49-
class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
50-
onClick$={() => (showSignal.value = false)}
51-
>
52-
Cancel
53-
</button>
54-
<button
55-
class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
56-
onClick$={() => (showSignal.value = false)}
57-
>
58-
Save Changes
20+
</button>
21+
<Modal bind:show={showSig}>
22+
<ModalPopup class="shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950">
23+
<ModalHeader class="relative">
24+
<h2 class="mb-2 text-lg font-bold">Edit Profile</h2>
25+
<p class="leading-5">
26+
You can update your profile here. Hit the save button when finished.
27+
</p>
28+
</ModalHeader>
29+
<ModalContent class="mb-2 py-4">
30+
<fieldset class="mb-1 flex items-baseline justify-between">
31+
<label for="name">Name</label>
32+
<input
33+
class="mt-2 rounded-sm px-4 py-[10px] text-white"
34+
id="name"
35+
type="text"
36+
placeholder="John Doe"
37+
/>
38+
</fieldset>
39+
<fieldset class="flex items-baseline justify-between">
40+
<label for="email">Email</label>
41+
<input
42+
class="mt-2 rounded-sm px-4 py-3 text-white"
43+
id="email"
44+
type="text"
45+
placeholder="[email protected]"
46+
/>
47+
</fieldset>
48+
</ModalContent>
49+
<ModalFooter class="flex justify-end gap-4">
50+
<button
51+
class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
52+
onClick$={() => (showSig.value = false)}
53+
>
54+
Cancel
55+
</button>
56+
<button
57+
class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
58+
onClick$={() => (showSig.value = false)}
59+
>
60+
Save Changes
61+
</button>
62+
</ModalFooter>
63+
<button onClick$={() => (showSig.value = false)} class="absolute right-6 top-6">
64+
<CloseIcon class="h-8 w-8" />
5965
</button>
60-
</ModalFooter>
61-
<ModalClose class="absolute right-6 top-6">
62-
<CloseIcon class="h-8 w-8" />
63-
</ModalClose>
64-
</ModalPopup>
65-
</Modal>
66+
</ModalPopup>
67+
</Modal>
68+
</>
6669
);
6770
});
6871

‎packages/kit-headless/src/components/modal/index.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
export * from './modal-close';
1+
export * from './modal';
22
export * from './modal-content';
33
export * from './modal-footer';
44
export * from './modal-header';
55
export * from './modal-popup';
6-
export * from './modal';
7-
export * from './modal-trigger';
86
export * from './types';

‎packages/kit-headless/src/components/modal/modal-close.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/kit-headless/src/components/modal/modal-trigger.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/kit-headless/src/components/modal/modal.spec.tsx

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$, useSignal } from '@builder.io/qwik';
22
import { Modal } from './modal';
3-
import { ModalClose } from './modal-close';
43
import { ModalContent } from './modal-content';
54
import { ModalFooter } from './modal-footer';
65
import { ModalHeader } from './modal-header';
76
import { ModalPopup } from './modal-popup';
8-
import { ModalTrigger } from './modal-trigger';
97

108
/**
119
* SUT - System under test
1210
* Reference: https://en.wikipedia.org/wiki/System_under_test
1311
*/
1412
const Sut = component$(() => {
13+
const showSig = useSignal(false);
1514
return (
16-
<Modal>
17-
<ModalTrigger>
18-
<button data-test="modal-trigger">Open Modal</button>
19-
</ModalTrigger>
20-
<ModalPopup>
21-
<ModalHeader>
22-
<h2 data-test="modal-header">Hello 👋</h2>
23-
</ModalHeader>
24-
<ModalContent>I am a simple Modal</ModalContent>
25-
<ModalFooter>
26-
<ModalClose>
27-
<button data-test="modal-close-button">Close Modal</button>
28-
</ModalClose>
29-
</ModalFooter>
30-
</ModalPopup>
31-
</Modal>
15+
<>
16+
<button onClick$={() => (showSig.value = true)} data-test="modal-trigger">
17+
Open Modal
18+
</button>
19+
<Modal>
20+
<ModalPopup>
21+
<ModalHeader>
22+
<h2 data-test="modal-header">Hello 👋</h2>
23+
</ModalHeader>
24+
<ModalContent>I am a simple Modal</ModalContent>
25+
<ModalFooter>
26+
<button
27+
onClick$={() => (showSig.value = false)}
28+
data-test="modal-close-button"
29+
>
30+
Close Modal
31+
</button>
32+
</ModalFooter>
33+
</ModalPopup>
34+
</Modal>
35+
</>
3236
);
3337
});
3438

0 commit comments

Comments
 (0)