[1.x] Fix and standardise transitions (#293)

* Fix and standardise transitions * Remove redundant "transform" class * Standardise casing
laravel · Jun 21, 2023 · b4951b6 · b4951b6
1 parent b896952
commit b4951b6
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 48 deletions.
diff --git a/stubs/default/resources/views/components/dropdown.blade.php b/stubs/default/resources/views/components/dropdown.blade.php
@@ -28,11 +28,11 @@
 
     <div x-show="open"
             x-transition:enter="transition ease-out duration-200"
-            x-transition:enter-start="transform opacity-0 scale-95"
-            x-transition:enter-end="transform opacity-100 scale-100"
+            x-transition:enter-start="opacity-0 scale-95"
+            x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-75"
-            x-transition:leave-start="transform opacity-100 scale-100"
-            x-transition:leave-end="transform opacity-0 scale-95"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-95"
             class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
             style="display: none;"
             @click="open = false">

diff --git a/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx b/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx
@@ -61,11 +61,11 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
                 as={Fragment}
                 show={open}
                 enter="transition ease-out duration-200"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
                 leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
             >
                 <div
                     className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx b/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx
@@ -99,9 +99,10 @@ export default function UpdatePasswordForm({ className = '' }: { className?: str
 
                     <Transition
                         show={recentlySuccessful}
+                        enter="transition ease-in-out"
                         enterFrom="opacity-0"
+                        leave="transition ease-in-out"
                         leaveTo="opacity-0"
-                        className="transition ease-in-out"
                     >
                         <p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                     </Transition>

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx b/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
@@ -91,9 +91,10 @@ export default function UpdateProfileInformation({ mustVerifyEmail, status, clas
 
                     <Transition
                         show={recentlySuccessful}
+                        enter="transition ease-in-out"
                         enterFrom="opacity-0"
+                        leave="transition ease-in-out"
                         leaveTo="opacity-0"
-                        className="transition ease-in-out"
                     >
                         <p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                     </Transition>

diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.jsx b/stubs/inertia-react/resources/js/Components/Dropdown.jsx
@@ -53,11 +53,11 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
                 as={Fragment}
                 show={open}
                 enter="transition ease-out duration-200"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
                 leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
             >
                 <div
                     className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx
@@ -99,9 +99,10 @@ export default function UpdatePasswordForm({ className = '' }) {
 
                     <Transition
                         show={recentlySuccessful}
+                        enter="transition ease-in-out"
                         enterFrom="opacity-0"
+                        leave="transition ease-in-out"
                         leaveTo="opacity-0"
-                        className="transition ease-in-out"
                     >
                         <p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                     </Transition>

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx
@@ -89,9 +89,10 @@ export default function UpdateProfileInformation({ mustVerifyEmail, status, clas
 
                     <Transition
                         show={recentlySuccessful}
+                        enter="transition ease-in-out"
                         enterFrom="opacity-0"
+                        leave="transition ease-in-out"
                         leaveTo="opacity-0"
-                        className="transition ease-in-out"
                     >
                         <p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                     </Transition>

diff --git a/stubs/inertia-vue-ts/resources/js/Components/Dropdown.vue b/stubs/inertia-vue-ts/resources/js/Components/Dropdown.vue
@@ -51,13 +51,13 @@ const open = ref(false);
         <!-- Full Screen Dropdown Overlay -->
         <div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div>
 
-        <transition
+        <Transition
             enter-active-class="transition ease-out duration-200"
-            enter-from-class="transform opacity-0 scale-95"
-            enter-to-class="transform opacity-100 scale-100"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
             leave-active-class="transition ease-in duration-75"
-            leave-from-class="transform opacity-100 scale-100"
-            leave-to-class="transform opacity-0 scale-95"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
         >
             <div
                 v-show="open"
@@ -70,6 +70,6 @@ const open = ref(false);
                     <slot name="content" />
                 </div>
             </div>
-        </transition>
+        </Transition>
     </div>
 </template>
diff --git a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
@@ -58,10 +58,10 @@ const maxWidthClass = computed(() => {
 </script>
 
 <template>
-    <teleport to="body">
-        <transition leave-active-class="duration-200">
+    <Teleport to="body">
+        <Transition leave-active-class="duration-200">
             <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
-                <transition
+                <Transition
                     enter-active-class="ease-out duration-300"
                     enter-from-class="opacity-0"
                     enter-to-class="opacity-100"
@@ -72,9 +72,9 @@ const maxWidthClass = computed(() => {
                     <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
                         <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
                     </div>
-                </transition>
+                </Transition>
 
-                <transition
+                <Transition
                     enter-active-class="ease-out duration-300"
                     enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     enter-to-class="opacity-100 translate-y-0 sm:scale-100"
@@ -89,8 +89,8 @@ const maxWidthClass = computed(() => {
                     >
                         <slot v-if="show" />
                     </div>
-                </transition>
+                </Transition>
             </div>
-        </transition>
-    </teleport>
+        </Transition>
+    </Teleport>
 </template>
diff --git a/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -93,7 +93,12 @@ const updatePassword = () => {
             <div class="flex items-center gap-4">
                 <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
 
-                <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
                     <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                 </Transition>
             </div>

diff --git a/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -84,7 +84,12 @@ const form = useForm({
             <div class="flex items-center gap-4">
                 <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
 
-                <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
                     <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                 </Transition>
             </div>

diff --git a/stubs/inertia-vue/resources/js/Components/Dropdown.vue b/stubs/inertia-vue/resources/js/Components/Dropdown.vue
@@ -53,13 +53,13 @@ const open = ref(false);
         <!-- Full Screen Dropdown Overlay -->
         <div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div>
 
-        <transition
+        <Transition
             enter-active-class="transition ease-out duration-200"
-            enter-from-class="transform opacity-0 scale-95"
-            enter-to-class="transform opacity-100 scale-100"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
             leave-active-class="transition ease-in duration-75"
-            leave-from-class="transform opacity-100 scale-100"
-            leave-to-class="transform opacity-0 scale-95"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
         >
             <div
                 v-show="open"
@@ -72,6 +72,6 @@ const open = ref(false);
                     <slot name="content" />
                 </div>
             </div>
-        </transition>
+        </Transition>
     </div>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Components/Modal.vue b/stubs/inertia-vue/resources/js/Components/Modal.vue
@@ -60,10 +60,10 @@ const maxWidthClass = computed(() => {
 </script>
 
 <template>
-    <teleport to="body">
-        <transition leave-active-class="duration-200">
+    <Teleport to="body">
+        <Transition leave-active-class="duration-200">
             <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
-                <transition
+                <Transition
                     enter-active-class="ease-out duration-300"
                     enter-from-class="opacity-0"
                     enter-to-class="opacity-100"
@@ -74,9 +74,9 @@ const maxWidthClass = computed(() => {
                     <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
                         <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
                     </div>
-                </transition>
+                </Transition>
 
-                <transition
+                <Transition
                     enter-active-class="ease-out duration-300"
                     enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     enter-to-class="opacity-100 translate-y-0 sm:scale-100"
@@ -91,8 +91,8 @@ const maxWidthClass = computed(() => {
                     >
                         <slot v-if="show" />
                     </div>
-                </transition>
+                </Transition>
             </div>
-        </transition>
-    </teleport>
+        </Transition>
+    </Teleport>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/stubs/inertia-vue/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -91,7 +91,12 @@ const updatePassword = () => {
             <div class="flex items-center gap-4">
                 <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
 
-                <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
                     <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                 </Transition>
             </div>

diff --git a/stubs/inertia-vue/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/stubs/inertia-vue/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -88,7 +88,12 @@ const form = useForm({
             <div class="flex items-center gap-4">
                 <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
 
-                <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
                     <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                 </Transition>
             </div>