Skip to content

Commit 5b71554

Browse files
danhollickdanhollick
committed
WIP
1 parent 51f80b7 commit 5b71554

File tree

2 files changed

+116
-20
lines changed

2 files changed

+116
-20
lines changed

‎src/pages/docs/v4-beta.mdx

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1099,26 +1099,8 @@ This works with any variant where it makes sense, including `group-*`, `peer-*`,
10991099

11001100
The new `starting` variant adds support for the new CSS `@starting-style` feature, making it possible to transition element properties when an element is first displayed:
11011101

1102-
```html {{example: {hint: 'Click the button to see the popover animate in'}}}
1103-
<div class="relative py-8 grid justify-center">
1104-
<button popovertarget="my-popover" class="rounded-lg bg-blue-600 hover:bg-blue-500 text-white shadow px-2.5 py-1 font-semibold">Check for updates</button>
1105-
<div popover id="my-popover" class="rounded-md bg-blue-50 p-4 opacity-0 transition-all [transition-behavior:allow-discrete] duration-500 [&:is([open],:popover-open)]:opacity-100 [&:is([open],:popover-open)]:my-0 [&:is([open],:popover-open)]:mt-auto [&:is([open],:popover-open)]:mb-4 [@starting-style]:[&:is([open],:popover-open)]:opacity-0 ">
1106-
<div class="flex">
1107-
<div class="shrink-0">
1108-
<svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" /></svg>
1109-
</div>
1110-
<div class="ml-3 flex-1 md:flex md:justify-between">
1111-
<p class="text-sm text-blue-700">A new software update is available: v2.0.4.</p>
1112-
<p class="mt-3 text-sm md:mt-0 md:ml-6">
1113-
<a href="#" class="font-medium whitespace-nowrap text-blue-700 hover:text-blue-600">
1114-
Update
1115-
<span aria-hidden="true"> &rarr;</span>
1116-
</a>
1117-
</p>
1118-
</div>
1119-
</div>
1120-
</div>
1121-
</div>
1102+
```html {{example: {hint: 'Click the button to see the popover animate in', p: 'none'}}}
1103+
<iframe class="w-full h-[340px]" src="/examples/v4-docs-starting-style-example"></iframe>
11221104
```
11231105

11241106
```html

‎src/pages/examples/v4-docs-starting-style-example.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
export default function StartingStyleDemo() {
2+
return (
3+
<div className="grid justify-center h-[340px] items-center">
4+
<button
5+
popovertarget="my-popover"
6+
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
7+
>
8+
Check for updates
9+
</button>
10+
11+
<div
12+
popover="auto"
13+
id="my-popover"
14+
className="opacity-0 [transition-behavior:allow-discrete] duration-500 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0 relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-lg sm:p-6"
15+
>
16+
<div>
17+
<div class="mx-auto flex size-12 items-center justify-center rounded-full bg-indigo-50 dark:bg-indigo-600/10">
18+
<svg
19+
class="size-5 text-indigo-400 dark:text-indigo-600"
20+
viewBox="0 0 20 20"
21+
fill="currentColor"
22+
aria-hidden="true"
23+
data-slot="icon"
24+
>
25+
<path
26+
fill-rule="evenodd"
27+
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
28+
clip-rule="evenodd"
29+
/>
30+
</svg>
31+
</div>
32+
<div class="mt-3 text-center sm:mt-5">
33+
<h3 class="text-base font-semibold text-gray-900 dark:text-white" id="modal-title">
34+
Update available
35+
</h3>
36+
<div class="mt-2">
37+
<p class="text-sm text-gray-500 dark:text-gray-200">
38+
A new software update is available: <span className="font-semibold">v2.0.4.</span>{' '}
39+
<br />
40+
Click the button below to install it.
41+
</p>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="mt-5 ">
46+
<button
47+
type="button"
48+
class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
49+
>
50+
Install
51+
</button>
52+
</div>
53+
</div>
54+
</div>
55+
)
56+
}
57+
58+
;<div
59+
popover="auto"
60+
id="my-popover"
61+
class="relative z-10 [transition-behavior:allow-discrete] transition-all duration-500 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0"
62+
aria-labelledby="modal-title"
63+
role="dialog"
64+
aria-modal="true"
65+
>
66+
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" aria-hidden="true"></div>
67+
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
68+
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
69+
<div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
70+
<div>
71+
<div class="mx-auto flex size-12 items-center justify-center rounded-full bg-green-100">
72+
<svg
73+
class="size-6 text-green-600"
74+
fill="none"
75+
viewBox="0 0 24 24"
76+
stroke-width="1.5"
77+
stroke="currentColor"
78+
aria-hidden="true"
79+
data-slot="icon"
80+
>
81+
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
82+
</svg>
83+
</div>
84+
<div class="mt-3 text-center sm:mt-5">
85+
<h3 class="text-base font-semibold text-gray-900" id="modal-title">
86+
Payment successful
87+
</h3>
88+
<div class="mt-2">
89+
<p class="text-sm text-gray-500">
90+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam laudantium
91+
explicabo pariatur iste dolorem animi vitae error totam. At sapiente aliquam
92+
accusamus facere veritatis.
93+
</p>
94+
</div>
95+
</div>
96+
</div>
97+
<div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
98+
<button
99+
type="button"
100+
class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
101+
>
102+
Deactivate
103+
</button>
104+
<button
105+
type="button"
106+
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
107+
>
108+
Cancel
109+
</button>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
</div>

0 commit comments

Comments
 (0)