Skip to content

refactor: upgrade to v25 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

refactor: upgrade to v25 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
59439e7
bump versions and update demo
sissbruecker Oct 22, 2025
a8e5019
update popover to slot overlay content
sissbruecker Oct 22, 2025
e48c3d3
update overlay styles
sissbruecker Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ import '@vaadin/menu-bar';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/text-field';

import '@vaadin/vaadin-lumo-styles/icons.js';
1 change: 1 addition & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<script>
window.addEventListener('WebComponentsReady', () => document.querySelector('main').classList.remove('hidden'));
</script>
<link rel="stylesheet" href="/node_modules/@vaadin/vaadin-lumo-styles/lumo.css" />

<!-- demo styles -->
<style>
Expand Down
24 changes: 12 additions & 12 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
},
"dependencies": {
"@vaadin/button": "^24.7.1",
"@vaadin/component-base": "^24.5.8",
"@vaadin/popover": "^24.5.8",
"@vaadin/vaadin-lumo-styles": "^24.5.8",
"@vaadin/vaadin-themable-mixin": "^24.5.8",
"@vaadin/vertical-layout": "^24.5.8",
"@vaadin/button": "^25.0.0-beta1",
"@vaadin/component-base": "^25.0.0-beta1",
"@vaadin/popover": "^25.0.0-beta1",
"@vaadin/vaadin-lumo-styles": "^25.0.0-beta1",
"@vaadin/vaadin-themable-mixin": "^25.0.0-beta1",
"@vaadin/vertical-layout": "^25.0.0-beta1",
"lit": "^3.0.0"
},
"devDependencies": {
Expand All @@ -59,12 +59,12 @@
"@types/jest": "^29.5.14",
"@typescript-eslint/eslint-plugin": "^5.48.0",
"@typescript-eslint/parser": "^5.48.0",
"@vaadin/combo-box": "^24.7.1",
"@vaadin/date-picker": "^24.7.1",
"@vaadin/icon": "^24.7.1",
"@vaadin/icons": "^24.7.1",
"@vaadin/menu-bar": "^24.7.1",
"@vaadin/text-field": "^24.7.1",
"@vaadin/combo-box": "^25.0.0-beta1",
"@vaadin/date-picker": "^25.0.0-beta1",
"@vaadin/icon": "^25.0.0-beta1",
"@vaadin/icons": "^25.0.0-beta1",
"@vaadin/menu-bar": "^25.0.0-beta1",
"@vaadin/text-field": "^25.0.0-beta1",
"@web/dev-server": "^0.4.3",
"@web/test-runner": "^0.19.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
Expand Down
77 changes: 38 additions & 39 deletions src/component/vcf-toolbar-layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,16 @@ export class VcfToolbarLayout extends ResizeMixin(
`;
}

// overflow container is attached to the popover overlay (different shadow root) so we need to inject styles globally
// some nested selectors can not be solved with using ::slotted from the shadow root
// so we need to inject global styles for those parts
protected readonly _globalStyles: string = `
/* Hide label on icon buttons */
vcf-toolbar-layout vaadin-button[theme~="icon"]::part(label) {
vcf-toolbar-layout > vaadin-button[theme~="icon"]::part(label) {
display: none;
}

/* Overflow container styles */
.overflow-container {
vcf-toolbar-layout > .overflow-container {
--overflow-container-padding: var(--lumo-space-s);
--overflow-container-item-gap: var(--lumo-space-xs);
--overflow-container-text-color: var(--lumo-body-text-color);
Expand All @@ -95,12 +96,12 @@ export class VcfToolbarLayout extends ResizeMixin(
padding: var(--overflow-container-padding);
}

vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container {
vcf-toolbar-layout[theme~="fixed-width-prefix"] .overflow-container {
--overflow-container-prefix-width: var(--lumo-space-l);
}

/* native element styles */
vcf-toolbar-layout hr {
vcf-toolbar-layout > hr {
display: inline-block;
flex-shrink: 0;
align-self: stretch;
Expand All @@ -111,109 +112,109 @@ export class VcfToolbarLayout extends ResizeMixin(
margin: var(--lumo-space-xs);
}

vcf-toolbar-layout hr:last-child {
vcf-toolbar-layout > hr:last-child {
visibility: hidden;
margin: 0;
margin-right: calc(-1 * var(--vcf-toolbar-layout-gap));
width: 0;
}

.overflow-container > hr:first-child {
vcf-toolbar-layout > .overflow-container > hr:first-child {
display: none;
}

.overflow-container > hr {
vcf-toolbar-layout > .overflow-container > hr {
border: none;
background-color: var(--lumo-contrast-10pct);
margin: 0;
height: 1px;
width: 100%;
}

.overflow-container > a {
vcf-toolbar-layout > .overflow-container > a {
display: flex;
align-items: center;
}

/* vaadin component styles */

:not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
:not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix) {
vcf-toolbar-layout > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
vcf-toolbar-layout > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix) {
color: var(--overflow-container-prefix-suffix-color);
}

.overflow-container > [has-label]:first-child {
vcf-toolbar-layout > .overflow-container > [has-label]:first-child {
padding-top: 0;
}

.overflow-container > [has-label] {
vcf-toolbar-layout > .overflow-container > [has-label] {
padding-top: var(--lumo-space-s);
}

vcf-toolbar-layout > vaadin-menu-bar > vaadin-menu-bar-button {
width: unset !important;
}

.overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
justify-content: left;
}

.overflow-container > vaadin-button,
.overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
vcf-toolbar-layout > .overflow-container > vaadin-button,
vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
--vaadin-button-padding: var(--lumo-space-s);
--vaadin-button-margin: 0px;
}

.overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
width: unset !important;
flex: 1;
}

.overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
width: 100%;
}

.overflow-container > vaadin-button[theme~="primary"] {
vcf-toolbar-layout > .overflow-container > vaadin-button[theme~="primary"] {
background: var(--vaadin-button-background);
color: var(--lumo-primary-text-color);
font-weight: var(--vaadin-button-font-weight);
}

.overflow-container > vaadin-button[theme~="icon"]::part(prefix) {
vcf-toolbar-layout > .overflow-container > vaadin-button[theme~="icon"]::part(prefix) {
margin-left: -0.25em;
margin-right: 0.25em;
}

/* Theme variant to hide prefix & suffix in overflow container */
vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-button::part(prefix),
vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-button::part(suffix),
vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix),
vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(suffix) {
vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-button::part(prefix),
vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-button::part(suffix),
vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix),
vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(suffix) {
display: none;
}

.overflow-container > vaadin-button::part(label),
.overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(label) {
vcf-toolbar-layout > .overflow-container > vaadin-button::part(label),
vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(label) {
text-align: left;
flex-grow: 1;
}

.overflow-container > ::part(input-field) {
vcf-toolbar-layout > .overflow-container > ::part(input-field) {
padding: 0 var(--lumo-space-xs);
}

.overflow-container > a {
vcf-toolbar-layout > .overflow-container > a {
padding: 0 var(--lumo-space-s);
height: var(--lumo-size-m);
}

/* Theme variant forcing horizonal alignment of prefixes */
vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container > vaadin-button::part(prefix),
vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix) {
vcf-toolbar-layout[theme~="fixed-width-prefix"] > .overflow-container > vaadin-button::part(prefix),
vcf-toolbar-layout[theme~="fixed-width-prefix"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix) {
width: var(--overflow-container-prefix-width);
}

vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container > a {
vcf-toolbar-layout[theme~="fixed-width-prefix"] > .overflow-container > a {
padding-left: calc(var(--lumo-space-s) + 0.2em + var(--overflow-container-prefix-width, 0px));
}
`;
Expand Down Expand Up @@ -280,16 +281,12 @@ export class VcfToolbarLayout extends ResizeMixin(
// setup overflow container
this._overflowContainer = document.createElement('vaadin-vertical-layout');
this._overflowContainer.classList.add('overflow-container');
this._overflowContainer.slot = "overflow-content";
this.append(this._overflowContainer);

// setup the popover
this._popover = this.shadowRoot.querySelector('vaadin-popover') as Popover;
this._popover.target = this._overflowButton;
this._popover.renderer = (root: Element) => {
// Ensure content is only added once
if (!root.firstChild) {
root.appendChild(this._overflowContainer!);
}
};

// process overflow items to set initial state
// for some reason, button width is ignored unless we need to wait for the next frame
Expand Down Expand Up @@ -333,7 +330,9 @@ export class VcfToolbarLayout extends ResizeMixin(
position="bottom-start"
overlay-role="menu"
accessible-name-ref="overflowed menu items"
></vaadin-popover>
>
<slot name="overflow-content"></slot>
</vaadin-popover>
`;
}

Expand Down Expand Up @@ -444,7 +443,7 @@ export class VcfToolbarLayout extends ResizeMixin(
}

protected _getVisibleItems(): Element[] {
return Array.from(this.querySelectorAll(':scope > *:not([slot="overflow-button"])'));
return Array.from(this.querySelectorAll(':scope > *:not([slot])'));
}

protected _getOverflowedItems(): Element[] {
Expand Down
7 changes: 0 additions & 7 deletions src/theme/lumo/vcf-toolbar-layout-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import '@vaadin/vaadin-lumo-styles/font-icons.js';

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

// todo: move styles here
Expand Down