Merge pull request #1445 from basecamp/animate-popups

Animate popups

app/assets/stylesheets/boxcar-menu.css

@@ -6,12 +6,12 @@
 
     img {
       block-size: auto;
-      inline-size: 1.15em; 
-      margin-inline-end: 0.8ch; 
+      inline-size: 1.15em;
+      margin-inline-end: 0.8ch;
     }
   }
 
-  .input:is(.fizzy-menu-trigger) {
+  .input:is(.boxcar-menu-trigger) {
     --input-background: var(--color-canvas);
     --input-border-color: transparent;
     --input-padding: 0.3em 2em 0.3em 0.75em;
@@ -58,7 +58,7 @@
     }
   }
 
-  .fizzy-menu:is(.panel) {
+  .boxcar-menu:is(.panel) {
     --panel-border-color: var(--color-selected-dark);
     --panel-border-radius: 1.4em;
     --panel-size: 45ch;
@@ -71,15 +71,24 @@
     flex-direction: column;
     gap: 2px;
     scrollbar-gutter: stable both-edges;
+
+    /* Safari doesn't position the sticky footer properly during the
+     * transition, so we need to delay the footer entrance. */
+    .popup__footer {
+      animation: safari-sticky-footer-hack 0s;
+      animation-delay: var(--dialog-duration);
+      animation-fill-mode: both;
+      inset-inline: var(--block-space);
+    }
   }
 
-  .fizzy-menu__close {
+  .boxcar-menu__close {
     @media (any-hover: hover) {
       display: none;
     }
   }
 
-  .fizzy-menu__hotkeys {
+  .boxcar-menu__hotkeys {
     --gap: 8px;
 
     align-items: center;

app/assets/stylesheets/popup.css

@@ -14,9 +14,39 @@
     position: absolute;
     transform: translateX(-50%);
     z-index: var(--z-popup);
+    opacity: 0;
+    transform: scale(0.2) translateX(-50%);
+    transform-origin: top left;
+    transition: var(--dialog-duration) allow-discrete;
+    transition-property: display, opacity, overlay, transform;
+
+    &::backdrop {
+      background-color: var(--color-always-black);
+      opacity: 0;
+      transform: scale(1);
+      transition: var(--dialog-duration) allow-discrete;
+      transition-property: display, opacity, overlay;
+    }
 
     &[open] {
       display: flex;
+      opacity: 1;
+      transform: scale(1) translateX(-50%);
+
+      &::backdrop {
+        opacity: 0.5;
+      }
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: scale(0.2) translateX(-50%);
+      }
+
+      &[open]::backdrop {
+        opacity: 0;
+      }
     }
 
     &.orient-left {
@@ -179,54 +209,6 @@
     z-index: 1;
   }
 
-  /* Variants
-  /* ------------------------------------------------------------------------ */
-
-  .popup--animated {
-    opacity: 0;
-    transform: scale(0.2) translateX(-50%);
-    transform-origin: top left;
-    transition: var(--dialog-duration) allow-discrete;
-    transition-property: display, opacity, overlay, transform;
-
-    &::backdrop {
-      background-color: var(--color-always-black);
-      opacity: 0;
-      transform: scale(1);
-      transition: var(--dialog-duration) allow-discrete;
-      transition-property: display, opacity, overlay;
-    }
-
-    /* Safari doesn't position the sticky footer properly during the
-     * transition, so we need to delay the footer entrance. */
-    .popup__footer {
-      animation: safari-sticky-footer-hack 0s;
-      animation-delay: var(--dialog-duration);
-      animation-fill-mode: both;
-      inset-inline: var(--block-space);
-    }
-
-    &[open] {
-      opacity: 1;
-      transform: scale(1) translateX(-50%);
-
-      &::backdrop {
-        opacity: 0.5;
-      }
-    }
-
-    @starting-style {
-      &[open] {
-        opacity: 0;
-        transform: scale(0.2) translateX(-50%);
-      }
-
-      &[open]::backdrop {
-        opacity: 0;
-      }
-    }
-  }
-
   @keyframes safari-sticky-footer-hack {
     0% { position: absolute; }
     100% { position: sticky; }

app/assets/stylesheets/print.css

@@ -35,8 +35,8 @@
     print-color-adjust: exact;
   }
 
-  .fizzy-menu,
-  .fizzy-menu-trigger,
+  .boxcar-menu,
+  .boxcar-menu-trigger,
   .header__actions {
     display: none;
   }

app/views/my/menus/_button.html.erb

@@ -1,4 +1,4 @@
-<%= tag.button class:"fizzy-menu-trigger input input--select center flex-inline align-center txt-normal",
+<%= tag.button class:"boxcar-menu-trigger input input--select center flex-inline align-center txt-normal",
       data: {
         action: "click->dialog#open:stop keydown.j@document->hotkey#click keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
         controller: "hotkey" } do %>

app/views/my/menus/_hotkeys.html.erb

@@ -1,4 +1,4 @@
-<div class="fizzy-menu__hotkeys" role="list">
+<div class="boxcar-menu__hotkeys" role="list">
   <%= filter_hotkey_link "Home", root_path, 1, "home" %>
   <%= filter_hotkey_link "Assigned to me", cards_path(assignee_ids: [Current.user.id]), 2, "clipboard" %>
   <%= filter_hotkey_link "Added by me", cards_path(creator_ids: [Current.user.id]), 3, "person-add" %>

app/views/my/menus/_menu.html.erb

@@ -1,7 +1,7 @@
 <nav data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
   <%= render "my/menus/button" %>
 
-  <%= tag.dialog class: "fizzy-menu filter popup popup--animated panel margin-block-start-half",
+  <%= tag.dialog class: "boxcar-menu filter popup panel margin-block-start-half",
         data: {
               action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset filter:changed->nav-section-expander#showWhileFiltering toggle->filter#filter",
               controller: "filter navigable-list nav-section-expander",

app/views/my/menus/show.html.erb

@@ -15,7 +15,7 @@
             nav_section_expander_target: "input",
             navigable_list_target: "input",
             action: "input->filter#filter" } %>
-    <button class="fizzy-menu__close btn borderless txt-small" data-action="dialog#close">
+    <button class="boxcar-menu__close btn borderless txt-small" data-action="dialog#close">
       <%= icon_tag "close" %>
       <span class="for-screen-reader">Close menu</span>
     </button>