[6.x] Improve collapsible section trigger

resources/css/components/publish.css

@@ -1,6 +1,5 @@
 /* GROUP PUBLISH COMPONENT
 =================================================== */
-
 .publish-fields,
 .field-grid {
     display: grid;
@@ -144,3 +143,49 @@ Here flexbox is much better suited to create a layout that grows to fill space.
     top: 0;
     z-index: var(--z-index-portal);
 }
+
+/* GROUP COLLAPSIBLE PUBLISH SECTIONS
+=================================================== */
+.publish-section-collapsible {
+    --timing: ease;
+    /* No animation on load; enable once the user has toggled this section. */
+    --speed: 0ms;
+
+    /* Only setting the animation speed when the section is interacted with. Prevents the animation triggering on page load. */
+    &.publish-section-collapsible--interacted {
+        --speed: 250ms;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --speed: 0ms;
+    }
+}
+
+.publish-section-collapsible--expanded {
+    /* We can animate collapse/expand using grid rows */
+    animation: expand-rows var(--speed) var(--timing) forwards;
+
+    .publish-section-collapsible__inner {
+        animation: calc(var(--speed) * 2) var(--timing) section-fade-in both;
+        overflow: clip;
+        /* We need to increase the clip margin here vs regular collapsible sections because we have things appearing outside the section such as the logic indicator icon. */
+        overflow-clip-margin: 2.5rem;
+    }
+}
+
+.publish-section-collapsible--collapsed {
+    animation: collapse-rows var(--speed) var(--timing) forwards;
+
+    .publish-section-collapsible__inner {
+        animation:
+            clip-overflow 0ms var(--speed) forwards,
+            make-invisible 0ms var(--speed) forwards;
+        overflow: clip;
+    }
+}
+
+@keyframes section-fade-in { from { opacity: 0%; } to { opacity: 100%; } }
+@keyframes make-invisible { from { visibility: visible; } to { visibility: hidden; } }
+@keyframes collapse-rows  { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
+@keyframes expand-rows    { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
+@keyframes clip-overflow  { to { overflow: clip; } }

resources/js/components/ui/Publish/Sections.vue

@@ -43,6 +43,7 @@ function renderInstructions(instructions) {
 
 function toggleSection(section) {
     if (section.collapsible) {
+        section.collapsibleInteracted = true;
         section.collapsed = !section.collapsed;
     }
 }
@@ -75,7 +76,10 @@ function toggleSection(section) {
             </PanelHeader>
             <div
                 class="publish-section-collapsible grid"
-                :class="section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded'"
+                :class="[
+                    section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded',
+                    { 'publish-section-collapsible--interacted': section.collapsibleInteracted },
+                ]"
             >
                 <div class="publish-section-collapsible__inner min-h-0">
                     <Card :class="{ 'p-0!': asConfig }">
@@ -92,13 +96,15 @@ function toggleSection(section) {
 </template>
 
 <style scoped>
-[class*="publish-section-collapsible"] {
+.publish-section-collapsible {
+    --timing: ease;
+    /* No animation on load; enable once the user has toggled this section. */
     --speed: 0ms;
-    /* Only setting the animation speed when the panel is hovered prevents the animation triggering on page load. */
-    [data-ui-panel]:hover & {
+
+    /* Only setting the animation speed when the section is interacted with. Prevents the animation triggering on page load. */
+    &.publish-section-collapsible--interacted {
         --speed: 250ms;
     }
-    --timing: ease;
 
     @media (prefers-reduced-motion: reduce) {
         --speed: 0ms;
@@ -108,23 +114,24 @@ function toggleSection(section) {
 .publish-section-collapsible--expanded {
     /* We can animate collapse/expand using grid rows */
     animation: expand-rows var(--speed) var(--timing) forwards;
+
+    .publish-section-collapsible__inner {
+        animation: calc(var(--speed) * 2) var(--timing) section-fade-in both;
+        overflow: clip;
+        /* We need to increase the clip margin here vs regular collapsible sections because we have things appearing outside the section such as the logic indicator icon. */
+        overflow-clip-margin: 2.5rem;
+    }
 }
 
 .publish-section-collapsible--collapsed {
     animation: collapse-rows var(--speed) var(--timing) forwards;
-}
-
-.publish-section-collapsible--expanded .publish-section-collapsible__inner {
-    animation: calc(var(--speed) * 2) var(--timing) section-fade-in both;
-    overflow: clip;
-    overflow-clip-margin: 4px;
-}
 
-.publish-section-collapsible--collapsed .publish-section-collapsible__inner {
-    animation:
-        clip-overflow 0ms var(--speed) forwards,
-        make-invisible 0ms var(--speed) forwards;
-    overflow: clip;
+    .publish-section-collapsible__inner {
+        animation:
+            clip-overflow 0ms var(--speed) forwards,
+            make-invisible 0ms var(--speed) forwards;
+        overflow: clip;
+    }
 }
 
 @keyframes section-fade-in { from { opacity: 0%; } to { opacity: 100%; } }