Rename data-from -> data-closed and data-exit -> data-leave (#…

…3285) * rename `data-from` to `data-closed`, `data-exit` to `data-leave` * update changelog
tailwindlabs · Jun 12, 2024 · 2092049 · 2092049
1 parent 1e9a3f1
commit 2092049
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 84 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add ability to render multiple `<Dialog />` components at once (without nesting them) ([#3242](https://github.com/tailwindlabs/headlessui/pull/3242))
-- Add CSS based transitions using `data-*` attributes ([#3273](https://github.com/tailwindlabs/headlessui/pull/3273))
+- Add CSS based transitions using `data-*` attributes ([#3273](https://github.com/tailwindlabs/headlessui/pull/3273), [#3285](https://github.com/tailwindlabs/headlessui/pull/3285))
 
 ### Fixed
 

diff --git a/packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap b/packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap
@@ -5,25 +5,25 @@ exports[`Setup API nested should be possible to change the underlying DOM tag of
   class="My Page"
 >
   <article
+    data-closed=""
     data-enter=""
-    data-from=""
-    data-headlessui-state="from enter transition"
+    data-headlessui-state="closed enter transition"
     data-transition=""
     style=""
   >
     <aside
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
       style=""
     >
       Sidebar
     </aside>
     <section
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
       style=""
     >
@@ -38,25 +38,25 @@ exports[`Setup API nested should be possible to change the underlying DOM tag of
   class="My Page"
 >
   <div
+    data-closed=""
     data-enter=""
-    data-from=""
-    data-headlessui-state="from enter transition"
+    data-headlessui-state="closed enter transition"
     data-transition=""
     style=""
   >
     <aside
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
       style=""
     >
       Sidebar
     </aside>
     <section
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
       style=""
     >
@@ -71,25 +71,25 @@ exports[`Setup API nested should be possible to nest transition components 1`] =
   class="My Page"
 >
   <div
+    data-closed=""
     data-enter=""
-    data-from=""
-    data-headlessui-state="from enter transition"
+    data-headlessui-state="closed enter transition"
     data-transition=""
     style=""
   >
     <div
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
       style=""
     >
       Sidebar
     </div>
     <div
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
       style=""
     >
@@ -104,23 +104,23 @@ exports[`Setup API nested should be possible to use render props on the Transiti
   class="My Page"
 >
   <article
+    data-closed=""
     data-enter=""
-    data-from=""
-    data-headlessui-state="from enter transition"
+    data-headlessui-state="closed enter transition"
     data-transition=""
   >
     <aside
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
     >
       Sidebar
     </aside>
     <section
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
     >
       Content
@@ -134,24 +134,24 @@ exports[`Setup API nested should be possible to use render props on the Transiti
   class="My Page"
 >
   <div
+    data-closed=""
     data-enter=""
-    data-from=""
-    data-headlessui-state="from enter transition"
+    data-headlessui-state="closed enter transition"
     data-transition=""
     style=""
   >
     <aside
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
     >
       Sidebar
     </aside>
     <section
+      data-closed=""
       data-enter=""
-      data-from=""
-      data-headlessui-state="from enter transition"
+      data-headlessui-state="closed enter transition"
       data-transition=""
     >
       Content
@@ -168,9 +168,9 @@ exports[`Setup API nested should yell at us when we forgot to forward the ref on
 
 exports[`Setup API shallow should be possible to change the underlying DOM tag 1`] = `
 <span
+  data-closed=""
   data-enter=""
-  data-from=""
-  data-headlessui-state="from enter transition"
+  data-headlessui-state="closed enter transition"
   data-transition=""
   style=""
 >
@@ -180,9 +180,9 @@ exports[`Setup API shallow should be possible to change the underlying DOM tag 1
 
 exports[`Setup API shallow should be possible to use a render prop 1`] = `
 <span
+  data-closed=""
   data-enter=""
-  data-from=""
-  data-headlessui-state="from enter transition"
+  data-headlessui-state="closed enter transition"
   data-transition=""
 >
   Children
@@ -192,9 +192,9 @@ exports[`Setup API shallow should be possible to use a render prop 1`] = `
 exports[`Setup API shallow should passthrough all the props (that we do not use internally) 1`] = `
 <div
   class="text-blue-400"
+  data-closed=""
   data-enter=""
-  data-from=""
-  data-headlessui-state="from enter transition"
+  data-headlessui-state="closed enter transition"
   data-transition=""
   id="root"
   style=""
@@ -206,9 +206,9 @@ exports[`Setup API shallow should passthrough all the props (that we do not use
 exports[`Setup API shallow should passthrough all the props (that we do not use internally) even when using an \`as\` prop 1`] = `
 <a
   class="text-blue-400"
+  data-closed=""
   data-enter=""
-  data-from=""
-  data-headlessui-state="from enter transition"
+  data-headlessui-state="closed enter transition"
   data-transition=""
   href="/"
   style=""
@@ -219,9 +219,9 @@ exports[`Setup API shallow should passthrough all the props (that we do not use
 
 exports[`Setup API shallow should render another component if the \`as\` prop is used and its children by default 1`] = `
 <a
+  data-closed=""
   data-enter=""
-  data-from=""
-  data-headlessui-state="from enter transition"
+  data-headlessui-state="closed enter transition"
   data-transition=""
   style=""
 >
@@ -235,9 +235,9 @@ exports[`Setup API shallow should yell at us when we forget to forward the ref w
 
 exports[`Setup API transition classes should be possible to passthrough the transition classes 1`] = `
 <div
+  data-closed=""
   data-enter=""
-  data-from=""
-  data-headlessui-state="from enter transition"
+  data-headlessui-state="closed enter transition"
   data-transition=""
   style=""
 >
@@ -248,8 +248,8 @@ exports[`Setup API transition classes should be possible to passthrough the tran
 exports[`Setup API transition classes should be possible to passthrough the transition classes and immediately apply the enter transitions when appear is set to true 1`] = `
 <div
   class="enter enter-from"
-  data-from=""
-  data-headlessui-state="from"
+  data-closed=""
+  data-headlessui-state="closed"
   style=""
 >
   Children

diff --git a/packages/@headlessui-react/src/components/transition/transition.test.tsx b/packages/@headlessui-react/src/components/transition/transition.test.tsx
@@ -358,9 +358,9 @@ describe('Setup API', () => {
           <div
             class="foo1
         foo2"
+            data-closed=""
             data-enter=""
-            data-from=""
-            data-headlessui-state="from enter transition"
+            data-headlessui-state="closed enter transition"
             data-transition=""
             style=""
           >
@@ -382,9 +382,9 @@ describe('Setup API', () => {
            <div
              class="foo1
          foo2 foo1 foo2 leave"
+             data-closed=""
              data-enter=""
-             data-from=""
-             data-headlessui-state="from enter transition"
+             data-headlessui-state="closed enter transition"
              data-transition=""
              style=""
            >