fix(styled): modal data-open data-closed (#1050)

serbyxp · seanperez-xyz · maiieul · web-flow · commit 2d0331449d98 · 2025-06-01T18:53:27.000+02:00
* 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 &lt;seanperez.xyz@gmail.com&gt;
Co-authored-by: maiieul &lt;maieul.chevalier@rosa.be&gt;
diff --git a/.changeset/green-news-crash.md b/.changeset/green-news-crash.md
@@ -0,0 +1,6 @@
+---
+'qwik-ui': patch
+'@qwik-ui/styled': patch
+---
+
+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
diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
@@ -1367,11 +1367,11 @@ body {
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {
-  .accordion-animation-1[data-state='open'] {
+  .accordion-animation-1[data-open] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  .accordion-animation-1[data-state='closed'] {
+  .accordion-animation-1[data-closed] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
@@ -1376,15 +1376,15 @@ body {
   min-height: 100%;
 }
 
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {
-  .accordion-animation-1[data-state='open'] {
+  .accordion-animation-1[data-open] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  .accordion-animation-1[data-state='closed'] {
+  .accordion-animation-1[data-closed] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }
diff --git a/apps/website/src/routes/docs/headless/install/examples/astro-accordion.tsx b/apps/website/src/routes/docs/headless/install/examples/astro-accordion.tsx
@@ -6,9 +6,9 @@ export default component$(() => {
 
   useStyles$(`
     .accordion-root {
-        box-sizing: border-box; 
-        border-radius: 0.275rem; 
-        color: #ffffff; 
+        box-sizing: border-box;
+        border-radius: 0.275rem;
+        color: #ffffff;
         width: 250px;
         max-width: 500px;
         border: 1px solid #4B5563;
@@ -31,25 +31,25 @@ export default component$(() => {
     .accordion-trigger:hover {
         background-color: #374151;
       }
-      
+
       .accordion-trigger.rounded-t-sm {
         border-top-left-radius: 0.125rem;
         border-top-right-radius: 0.125rem;
       }
-      
+
       .accordion-trigger.rounded-b-sm {
         border-bottom-left-radius: 0.125rem;
         border-bottom-right-radius: 0.125rem;
       }
-      
+
       .accordion-trigger.border-b-0 {
         border-bottom: 0;
       }
 
       .accordion-trigger[aria-expanded="true"] {
         border-radius: 0;
       }
-      
+
       .accordion-trigger svg {
         transition: transform 500ms ease;
       }
@@ -63,19 +63,19 @@ export default component$(() => {
         background-color: #1F2937;
       }
 
-      .accordion-slide[data-state='open'] {
+      .accordion-slide[data-open] {
         animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
       }
-    
-      .accordion-slide[data-state='closed'] {
+
+      .accordion-slide[data-closed] {
         animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
       }
 
       .accordion-content p {
         background: #1F2937;
         padding: 0.5rem 1rem;
       }
-      
+
       .accordion-item:last-of-type .accordion-content {
         border-bottom-left-radius: 0.275rem;
         border-bottom-right-radius: 0.275rem;
diff --git a/apps/website/src/routes/docs/styled/modal/index.mdx b/apps/website/src/routes/docs/styled/modal/index.mdx
@@ -44,7 +44,7 @@ export const panelVariants = cva(
     variants: {
       position: {
         center:
-          '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',
+          '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',
         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',
         bottom:
           'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
diff --git a/packages/kit-styled/src/components/modal/modal.tsx b/packages/kit-styled/src/components/modal/modal.tsx
@@ -19,7 +19,7 @@ export const panelVariants = cva(
     variants: {
       position: {
         center:
-          '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',
+          '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',
         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',
         bottom:
           'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
@@ -1362,15 +1362,15 @@ body {
   min-height: 100%;
 }
 
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {
-  .accordion-animation-1[data-state='open'] {
+  .accordion-animation-1[data-open] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  .accordion-animation-1[data-state='closed'] {
+  .accordion-animation-1[data-closed] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1367,11 +1367,11 @@ body {`
`1367`	`1367`	`It would make more sense to supply the user with the animation declaration in the docs.`
`1368`	`1368`	`*/`
`1369`	`1369`	`@layer utilities {`
`1370`		`- .accordion-animation-1[data-state='open'] {`
	`1370`	`+ .accordion-animation-1[data-open] {`
`1371`	`1371`	`animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;`
`1372`	`1372`	`}`
`1373`	`1373`
`1374`		`- .accordion-animation-1[data-state='closed'] {`
	`1374`	`+ .accordion-animation-1[data-closed] {`
`1375`	`1375`	`animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;`
`1376`	`1376`	`}`
`1377`	`1377`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1376,15 +1376,15 @@ body {`
`1376`	`1376`	`min-height: 100%;`
`1377`	`1377`	`}`
`1378`	`1378`
`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.`
`1380`	`1380`	`It would make more sense to supply the user with the animation declaration in the docs.`
`1381`	`1381`	`*/`
`1382`	`1382`	`@layer utilities {`
`1383`		`- .accordion-animation-1[data-state='open'] {`
	`1383`	`+ .accordion-animation-1[data-open] {`
`1384`	`1384`	`animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;`
`1385`	`1385`	`}`
`1386`	`1386`
`1387`		`- .accordion-animation-1[data-state='closed'] {`
	`1387`	`+ .accordion-animation-1[data-closed] {`
`1388`	`1388`	`animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;`
`1389`	`1389`	`}`
`1390`	`1390`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1362,15 +1362,15 @@ body {`
`1362`	`1362`	`min-height: 100%;`
`1363`	`1363`	`}`
`1364`	`1364`
`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.`
`1366`	`1366`	`It would make more sense to supply the user with the animation declaration in the docs.`
`1367`	`1367`	`*/`
`1368`	`1368`	`@layer utilities {`
`1369`		`- .accordion-animation-1[data-state='open'] {`
	`1369`	`+ .accordion-animation-1[data-open] {`
`1370`	`1370`	`animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;`
`1371`	`1371`	`}`
`1372`	`1372`
`1373`		`- .accordion-animation-1[data-state='closed'] {`
	`1373`	`+ .accordion-animation-1[data-closed] {`
`1374`	`1374`	`animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;`
`1375`	`1375`	`}`
`1376`	`1376`	`}`