Skip to content

Commit 2d03314

Browse files
serbyxpseanperez-xyzmaiieul
authored
fix(styled): modal data-open data-closed (#1050)
* fix leftover deprecated data-[state="open"] , data-[state="closed"] tailwind utilities and inline css for styled modal and accordian. Reflected changes in docs * add .changeset * chore: changeset --------- Co-authored-by: Sean Perez <[email protected]> Co-authored-by: maiieul <[email protected]>
1 parent 0ec4952 commit 2d03314

File tree

7 files changed

+27
-21
lines changed

7 files changed

+27
-21
lines changed

‎.changeset/green-news-crash.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'qwik-ui': patch
3+
'@qwik-ui/styled': patch
4+
---
5+
6+
FIX: global.css for correct Accordion data-open data-closed in animations, fix "leftover" styled Modal inlined tailwind to data-[open] data-[closed] from deprecated data-[state="open"] data=[state="closed"], and reflected the changes to the qwik-ui docs

‎apps/component-tests/src/global.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1367,11 +1367,11 @@ body {
13671367
It would make more sense to supply the user with the animation declaration in the docs.
13681368
*/
13691369
@layer utilities {
1370-
.accordion-animation-1[data-state='open'] {
1370+
.accordion-animation-1[data-open] {
13711371
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
13721372
}
13731373

1374-
.accordion-animation-1[data-state='closed'] {
1374+
.accordion-animation-1[data-closed] {
13751375
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
13761376
}
13771377
}

‎apps/website/src/global.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1376,15 +1376,15 @@ body {
13761376
min-height: 100%;
13771377
}
13781378

1379-
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
1379+
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
13801380
It would make more sense to supply the user with the animation declaration in the docs.
13811381
*/
13821382
@layer utilities {
1383-
.accordion-animation-1[data-state='open'] {
1383+
.accordion-animation-1[data-open] {
13841384
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
13851385
}
13861386

1387-
.accordion-animation-1[data-state='closed'] {
1387+
.accordion-animation-1[data-closed] {
13881388
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
13891389
}
13901390
}

‎apps/website/src/routes/docs/headless/install/examples/astro-accordion.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export default component$(() => {
66

77
useStyles$(`
88
.accordion-root {
9-
box-sizing: border-box;
10-
border-radius: 0.275rem;
11-
color: #ffffff;
9+
box-sizing: border-box;
10+
border-radius: 0.275rem;
11+
color: #ffffff;
1212
width: 250px;
1313
max-width: 500px;
1414
border: 1px solid #4B5563;
@@ -31,25 +31,25 @@ export default component$(() => {
3131
.accordion-trigger:hover {
3232
background-color: #374151;
3333
}
34-
34+
3535
.accordion-trigger.rounded-t-sm {
3636
border-top-left-radius: 0.125rem;
3737
border-top-right-radius: 0.125rem;
3838
}
39-
39+
4040
.accordion-trigger.rounded-b-sm {
4141
border-bottom-left-radius: 0.125rem;
4242
border-bottom-right-radius: 0.125rem;
4343
}
44-
44+
4545
.accordion-trigger.border-b-0 {
4646
border-bottom: 0;
4747
}
4848
4949
.accordion-trigger[aria-expanded="true"] {
5050
border-radius: 0;
5151
}
52-
52+
5353
.accordion-trigger svg {
5454
transition: transform 500ms ease;
5555
}
@@ -63,19 +63,19 @@ export default component$(() => {
6363
background-color: #1F2937;
6464
}
6565
66-
.accordion-slide[data-state='open'] {
66+
.accordion-slide[data-open] {
6767
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
6868
}
69-
70-
.accordion-slide[data-state='closed'] {
69+
70+
.accordion-slide[data-closed] {
7171
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
7272
}
7373
7474
.accordion-content p {
7575
background: #1F2937;
7676
padding: 0.5rem 1rem;
7777
}
78-
78+
7979
.accordion-item:last-of-type .accordion-content {
8080
border-bottom-left-radius: 0.275rem;
8181
border-bottom-right-radius: 0.275rem;

‎apps/website/src/routes/docs/styled/modal/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const panelVariants = cva(
4444
variants: {
4545
position: {
4646
center:
47-
'max-w-lg rounded-base shadow-lg data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
47+
'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
4848
top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
4949
bottom:
5050
'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',

‎packages/kit-styled/src/components/modal/modal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const panelVariants = cva(
1919
variants: {
2020
position: {
2121
center:
22-
'max-w-lg rounded-base shadow-lg data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
22+
'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
2323
top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
2424
bottom:
2525
'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',

‎packages/kit-styled/src/templates/global.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1362,15 +1362,15 @@ body {
13621362
min-height: 100%;
13631363
}
13641364

1365-
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
1365+
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
13661366
It would make more sense to supply the user with the animation declaration in the docs.
13671367
*/
13681368
@layer utilities {
1369-
.accordion-animation-1[data-state='open'] {
1369+
.accordion-animation-1[data-open] {
13701370
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
13711371
}
13721372

1373-
.accordion-animation-1[data-state='closed'] {
1373+
.accordion-animation-1[data-closed] {
13741374
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
13751375
}
13761376
}

0 commit comments

Comments
 (0)