Skip to content

Commit 130c5f4

Browse files
thejacksheltonthejackshelton
committed
docs: improve docs examples
1 parent 24f27fd commit 130c5f4

26 files changed

+229
-188
lines changed

‎.changeset/few-keys-argue.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,7 @@ This computes the accessible name from the string children of the modal.
3939
### <Modal.Description>
4040

4141
This computes the accessible description from the string children of the modal.
42+
43+
### <Modal.Close>
44+
45+
This is a button that closes the modal when clicked.

‎apps/website/src/routes/docs/headless/introduction/snippets/headless-css.css

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.modal {
1+
.modal-panel {
22
min-width: 50rem;
33
min-height: 50rem;
44
border-radius: 5px;
@@ -7,15 +7,3 @@
77
0 6px 6px rgba(0, 0, 0, 0.23);
88
padding: 1rem;
99
}
10-
11-
.modal-header {
12-
margin-bottom: 1rem;
13-
}
14-
15-
.modal-body {
16-
margin-bottom: 1rem;
17-
}
18-
19-
.modal-footer {
20-
text-align: right;
21-
}

‎apps/website/src/routes/docs/headless/introduction/snippets/headless-jsx.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Modal } from '@qwik-ui/headless';
33
import styles from './headless-css.css?inline';
44

55
export default component$(() => {
6-
const showSig = useSignal(false);
76
useStyles$(styles);
87

9-
return <Modal.Panel class="modal" bind:show={showSig}></Modal.Panel>;
8+
return (
9+
<Modal.Root>
10+
<Modal.Trigger>Open Modal</Modal.Trigger>
11+
<Modal.Panel class="modal-panel">Modal Content</Modal.Panel>
12+
</Modal.Root>
13+
);
1014
});

‎apps/website/src/routes/docs/headless/modal/examples/alert-dialog.tsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$ } from '@builder.io/qwik';
22
import { Modal } from '@qwik-ui/headless';
33

