feat: add aura item overlays styles (#10252)

Author: jouni

dev/aura.html

@@ -89,7 +89,8 @@
         const view = document.querySelector('.components-view');
 
         // Menu Bar
-        view.querySelector('vaadin-menu-bar').items = [
+        const menuBar = view.querySelector('vaadin-menu-bar');
+        menuBar.items = [
           {
             text: 'Actions',
             children: [
@@ -114,6 +115,15 @@
             ],
           },
         ];
+        view.querySelector('#filled-menu-bar').addEventListener('change', (e) => {
+          if (e.target.checked) {
+            menuBar.setAttribute('theme', 'filled');
+            menuBar.items[0].children[9].theme = 'danger filled';
+          } else {
+            menuBar.removeAttribute('theme');
+            menuBar.items[0].children[9].theme = 'danger';
+          }
+        });
 
         // Select
         view.querySelector('vaadin-select').renderer = (root) => {
@@ -579,8 +589,11 @@ <h1>Components</h1>
                   </vaadin-radio-group>
                 </div>
 
-                <div class="aura-surface component">
+                <div class="aura-surface component column">
                   <vaadin-menu-bar></vaadin-menu-bar>
+                  <vaadin-checkbox id="filled-menu-bar" label="Filled">
+                    <vaadin-tooltip slot="tooltip" text="Apply the filled variant on the menu items"></vaadin-tooltip>
+                  </vaadin-checkbox>
                 </div>
 
                 <div class="aura-surface component wide">

packages/aura/aura.css

@@ -16,8 +16,10 @@
 @import './src/components/dialog.css';
 @import './src/components/grid.css';
 @import './src/components/input-container.css';
+@import './src/components/item-overlay.css';
 @import './src/components/login.css';
 @import './src/components/master-detail-layout.css';
+@import './src/components/menu-bar.css';
 @import './src/components/message-input.css';
 @import './src/components/multi-select-combo-box.css';
 @import './src/components/notification.css';

packages/aura/src/color.css

@@ -82,8 +82,10 @@
 
 :where(:root, :host),
 vaadin-button,
-vaadin-menu-bar-button,
+vaadin-context-menu-item,
 vaadin-drawer-toggle,
+vaadin-menu-bar-button,
+vaadin-menu-bar-item,
 vaadin-checkbox::part(checkbox),
 vaadin-radio-button::part(radio),
 vaadin-side-nav-item::part(content) {

packages/aura/src/components/button.css

@@ -51,7 +51,7 @@ vaadin-drawer-toggle:empty {
 /* prettier-ignore */
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
 vaadin-drawer-toggle:empty,
-vaadin-menu-bar-button[aria-haspopup='true'] {
+vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
 }
 

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

@@ -0,0 +1,76 @@
+:where(:root, :host) {
+  --vaadin-item-overlay-padding: var(--vaadin-gap-xs);
+  --vaadin-item-border-radius: calc(var(--vaadin-radius-m) - var(--vaadin-item-overlay-padding));
+  --vaadin-item-checkmark-color: var(--aura-accent-text);
+}
+
+:is(
+  vaadin-avatar-group-menu-item,
+  vaadin-combo-box-item,
+  vaadin-context-menu-item,
+  vaadin-time-picker-item,
+  vaadin-item,
+  vaadin-menu-bar-item,
+  vaadin-multi-select-combo-box-item,
+  vaadin-select-item[role]
+) {
+  font-weight: var(--aura-font-weight-medium);
+  --vaadin-item-checkmark-color: var(--aura-accent-text);
+
+  &::part(checkmark) {
+    --vaadin-icon-visual-size: 75%;
+  }
+
+  &::part(content) {
+    display: flex;
+  }
+
+  @media (any-hover: hover) {
+    &:not([disabled], [aria-disabled='true']):hover {
+      background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+
+      &[theme~='filled'] {
+        background: var(--aura-accent-color);
+        color: var(--aura-accent-contrast);
+        --vaadin-text-color: var(--aura-accent-contrast);
+        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast) 70%, transparent);
+        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast) 50%, transparent);
+        --vaadin-item-checkmark-color: var(--aura-accent-contrast);
+
+        > * {
+          --aura-red: var(--aura-accent-contrast);
+          --aura-red-text: var(--aura-accent-contrast);
+          --aura-orange: var(--aura-accent-contrast);
+          --aura-orange-text: var(--aura-accent-contrast);
+          --aura-yellow: var(--aura-accent-contrast);
+          --aura-yellow-text: var(--aura-accent-contrast);
+          --aura-green: var(--aura-accent-contrast);
+          --aura-green-text: var(--aura-accent-contrast);
+          --aura-blue: var(--aura-accent-contrast);
+          --aura-blue-text: var(--aura-accent-contrast);
+          --aura-purple: var(--aura-accent-contrast);
+          --aura-purple-text: var(--aura-accent-contrast);
+        }
+      }
+    }
+  }
+
+  &[aria-expanded='true']:not(:hover) {
+    background: var(--vaadin-background-container-strong);
+  }
+
+  &[theme~='danger'] {
+    --aura-accent-light: var(--aura-red);
+    --aura-accent-dark: var(--aura-red);
+    color: var(--aura-red-text);
+  }
+}
+
+/* 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
+  );
+  border-color: var(--vaadin-border-color);
+}

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

@@ -0,0 +1,17 @@
+@container not style(--vaadin-menu-bar-gap) {
+  vaadin-menu-bar:not([has-single-button]) vaadin-menu-bar-button:not([first-visible]) {
+    border-inline-start-color: transparent;
+  }
+}
+
+@media (any-hover: hover) {
+  /* Increase specificity to reset hover styles */
+  vaadin-menu-bar-button vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
+    background: transparent;
+  }
+}
+
+vaadin-menu-bar-button[slot='overflow'] {
+  font-family: system-ui, sans-serif;
+  font-weight: 600;
+}