feature EasyCorp#7673 Improve the Twig component to create action menus (javiereguiluz)

This PR was squashed before being merged into the 5.x branch.

Discussion
----------

Improve the Twig component to create action menus

This updates the existing `<twig:ea:ActionMenu>` component:

* It adds `<twig:ea:ActionMenu:RadioList>` and `<twig:ea:ActionMenu:CheckboxList>` subcomponents so you can group a series of menu items in a mutually-exclusive or mutually-additive sublist. E.g. we now use a `RadioList` to show the local and appearance menus, because you can only pick one of those values.
* It updates the design a bit to modernize it and make it look more like current design systems.

A few examples of the new design and features:

<img width="2398" height="1906" alt="action-menu-examples" src="https://github.com/user-attachments/assets/ec3b90dd-8208-4379-9f44-455b43c7ca1f" />

Commits
-------

910cb45 Improve the Twig component to create action menus

Author: javiereguiluz

assets/css/easyadmin-theme/action-menu.css

@@ -0,0 +1,136 @@
+/* ActionMenu (dropdown)
+/* ------------------------------------------------------------------------- */
+/* Open/close animation, selectable (radio/checkbox) items and submenu chevron,
+   modeled on the shadcn/ui Dropdown Menu. */
+
+.dropdown-menu {
+    --ea-action-menu-slide: 8px;
+}
+
+/* ENTER: triggered when Bootstrap adds the `.show` class. We animate the
+   individual `scale`/`translate` properties (not `transform`) so they compose
+   on top of Popper's inline `transform: translate()` positioning instead of
+   clobbering it. `transform-origin` is anchored to the corner nearest the
+   toggle, mimicking shadcn's --radix-*-transform-origin. */
+.dropdown-menu.show {
+    /* `ease` (the CSS default) is exactly what shadcn/tw-animate-css uses. A strong
+       decelerate curve (e.g. --ea-ease-out) has a long, slow tail that reads as sluggish
+       at this short duration, so we deliberately match shadcn's `ease` here */
+    animation: ea-action-menu-enter var(--ea-duration-default) ease;
+}
+@keyframes ea-action-menu-enter {
+    from {
+        opacity: 0;
+        scale: 0.95;
+        translate: var(--ea-enter-x, 0) var(--ea-enter-y, 0);
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+    }
+}
+.dropdown-menu[data-popper-placement^="bottom"] {
+    transform-origin: top center;
+    --ea-enter-y: calc(-1 * var(--ea-action-menu-slide));
+}
+.dropdown-menu[data-popper-placement^="top"] {
+    transform-origin: bottom center;
+    --ea-enter-y: var(--ea-action-menu-slide);
+}
+.dropdown-menu[data-popper-placement^="left"] {
+    transform-origin: right center;
+    --ea-enter-x: var(--ea-action-menu-slide);
+}
+.dropdown-menu[data-popper-placement^="right"] {
+    transform-origin: left center;
+    --ea-enter-x: calc(-1 * var(--ea-action-menu-slide));
+}
+.dropdown-menu[data-popper-placement$="-end"] {
+    transform-origin: top right;
+}
+.dropdown-menu[data-popper-placement$="-start"] {
+    transform-origin: top left;
+}
+
+/* EXIT: Bootstrap removes `.show` and destroys Popper synchronously, so a
+   CSS-only exit can't play. page-layout.js adds `.ea-dropdown-hiding` while
+   `.show` (and Popper positioning) is still in place, plays this, then lets
+   Bootstrap finish hiding */
+.dropdown-menu.ea-dropdown-hiding {
+    animation: ea-action-menu-exit var(--ea-duration-fast) var(--ea-ease-in) forwards;
+    pointer-events: none;
+}
+@keyframes ea-action-menu-exit {
+    from {
+        opacity: 1;
+        scale: 1;
+    }
+    to {
+        opacity: 0;
+        scale: var(--ea-action-menu-zoom-from);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dropdown-menu.show,
+    .dropdown-menu.ea-dropdown-hiding {
+        animation: none;
+    }
+}
+
+.dropdown-menu .dropdown-selectable-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.dropdown-menu .dropdown-item-trailing {
+    margin-inline-start: auto;
+    display: inline-flex;
+    align-items: center;
+}
+.dropdown-menu .dropdown-item-check {
+    color: var(--color-primary);
+    inline-size: 16px;
+    block-size: 16px;
+    opacity: 0;
+    transition: opacity var(--ea-duration-fast) var(--ea-ease-out);
+}
+.dropdown-menu .dropdown-item[aria-checked="true"] .dropdown-item-check,
+.dropdown-menu .dropdown-item-selectable.active .dropdown-item-check {
+    opacity: 1;
+}
+
+.dropdown-menu .dropdown-item-selectable.active,
+.dropdown-menu .dropdown-item-selectable[aria-checked="true"] {
+    background: var(--dropdown-settings-active-item-bg);
+    box-shadow: none;
+    color: var(--dropdown-link-color);
+}
+.dropdown-menu .dropdown-item-selectable.active .icon,
+.dropdown-menu .dropdown-item-selectable[aria-checked="true"] .icon {
+    color: var(--dropdown-icon-color);
+}
+.dropdown-menu .dropdown-item-selectable.active .dropdown-item-check {
+    color: var(--color-primary);
+}
+
+.dropdown-submenu .dropdown-toggle::after,
+.dropdown-submenu .dropdown-toggle::before {
+    display: none; /* hide Bootstrap's native caret; we render a chevron icon instead */
+}
+.dropdown-menu .dropdown-submenu-chevron {
+    margin-inline-start: auto;
+    color: var(--text-muted);
+    inline-size: 16px;
+    block-size: 16px;
+}
+/* the chevron follows the side the submenu actually opens to: right by default
+   (chevron-right, no flip), flipped to point left when the submenu opens to the
+   left (Bootstrap's .dropstart, e.g. datagrid row actions) */
+.dropstart > .dropdown-submenu-chevron,
+.dropstart > * .dropdown-submenu-chevron {
+    scale: -1 1; /* point left */
+    order: -1; /* and sit on the leading (left) edge, the side it opens to */
+    margin-inline-start: 0;
+}

assets/css/easyadmin-theme/base.css

@@ -707,24 +707,28 @@ a.user-menu-wrapper .user-details:hover {
 
 .dropdown-menu {
     --dropdown-padding: 4px;
+    --dropdown-radius: var(--border-radius-lg); /* 8px */
+    --dropdown-item-radius: var(--border-radius-lg); /* 8px */
 
     background-color: var(--dropdown-bg);
     border-color: var(--dropdown-border-color);
+    border-radius: var(--dropdown-radius);
     box-shadow: var(--shadow-xl);
     color: var(--dropdown-color);
+    min-inline-size: 8rem;
     max-inline-size: 240px;
-    padding: 5px;
+    padding: var(--dropdown-padding);
 }
 .dropdown-menu.dropdown-has-submenus {
     padding-inline-start: 25px;
 }
 .dropdown-menu li {
-    border-radius: var(--border-radius);
+    border-radius: var(--dropdown-item-radius);
 }
 .dropdown-menu a,
 .dropdown-menu a:hover,
 .dropdown-menu a:active {
-    border-radius: var(--border-radius);
+    border-radius: var(--dropdown-item-radius);
     color: var(--dropdown-link-color);
 }
 .dropdown-menu a:hover {
@@ -733,25 +737,41 @@ a.user-menu-wrapper .user-details:hover {
 .dropdown-menu i,
 .dropdown-menu .icon {
     color: var(--dropdown-icon-color);
-    margin: 0 8px 0 0;
-    font-size: 15px;
+    margin: 0;
+    /* 14px (not 16px): FontAwesome's filled glyphs read heavier than icon sets with thin SVG strokes,
+       so a slightly smaller size matches the visual weight. */
+    font-size: 14px;
 }
 .dropdown-menu .icon i {
     margin: 0;
+    line-height: 1;
 }
 .dropdown-menu .icon {
     display: inline-flex;
+    align-items: center;
     justify-content: center;
+    /* fixed-width icon column following FontAwesome's .fa-fw (1.25em): every FA glyph is
+       designed to fit within 1.25em, so icons render full-size, stay centered, never get
+       clipped, and labels line up. SVG icons are capped at 1em and centered in the same
+       column. */
+    inline-size: 1.25em;
+    block-size: 16px;
+    flex-shrink: 0;
+    /* reset the item's 20px line-height so glyphs aren't inflated vertically */
+    line-height: 1;
 }
 
 .dropdown-menu .dropdown-item,
 .dropdown-menu .dropdown-header {
     align-items: center;
     display: flex;
-    block-size: 28px;
+    gap: 6px;
+    min-block-size: 28px;
     white-space: nowrap;
     overflow: hidden;
-    padding: 0 12px 0 6px;
+    padding: 4px 6px;
+    font-size: var(--font-size-base);
+    line-height: 1.25rem; /* 28px */
     text-overflow: ellipsis;
 }
 .dropdown-menu .dropdown-divider {

assets/css/easyadmin-theme/datagrids.css

@@ -280,11 +280,6 @@ table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dro
     position: relative;
 }
 
-.datagrid .dropdown-actions .dropstart .dropdown-toggle:before {
-    margin-inline-start: -20px;
-    position: absolute;
-}
-
 /* Position nested dropdown menu to the left */
 .datagrid .dropdown-actions .dropdown-menu .dropstart > .dropdown-menu {
     inset-block-start: 0;
@@ -329,15 +324,6 @@ table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dro
     display: none;
 }
 
-.datagrid .dropdown-actions .dropdown-menu .dropstart .dropdown-toggle-split .dropdown-toggle-marker {
-    /* this is a chevron-like icon made out of text with CSS border tricks */
-    border-block-end: .3em solid transparent;
-    border-inline-end: .3em solid;
-    border-block-start: .3em solid transparent;
-    content: "";
-    display: inline-block;
-}
-
 .datagrid .ea-lightbox-thumbnail img {
     background: var(--white);
     border: 1px solid transparent;

assets/css/easyadmin-theme/theme.css

@@ -2,6 +2,7 @@
 @import "./variables-theme.css";
 
 @import "./base.css";
+@import "./action-menu.css";
 @import "./menu.css";
 @import "./datagrids.css";
 @import "./detail-page.css";

assets/js/page-color-scheme.js

@@ -22,6 +22,13 @@ class ColorSchemeHandler {
         const colorSchemeSelectors = document.querySelectorAll('.dropdown-settings');
         const currentScheme = localStorage.getItem(this.#colorSchemeLocalStorageKey) || 'auto';
 
+        // toggle the selected state via aria-checked (this drives the trailing checkmark
+        // shown by CSS); the legacy `active` class is kept in sync for one release
+        const setChecked = (el, isChecked) => {
+            el.setAttribute('aria-checked', isChecked ? 'true' : 'false');
+            el.classList.toggle('active', isChecked);
+        };
+
         colorSchemeSelectors.forEach((colorSchemeSelector) => {
             const selectorOptions = colorSchemeSelector.querySelectorAll(
                 'a.dropdown-appearance-item[data-ea-color-scheme]'
@@ -30,10 +37,8 @@ class ColorSchemeHandler {
                 `a.dropdown-appearance-item[data-ea-color-scheme="${currentScheme}"]`
             );
 
-            selectorOptions.forEach((selector) => {
-                selector.classList.remove('active');
-            });
-            selectorActiveOption.classList.add('active');
+            selectorOptions.forEach((selector) => setChecked(selector, false));
+            setChecked(selectorActiveOption, true);
 
             selectorOptions.forEach((selector) => {
                 selector.addEventListener('click', () => {
@@ -46,12 +51,8 @@ class ColorSchemeHandler {
                     const allSelectorActiveOptions = document.querySelectorAll(
                         `a.dropdown-appearance-item[data-ea-color-scheme="${selectedColorScheme}"]`
                     );
-                    allSelectorOptions.forEach((selectorOption) => {
-                        selectorOption.classList.remove('active');
-                    });
-                    allSelectorActiveOptions.forEach((selectorOption) => {
-                        selectorOption.classList.add('active');
-                    });
+                    allSelectorOptions.forEach((selectorOption) => setChecked(selectorOption, false));
+                    allSelectorActiveOptions.forEach((selectorOption) => setChecked(selectorOption, true));
                 });
             });
         });

assets/js/page-layout.js

@@ -2,3 +2,51 @@ document.body.classList.add(
     `ea-content-width-${localStorage.getItem('ea/content/width') || document.body.dataset.eaContentWidth}`,
     `ea-sidebar-width-${localStorage.getItem('ea/sidebar/width') || document.body.dataset.eaSidebarWidth}`
 );
+
+// ActionMenu (Bootstrap dropdown) close animation.
+// The enter animation is pure CSS (.dropdown-menu.show), but Bootstrap removes
+// `.show` and destroys Popper synchronously when hiding, so a CSS-only exit can't
+// play. We intercept `hide.bs.dropdown` (a native bubbling CustomEvent, so no
+// Bootstrap import is needed here), play the CSS exit while `.show` and Popper
+// positioning are still in place, then let Bootstrap finish hiding.
+(() => {
+    const EXIT_CLASS = 'ea-dropdown-hiding';
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    const menuFor = (toggle) => {
+        const wrapper = toggle.closest('.dropdown, .dropstart, .dropend, .dropup');
+
+        return wrapper?.querySelector(':scope > .dropdown-overlay > .dropdown-menu, :scope > .dropdown-menu');
+    };
+
+    document.addEventListener('hide.bs.dropdown', (event) => {
+        if (reduceMotion || undefined === window.bootstrap) {
+            return; // hide instantly
+        }
+
+        const menu = menuFor(event.target);
+        if (!menu) {
+            return;
+        }
+
+        // The programmatic hide() re-fires this event; let it pass through.
+        if ('1' === menu.dataset.eaAllowHide) {
+            delete menu.dataset.eaAllowHide;
+            menu.classList.remove(EXIT_CLASS);
+
+            return;
+        }
+
+        event.preventDefault();
+        menu.classList.add(EXIT_CLASS);
+
+        const finish = () => {
+            clearTimeout(fallback);
+            menu.removeEventListener('animationend', finish);
+            menu.dataset.eaAllowHide = '1';
+            window.bootstrap.Dropdown.getOrCreateInstance(event.target).hide();
+        };
+        const fallback = setTimeout(finish, 250); // safety net if animationend never fires
+        menu.addEventListener('animationend', finish, { once: true });
+    });
+})();

public/app.cec96de7.css public/app.0fb8b8bb.csspublic/app.cec96de7.css renamed to public/app.0fb8b8bb.css

@@ -2,7 +2,7 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.cec96de7.css"
+        "/app.0fb8b8bb.css"
       ],
       "js": [
         "/app.b016c66e.js"
@@ -15,12 +15,12 @@
     },
     "page-layout": {
       "js": [
-        "/page-layout.6e9fe55d.js"
+        "/page-layout.696f1816.js"
       ]
     },
     "page-color-scheme": {
       "js": [
-        "/page-color-scheme.75224563.js"
+        "/page-color-scheme.e9aaf2f0.js"
       ]
     },
     "field-boolean": {

public/entrypoints.json

@@ -1,9 +1,9 @@
 {
-  "app.css": "app.cec96de7.css",
+  "app.css": "app.0fb8b8bb.css",
   "app.js": "app.b016c66e.js",
   "form.js": "form.bd28918c.js",
-  "page-layout.js": "page-layout.6e9fe55d.js",
-  "page-color-scheme.js": "page-color-scheme.75224563.js",
+  "page-layout.js": "page-layout.696f1816.js",
+  "page-color-scheme.js": "page-color-scheme.e9aaf2f0.js",
   "field-boolean.js": "field-boolean.6adeff4e.js",
   "field-code-editor.css": "field-code-editor.cdcf15eb.css",
   "field-code-editor.js": "field-code-editor.a0cd3c60.js",