Skip to content

Commit 1d941cf

Browse files
Gregor WoiwodeGregor Woiwode
Gregor Woiwode
authored and
Gregor Woiwode
committed
feat(tailwind:dialog): add full-screen example
1 parent 9388ebe commit 1d941cf

File tree

5 files changed

+206
-53
lines changed

5 files changed

+206
-53
lines changed

‎apps/website/src/routes/docs/tailwind/(components)/dialog/examples.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,68 @@ export const Example01 = component$(() => {
3333
export const Example02 = component$(() => {
3434
const dialogRef = useSignal<Dialog.DialogRef>();
3535

36+
return (
37+
<PreviewCodeExample>
38+
<div q:slot="actualComponent">
39+
<Button onClick$={() => dialogRef.value?.open()}>Open Dialog</Button>
40+
41+
<Dialog.Root ref={dialogRef}>
42+
<Dialog.Header>
43+
<h2 id="dialog-heading">Hello 👋</h2>
44+
</Dialog.Header>
45+
<Dialog.Content>
46+
<p id="dialog-text">Do you agree to the terms our services?</p>
47+
</Dialog.Content>
48+
<Dialog.Footer>
49+
<Button onClick$={() => dialogRef.value?.close()} autoFocus>
50+
Disagree
51+
</Button>
52+
<Button onClick$={() => dialogRef.value?.close()}>Agree</Button>
53+
</Dialog.Footer>
54+
</Dialog.Root>
55+
</div>
56+
57+
<div q:slot="codeExample">
58+
<Slot />
59+
</div>
60+
</PreviewCodeExample>
61+
);
62+
});
63+
64+
export const Example_FullScreen = component$(() => {
65+
const dialogRef = useSignal<Dialog.DialogRef>();
66+
67+
return (
68+
<PreviewCodeExample>
69+
<div q:slot="actualComponent">
70+
<Button onClick$={() => dialogRef.value?.open()}>Open Dialog</Button>
71+
72+
<Dialog.Root ref={dialogRef} fullScreen={true}>
73+
<Dialog.Header>
74+
<h2 id="dialog-heading">Hello 👋</h2>
75+
</Dialog.Header>
76+
<Dialog.Content>
77+
<p id="dialog-text">Do you agree to the terms our services?</p>
78+
</Dialog.Content>
79+
<Dialog.Footer>
80+
<Button onClick$={() => dialogRef.value?.close()} autoFocus>
81+
Disagree
82+
</Button>
83+
<Button onClick$={() => dialogRef.value?.close()}>Agree</Button>
84+
</Dialog.Footer>
85+
</Dialog.Root>
86+
</div>
87+
88+
<div q:slot="codeExample">
89+
<Slot />
90+
</div>
91+
</PreviewCodeExample>
92+
);
93+
});
94+
95+
export const Example_ScrollingLongContent = component$(() => {
96+
const dialogRef = useSignal<Dialog.DialogRef>();
97+
3698
return (
3799
<PreviewCodeExample>
38100
<div q:slot="actualComponent">

‎apps/website/src/routes/docs/tailwind/(components)/dialog/index.mdx‎

Lines changed: 90 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ title: Qwik UI | Dialog
33
---
44

55
import { Dialog, Button } from '@qwik-ui/tailwind';
6-
import { Example01, Example02 } from './examples';
6+
import {
7+
Example01,
8+
Example02,
9+
Example_ScrollingLongContent,
10+
Example_FullScreen,
11+
} from './examples';
712
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
813

914
# Dialog
@@ -17,8 +22,8 @@ import { KeyboardInteractionTable } from '../../../../../components/keyboard-int
1722
export const myComponent = component$(() => {
1823
const dialogRef = useSignal<Dialog.DialogRef>();
1924

20-
return <>
21-
<Button onClick$={() => dialogRef.value?.open()}>Open Dialog</Button>
25+
return <>
26+
<Button onClick$={() => dialogRef.value?.open()}>Open Dialog</Button>
2227

2328
<Dialog.Root ref={dialogRef}>
2429
<Dialog.Header>
@@ -31,62 +36,120 @@ export const myComponent = component$(() => {
3136
<button onClick$={() => dialogRef.value?.close()}>Close</button>
3237
</Dialog.Footer>
3338
</Dialog.Root>
39+
3440
</>
3541
})
3642
```
3743
</Example01>
3844

3945
## Alerts
40-
> t.b.d
46+
47+
<Example02>
48+
```tsx
49+
export const myComponent = component$(() => {
50+
const dialogRef = useSignal<Dialog.DialogRef>();
51+
52+
return <>
53+
<Button onClick$={() => dialogRef.value?.open()}>Open Dialog</Button>
54+
55+
<Dialog.Root ref={dialogRef}>
56+
<Dialog.Header>
57+
<h2 id="dialog-heading">Hello 👋</h2>
58+
</Dialog.Header>
59+
<Dialog.Content>
60+
<p id="dialog-text">Do you agree to the terms our services?</p>
61+
</Dialog.Content>
62+
<Dialog.Footer>
63+
<button onClick$={() => dialogRef.value?.close()}>Close</button>
64+
</Dialog.Footer>
65+
</Dialog.Root>
66+
67+
</>
68+
})
69+
```
70+
</Example02>
4171

4272
## Transistions
73+
4374
> t.b.d
4475
4576
## Form dialogs
77+
4678
> t.b.d
4779
4880
## Customization
81+
4982
> t.b.d
5083
5184
## Optional sizes
85+
5286
> t.b.d
5387
5488
## Full-Screen
55-
> t.b.d
89+
90+
<Example_FullScreen>
91+
92+
```tsx
93+
export const myComponent = component$(() => {
94+
const dialogRef = useSignal<Dialog.DialogRef>();
95+
96+
return (
97+
<>
98+
<Button onClick$={() => dialogRef.value?.open()}>Open Dialog</Button>
99+
100+
<Dialog.Root ref={dialogRef} fullScreen={true}>
101+
<Dialog.Header>
102+
<h2 id="dialog-heading">Hello 👋</h2>
103+
</Dialog.Header>
104+
<Dialog.Content>
105+
<p id="dialog-text">Do you agree to the terms our services?</p>
106+
</Dialog.Content>
107+
<Dialog.Footer>
108+
<button onClick$={() => dialogRef.value?.close()}>Close</button>
109+
</Dialog.Footer>
110+
</Dialog.Root>
111+
</>
112+
);
113+
});
114+
```
115+
116+
</Example_FullScreen>
56117

57118
## Responsive Full-Screen
119+
58120
> t.b.d
59121
60122
## Scrolling long content
61123

62-
<Example02>
124+
<Example_ScrollingLongContent>
125+
63126
```tsx
64127
export const myComponent = component$(() => {
65128
const dialogRef = useSignal<Dialog.DialogRef>();
66129

67-
return <>
68-
<Dialog.Root ref={dialogRef}>
69-
<Dialog.Header>
70-
<h2>Poems</h2>
71-
<small>By ELIZABETH BISHOP</small>
72-
</Dialog.Header>
73-
<Dialog.Content>
74-
<p>...</p>
75-
<p>...</p>
76-
<p>...</p>
77-
<p>...</p>
78-
</Dialog.Content>
79-
<Dialog.Footer>
80-
<button onClick$={() => dialogRef.value?.close()}>
81-
Close
82-
</button>
83-
</Dialog.Footer>
84-
</Dialog.Root>
85-
</>
86-
})
130+
return (
131+
<>
132+
<Dialog.Root ref={dialogRef}>
133+
<Dialog.Header>
134+
<h2>Poems</h2>
135+
<small>By ELIZABETH BISHOP</small>
136+
</Dialog.Header>
137+
<Dialog.Content>
138+
<p>...</p>
139+
<p>...</p>
140+
<p>...</p>
141+
<p>...</p>
142+
</Dialog.Content>
143+
<Dialog.Footer>
144+
<button onClick$={() => dialogRef.value?.close()}>Close</button>
145+
</Dialog.Footer>
146+
</Dialog.Root>
147+
</>
148+
);
149+
});
87150
```
88151

89-
</Example02>
152+
</Example_ScrollingLongContent>
90153

91154
## Accessibility
92155

‎packages/kit-headless/src/components/dialog/dialog.root.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,8 @@
22
width: 100vw;
33
height: 100vh;
44
}
5+
6+
.full-screen:modal {
7+
max-width: 100vw;
8+
height: 100vh;
9+
}

‎packages/kit-tailwind/src/components/dialog/dialog.root.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
*
3+
* We use DaisyUI's css classes for modal to style the dialog.
4+
* DaisyUI builds on top of Div-Elements. We use the <dialog>-Element.
5+
*
6+
* That's why we need to move the backdrop styling to the dialog's
7+
* backdrop-pseudo-element.
8+
*
9+
*/
10+
11+
.modal--backdrop {
12+
background-color: initial;
13+
}
14+
15+
.modal--backdrop::backdrop {
16+
background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
17+
18+
/* copied from daisy-ui modal */
19+
20+
--n: 218.18 18.033% 11.961%;
21+
--nf: 222.86 17.073% 8.0392%;
22+
--tw-bg-opacity: 0.4;
23+
}
24+
25+
.modal-box--full-screen {
26+
width: inherit;
27+
max-width: unset;
28+
29+
height: inherit;
30+
max-height: unset;
31+
}

‎packages/kit-tailwind/src/components/dialog/dialog.tsx‎

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,14 @@ import {
77
useVisibleTask$,
88
} from '@builder.io/qwik';
99
import { Dialog } from '@qwik-ui/headless';
10+
import styles from './dialog.root.css?inline';
1011

1112
export type DialogRef = Dialog.DialogRef;
1213

1314
export const Root = component$((props: Dialog.RootProps) => {
14-
/**
15-
*
16-
* We use DaisyUI's css classes for modal to style the dialog.
17-
* DaisyUI builds on top of Div-Elements. We use the <dialog>-Element.
18-
*
19-
* That's why we need to move the backdrop styling to the dialog's
20-
* backdrop-pseudo-element.
21-
*
22-
*/
23-
useStyles$(`
24-
.modal--backdrop {
25-
background-color: initial;
26-
}
27-
28-
.modal--backdrop::backdrop {
29-
background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
30-
31-
/* copied from daisy-ui modal */
32-
33-
--n: 218.18 18.033% 11.961%;
34-
--nf: 222.86 17.073% 8.0392%;
35-
--tw-bg-opacity: .4;
36-
}
37-
`);
15+
// We cannot use useStylesScoped$ here because we need to override DaisyUI's classes
16+
// which are global.
17+
useStyles$(styles);
3818

3919
const dialogRef = useSignal<Dialog.DialogRef>();
4020

@@ -55,14 +35,18 @@ export const Root = component$((props: Dialog.RootProps) => {
5535
props.ref.value = dialogRef.value;
5636
});
5737

38+
const classModalBoxFullScreen = useComputed$(() => {
39+
return props.fullScreen ? 'modal-box--full-screen' : '';
40+
});
41+
5842
return (
5943
<>
6044
<Dialog.Root
6145
{...props}
6246
class={`${dialogClass.value} modal--backdrop`}
6347
ref={dialogRef}
6448
>
65-
<div class="modal-box">
49+
<div class={`modal-box ${classModalBoxFullScreen.value}`}>
6650
<Slot />
6751
</div>
6852
</Dialog.Root>
@@ -79,7 +63,15 @@ export const Header = component$(() => {
7963
</Dialog.Header>
8064
);
8165
});
82-
export const Content = Dialog.Content;
66+
export const Content = component$(() => {
67+
return (
68+
<Dialog.Content>
69+
<div class="py-4">
70+
<Slot />
71+
</div>
72+
</Dialog.Content>
73+
);
74+
});
8375

8476
export const Footer = component$(() => {
8577
return (

0 commit comments

Comments
 (0)