refactor: adjust aura menu item styles (#10535)

Author: jouni

dev/aura.html

@@ -100,6 +100,26 @@
         }));
       };
 
+      function createMenuItemWithFeatures(text, iconName, badgeLabel) {
+        const item = document.createElement('vaadin-menu-bar-item');
+        const icon = document.createElement('vaadin-icon');
+        const badge = document.createElement('span');
+
+        if (iconName) {
+          icon.setAttribute('src', `./assets/lucide-icons/${iconName}.svg`);
+          item.append(icon);
+        }
+        if (text) {
+          item.append(document.createTextNode(text));
+        }
+        if (badgeLabel) {
+          badge.classList.add('aura-badge', 'aura-accent-purple');
+          badge.textContent = badgeLabel;
+          item.append(badge);
+        }
+        return item;
+      }
+
       function initComponentsView() {
         const view = document.querySelector('.components-view');
 
@@ -112,14 +132,22 @@
               { text: 'Edit' },
               { text: 'Duplicate' },
               { component: 'hr' },
-              { text: 'Archive' },
+              { component: createMenuItemWithFeatures('Archive', 'layers', '2') },
               {
                 text: 'More',
                 children: [
                   { text: 'Move to Project…' },
                   { text: 'Move to Folder…' },
                   { component: 'hr' },
-                  { text: 'Advanced Options…' },
+                  {
+                    text: 'Advanced Options',
+                    children: [
+                      { text: 'Show All', checked: true },
+                      { text: 'Show Hidden Items' },
+                      { component: 'hr' },
+                      { text: 'Open…' },
+                    ],
+                  },
                 ],
               },
               { component: 'hr' },

dev/aura/badge.css

@@ -25,7 +25,15 @@
 /* TODO is there a way to solve this without explicitly listing the special cases */
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'],
 vaadin-tabs[theme~='filled'] > vaadin-tab[selected],
-vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] {
+vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current],
+:is(
+    vaadin-combo-box-item,
+    vaadin-context-menu-item,
+    vaadin-item,
+    vaadin-menu-bar-item,
+    vaadin-multi-select-combo-box-item,
+    vaadin-select-item[role]
+  )[theme~='filled']:not([disabled], [aria-disabled='true']):hover {
   > .aura-badge-filled:not(
       .aura-accent-red,
       .aura-accent-orange,

packages/aura/src/color.css

@@ -221,7 +221,16 @@ vaadin-tab,
 /* Badges and other content that uses contrast color inside filled variants */
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
 vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
-vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']) {
+vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
+:is(
+    vaadin-combo-box-item,
+    vaadin-context-menu-item,
+    vaadin-item,
+    vaadin-menu-bar-item,
+    vaadin-multi-select-combo-box-item,
+    vaadin-select-item[role]
+  )[theme~='filled']:not([disabled], [aria-disabled='true']):hover
+  > * {
   --vaadin-icon-color: currentColor;
   --vaadin-text-color: currentColor;
   --vaadin-text-color-secondary: color-mix(in srgb, currentColor 70%, transparent);

packages/aura/src/components/item-overlay.css

@@ -3,6 +3,7 @@
   --vaadin-item-overlay-padding: var(--vaadin-gap-xs);
   --vaadin-item-border-radius: max(var(--vaadin-radius-s), var(--vaadin-radius-m) - var(--vaadin-item-overlay-padding));
   --vaadin-item-checkmark-color: var(--aura-accent-text-color);
+  --vaadin-item-gap: var(--vaadin-gap-s);
 }
 
 :is(
@@ -19,18 +20,31 @@
   --vaadin-item-checkmark-color: var(--aura-accent-text-color);
   -webkit-user-select: none;
   user-select: none;
+  --_highlight-color: light-dark(
+    oklch(from var(--aura-accent-color-light) min(0.9, l) c h / max(0.05, l / 4)),
+    oklch(from var(--aura-accent-color-dark) max(0.6, l) c h / max(0.2, l / 4))
+  );
+  gap: 0;
 
   &::part(checkmark) {
     --vaadin-icon-visual-size: 75%;
+    margin-inline-start: calc(var(--vaadin-gap-xs) * -1);
+  }
+
+  &[aria-haspopup='true']::after {
+    --vaadin-icon-visual-size: 90%;
+    margin-inline-end: calc(var(--vaadin-gap-xs) * -1);
   }
 
   &::part(content) {
     display: flex;
+    padding-inline: var(--vaadin-gap-xs);
+    gap: var(--vaadin-item-gap);
   }
 
   @media (any-hover: hover) {
     &:not([disabled], [aria-disabled='true']):hover {
-      background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+      background: var(--_highlight-color);
 
       &[theme~='filled'] {
         background: var(--aura-accent-color);
@@ -40,29 +54,12 @@
         --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
         --vaadin-icon-color: var(--aura-accent-contrast-color);
         --vaadin-item-checkmark-color: var(--aura-accent-contrast-color);
-
-        > * {
-          --aura-accent-color: var(--aura-accent-contrast-color);
-          --aura-accent-text-color: var(--aura-accent-contrast-color);
-          --aura-red: var(--aura-accent-contrast-color);
-          --aura-red-text: var(--aura-accent-contrast-color);
-          --aura-orange: var(--aura-accent-contrast-color);
-          --aura-orange-text: var(--aura-accent-contrast-color);
-          --aura-yellow: var(--aura-accent-contrast-color);
-          --aura-yellow-text: var(--aura-accent-contrast-color);
-          --aura-green: var(--aura-accent-contrast-color);
-          --aura-green-text: var(--aura-accent-contrast-color);
-          --aura-blue: var(--aura-accent-contrast-color);
-          --aura-blue-text: var(--aura-accent-contrast-color);
-          --aura-purple: var(--aura-accent-contrast-color);
-          --aura-purple-text: var(--aura-accent-contrast-color);
-        }
       }
     }
   }
 
   &:active {
-    background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+    background: var(--_highlight-color);
   }
 
   &[aria-expanded='true']:not(:hover) {
@@ -83,8 +80,6 @@
 /* TODO is there a better selector? */
 [role='menu'] [role='separator'] {
   margin-block: var(--vaadin-gap-xs);
-  margin-inline-start: calc(
-    var(--vaadin-icon-size, 1lh) + var(--vaadin-item-gap, var(--vaadin-gap-s)) + var(--vaadin-gap-xs) * 2
-  );
+  margin-inline: calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container));
   border-color: var(--vaadin-border-color);
 }

packages/aura/src/components/menu-bar.css

@@ -15,3 +15,7 @@ vaadin-menu-bar-button[slot='overflow'] {
   font-family: system-ui, sans-serif;
   font-weight: 600;
 }
+
+vaadin-menu-bar-button[aria-haspopup='true']::part(suffix)::after {
+  --vaadin-icon-visual-size: 90%;
+}