44
export default component$(() => {
5-
const showSig = useSignal(false);
6-
75
return (
8-
<Modal.Root alert bind:show={showSig}>
9-
<Modal.Trigger class="modal-trigger" onClick$={() => (showSig.value = true)}>
10-
Deactivate
11-
</Modal.Trigger>
12-
<Modal.Panel class="modal">
6+
<Modal.Root alert>
7+
<Modal.Trigger class="modal-trigger">Deactivate</Modal.Trigger>
8+
<Modal.Panel class="modal-panel">
139
<Modal.Title>Deactive Account</Modal.Title>
1410
<Modal.Description>
1511
Are you sure you want to deactivate your account?
1612
</Modal.Description>
1713
<footer>
18-
<button onClick$={() => (showSig.value = false)}>Cancel</button>
19-
<button onClick$={() => (showSig.value = false)}>Delete</button>
14+
<Modal.Close>Cancel</Modal.Close>
15+
<Modal.Close>Delete</Modal.Close>
2016
</footer>
21-
<button class="modal-close" onClick$={() => (showSig.value = false)}>
22-
+
23-
</button>
17+
<Modal.Close class="modal-close">+</Modal.Close>
2418
</Modal.Panel>
2519
</Modal.Root>
2620
);

‎apps/website/src/routes/docs/headless/modal/examples/animatable.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Modal, Label } from '@qwik-ui/headless';
33
import styles from '../snippets/animation.css?inline';
44

55
export default component$(() => {
66
useStyles$(styles);
7-
const isOpen = useSignal(false);
87

98
return (
10-
<Modal.Root bind:show={isOpen}>
9+
<Modal.Root>
1110
<Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
12-
<Modal.Panel class="modal modal-animation">
11+
<Modal.Panel class="modal-panel modal-animation">
1312
<Modal.Title>Edit Profile</Modal.Title>
1413
<Modal.Description>
1514
You can update your profile here. Hit the save button when finished.
@@ -23,8 +22,8 @@ export default component$(() => {
2322
<input type="text" placeholder="[email protected]" />
2423
</Label>
2524
<footer>
26-
<button onClick$={() => (isOpen.value = false)}>Cancel</button>
27-
<button onClick$={() => (isOpen.value = false)}>Save Changes</button>
25+
<Modal.Close>Cancel</Modal.Close>
26+
<Modal.Close>Save Changes</Modal.Close>
2827
</footer>
2928
</Modal.Panel>
3029
</Modal.Root>

‎apps/website/src/routes/docs/headless/modal/examples/auto-focus.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Modal, Label } from '@qwik-ui/headless';
33
import styles from '../snippets/modal.css?inline';
44

55
export default component$(() => {
66
useStyles$(styles);
7-
const isOpen = useSignal(false);
87

98
return (
10-
<Modal.Root bind:show={isOpen}>
9+
<Modal.Root>
1110
<Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
12-
<Modal.Panel class="modal">
11+
<Modal.Panel class="modal-panel">
1312
<Modal.Title>Edit Profile</Modal.Title>
1413
<Modal.Description>
1514
You can update your profile here. Hit the save button when finished.
@@ -23,8 +22,8 @@ export default component$(() => {
2322
<input autofocus type="text" placeholder="[email protected]" />
2423
</Label>
2524
<footer>
26-
<button onClick$={() => (isOpen.value = false)}>Cancel</button>
27-
<button onClick$={() => (isOpen.value = false)}>Save Changes</button>
25+
<Modal.Close>Cancel</Modal.Close>
26+
<Modal.Close>Save Changes</Modal.Close>
2827
</footer>
2928
</Modal.Panel>
3029
</Modal.Root>

‎apps/website/src/routes/docs/headless/modal/examples/backdrop-close.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Modal, Label } from '@qwik-ui/headless';
33
import styles from '../snippets/modal.css?inline';
44

55
export default component$(() => {
66
useStyles$(styles);
7-
const isOpen = useSignal(false);
87

98
return (
10-
<Modal.Root closeOnBackdropClick={false} bind:show={isOpen}>
9+
<Modal.Root closeOnBackdropClick={false}>
1110
<Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
12-
<Modal.Panel class="modal">
11+
<Modal.Panel class="modal-panel">
1312
<Modal.Title>Edit Profile</Modal.Title>
1413
<Modal.Description>
1514
You can update your profile here. Hit the save button when finished.
@@ -23,8 +22,8 @@ export default component$(() => {
2322
<input type="text" placeholder="[email protected]" />
2423
</Label>
2524
<footer>
26-
<button onClick$={() => (isOpen.value = false)}>Cancel</button>
27-
<button onClick$={() => (isOpen.value = false)}>Save Changes</button>
25+
<Modal.Close>Cancel</Modal.Close>
26+
<Modal.Close>Save Changes</Modal.Close>
2827
</footer>
2928
</Modal.Panel>
3029
</Modal.Root>

‎apps/website/src/routes/docs/headless/modal/examples/backdrop.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Modal, Label } from '@qwik-ui/headless';
33
import styles from '../snippets/modal.css?inline';
44

55
export default component$(() => {
66
useStyles$(styles);
7-
const isOpen = useSignal(false);
87

98
return (
10-
<Modal.Root bind:show={isOpen}>
9+
<Modal.Root>
1110
<Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
12-
<Modal.Panel class="modal modal-backdrop">
11+
<Modal.Panel class="modal-panel modal-backdrop">
1312
<Modal.Title>Edit Profile</Modal.Title>
1413
<Modal.Description>
1514
You can update your profile here. Hit the save button when finished.
@@ -23,8 +22,8 @@ export default component$(() => {
2322
<input type="text" placeholder="[email protected]" />
2423
</Label>
2524
<footer>
26-
<button onClick$={() => (isOpen.value = false)}>Cancel</button>
27-
<button onClick$={() => (isOpen.value = false)}>Save Changes</button>
25+
<Modal.Close>Cancel</Modal.Close>
26+
<Modal.Close>Save Changes</Modal.Close>
2827
</footer>
2928
</Modal.Panel>
3029
</Modal.Root>

‎apps/website/src/routes/docs/headless/modal/examples/bottom-sheet.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Modal, Label } from '@qwik-ui/headless';
33
import styles from '../snippets/animation.css?inline';
44

55
export default component$(() => {
66
useStyles$(styles);
7-
const isOpen = useSignal(false);
87

98
return (
10-
<Modal.Root bind:show={isOpen}>
9+
<Modal.Root>
1110
<Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
12-
<Modal.Panel class="modal bottom-sheet">
11+
<Modal.Panel class="modal-panel bottom-sheet">
1312
<Modal.Title>Edit Profile</Modal.Title>
1413
<Modal.Description>
1514
You can update your profile here. Hit the save button when finished.
@@ -23,8 +22,8 @@ export default component$(() => {
2322
<input type="text" placeholder="[email protected]" />
2423
</Label>
2524
<footer>
26-
<button onClick$={() => (isOpen.value = false)}>Cancel</button>
27-
<button onClick$={() => (isOpen.value = false)}>Save Changes</button>
25+
<Modal.Close>Cancel</Modal.Close>
26+
<Modal.Close>Save Changes</Modal.Close>
2827
</footer>
2928
</Modal.Panel>
3029
</Modal.Root>

‎apps/website/src/routes/docs/headless/modal/examples/focus-trap.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Modal } from '@qwik-ui/headless';
33
import styles from '../snippets/modal.css?inline';
44

55
export default component$(() => {
66
useStyles$(styles);
7-
const isOpen = useSignal(false);
87

98
return (
10-
<Modal.Root bind:show={isOpen}>
9+
<Modal.Root>
1110
<Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
12-
<Modal.Panel class="modal">
11+
<Modal.Panel class="modal-panel">
1312
Modal Content
1413
<input placeholder="inside input" />
1514
<button>inside button</button>

0 commit comments

Comments
 (0)