experiment: add menu-bar base styles and visual tests (#9637)

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: anezthes

dev/menu-bar.html

@@ -28,8 +28,24 @@
       import '@vaadin/tooltip';
       import '@vaadin/checkbox';
       import '@vaadin/checkbox-group';
+      import '@vaadin/icon';
       import '@vaadin/radio-group';
       import '@vaadin/split-layout';
+      import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
+
+      function makeComponent(text) {
+        const item = document.createElement('vaadin-menu-bar-item');
+        item.textContent = text;
+        return item;
+      }
+
+      function makeIcon(img) {
+        const item = document.createElement('vaadin-menu-bar-item');
+        const icon = document.createElement('vaadin-icon');
+        icon.setAttribute('icon', img);
+        item.appendChild(icon);
+        return item;
+      }
 
       const menuBar = document.querySelector('vaadin-menu-bar');
       menuBar.items = [
@@ -41,7 +57,7 @@
             { text: 'Status bar', checked: true },
           ],
         },
-        { text: 'Edit' },
+        { component: makeComponent('Edit') },
         {
           text: 'Share',
           children: [
@@ -60,6 +76,10 @@
           children: [{ text: 'To folder' }, { text: 'To trash' }],
         },
         { text: 'Duplicate', tooltip: 'Create a duplicate' },
+        {
+          component: makeIcon('lumo:user'),
+          children: [{ text: 'Archive' }, { text: 'Configure' }],
+        },
       ];
 
       ['dropdown-indicators', 'small', 'primary', 'tertiary', 'tertiary-inline', 'end-aligned'].forEach((variant) => {
@@ -122,9 +142,11 @@
       </div>
     </div>
     <vaadin-split-layout>
-      <vaadin-menu-bar>
-        <vaadin-tooltip slot="tooltip" hover-delay="500" hide-delay="500"></vaadin-tooltip>
-      </vaadin-menu-bar>
+      <div style="padding: 3px">
+        <vaadin-menu-bar>
+          <vaadin-tooltip slot="tooltip" hover-delay="500" hide-delay="500"></vaadin-tooltip>
+        </vaadin-menu-bar>
+      </div>
       <span>Resize to show overflow button</span>
     </vaadin-split-layout>
   </body>

packages/menu-bar/package.json

@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",

packages/menu-bar/src/styles/vaadin-menu-bar-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const menuBarStyles: CSSResult;

packages/menu-bar/src/styles/vaadin-menu-bar-base-styles.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const menuBarStyles = css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='container'] {
+    display: flex;
+    flex-wrap: nowrap;
+    margin: calc((var(--vaadin-focus-ring-width) + 1px) * -1);
+    overflow: hidden;
+    padding: calc(var(--vaadin-focus-ring-width) + 1px);
+    position: relative;
+    width: 100%;
+    /* stylelint-disable length-zero-no-unit */
+    --_gap: var(--vaadin-menu-bar-gap, 0px);
+    --_bw: var(--vaadin-button-border-width, 1px);
+    gap: var(--_gap);
+    --_rad-button: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
+    --_rad: min(var(--_gap) * 1000, var(--_rad-button));
+  }
+
+  ::slotted(vaadin-menu-bar-button:not(:first-of-type)) {
+    margin-inline-start: min(var(--_bw) * -1 + var(--_gap) * 1000, 0px);
+  }
+
+  ::slotted(vaadin-menu-bar-button) {
+    border-radius: var(--_rad);
+  }
+
+  ::slotted([first-visible]),
+  :host([has-single-button]) ::slotted([slot='overflow']) {
+    border-start-start-radius: var(--_rad-button);
+    border-end-start-radius: var(--_rad-button);
+  }
+
+  ::slotted(:is([last-visible], [slot='overflow'])) {
+    border-start-end-radius: var(--_rad-button);
+    border-end-end-radius: var(--_rad-button);
+  }
+
+  :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button[first-visible]),
+  :host([theme~='end-aligned'][has-single-button]) ::slotted(vaadin-menu-bar-button) {
+    margin-inline-start: auto;
+  }
+`;

packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const menuBarButtonStyles: CSSResult;

packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const menuBarButtonStyles = css`
+  :host {
+    flex-shrink: 0;
+  }
+
+  :host([focus-ring]) {
+    z-index: 1;
+  }
+
+  :host([slot='overflow']) {
+    margin-inline-end: 0;
+  }
+
+  .vaadin-button-container {
+    gap: inherit;
+  }
+
+  :host(:not([slot='overflow']):not([theme~='icon'])[aria-haspopup]) [part='suffix'] {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+  }
+
+  :host(:not([slot='overflow']):not([theme~='icon'])[aria-haspopup]) [part='suffix']::after {
+    background: currentColor;
+    content: '';
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-chevron-down);
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  ::slotted(vaadin-menu-bar-item) {
+    padding: 0;
+    gap: 0;
+  }
+
+  ::slotted(vaadin-menu-bar-item)::after {
+    display: none;
+  }
+`;

packages/menu-bar/src/styles/vaadin-menu-bar-item-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const menuBarItemStyles: CSSResult;

packages/menu-bar/src/styles/vaadin-menu-bar-item-base-styles.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { contextMenuItemStyles } from '@vaadin/context-menu/src/styles/vaadin-context-menu-item-base-styles.js';
+
+export const menuBarItemStyles = contextMenuItemStyles;

packages/menu-bar/src/styles/vaadin-menu-bar-item-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const menuBarItemStyles: CSSResult;

packages/menu-bar/src/styles/vaadin-menu-bar-item-core-styles.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-core-styles.js';
+
+export const menuBarItemStyles = [itemStyles];