From e6cd98d5fa0976f41b844ee3b34c0904701abebc Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 15 Oct 2026 16:12:08 -0300 Subject: [PATCH] fix: render overflow menu in light DOM to apply theme styles Close #25 --- .../dayofweekselector/DayOfWeekSelector.java | 2 - .../styles/fc-days-of-week-selector.css | 52 ------------------ .../frontend/src/fc-days-of-week-selector.ts | 53 ++++++++++++------- 3 files changed, 33 insertions(+), 74 deletions(-) delete mode 100644 src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector.css diff --git a/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java b/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java index 84a9f90..78b03ef 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java +++ b/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java @@ -47,8 +47,6 @@ @CssImport("./styles/fc-days-of-week-selector-styles.css") @CssImport(value = "./styles/vaadin-context-menu-list-box.css", themeFor = "vaadin-context-menu-list-box") -@CssImport(value = "./styles/fc-days-of-week-selector.css", - themeFor = "fc-days-of-week-selector") @JsModule("./src/fc-days-of-week-selector.ts") @Tag("fc-days-of-week-selector") public class DayOfWeekSelector extends CustomField> { diff --git a/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector.css b/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector.css deleted file mode 100644 index 5de28ea..0000000 --- a/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector.css +++ /dev/null @@ -1,52 +0,0 @@ -/*- - * #%L - * Day of Week Selector Add-on - * %% - * Copyright (C) 2023 - 2026 Flowing Code - * %% - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * #L% - */ - -/* FOR VAADIN 25 */ -/* for hidden buttons in the overflow */ - -vaadin-button.fc-days-of-week-selector-button { - --lumo-button-size: 40px; - border-radius: 50%; - width: var(--lumo-button-size); - max-width: var(--lumo-button-size); - min-width: var(--lumo-button-size); - height: var(--lumo-button-size); - max-height: var(--lumo-button-size); - min-height: var(--lumo-button-size); - padding-left: calc(var(--lumo-button-size) / 4); - padding-right: calc(var(--lumo-button-size) / 4); -} - -vaadin-button.fc-days-of-week-selector-button[theme~='primary'][disabled]::part(label) { - opacity: 1; -} - -vaadin-button.fc-days-of-week-selector-button[disabled].readOnly{ - color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary)); - background: transparent; -} - -vaadin-button.fc-days-of-week-selector-button[theme~='primary'][disabled].readOnly { - border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct, var(--vaadin-border-color))); -} - -vaadin-button.fc-days-of-week-selector-button[focus-ring]{ - box-shadow: none; -} diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts b/src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts index 0a25915..fed1a4f 100644 --- a/src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts +++ b/src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts @@ -19,10 +19,10 @@ */ import {ResizeMixin} from '@vaadin/component-base/src/resize-mixin.js'; import '@vaadin/context-menu'; -import type {ContextMenuItem} from '@vaadin/context-menu'; +import type {ContextMenu, ContextMenuItem} from '@vaadin/context-menu'; import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; import {css, html, LitElement} from 'lit'; -import {customElement, property, query, queryAssignedNodes, state} from 'lit/decorators.js'; +import {customElement, property, query, queryAssignedNodes} from 'lit/decorators.js'; import {Button} from "@vaadin/button"; @customElement('fc-days-of-week-selector') @@ -43,8 +43,12 @@ export class DaysOfWeekSelector extends ResizeMixin(ThemableMixin(LitElement)) { @property() label: string = ''; - @state() - private _overflowItems: ContextMenuItem[] = []; + /** + * Overflow context menu. It is kept in the light DOM (slotted into the shadow root) + * so that the cloned buttons it renders share the same scope as the original ones + * and get the same global theme styles (e.g. Aura). + */ + private _overflowMenu?: ContextMenu; static styles = [ css` @@ -69,6 +73,7 @@ export class DaysOfWeekSelector extends ResizeMixin(ThemableMixin(LitElement)) { [part="overflow-badge"] { line-height: 0.5em; + margin-left: calc(var(--lumo-space-s, var(--vaadin-gap-s, 8px)) * -1); } :host(:not([has-label])) [part='label'] { @@ -95,10 +100,6 @@ export class DaysOfWeekSelector extends ResizeMixin(ThemableMixin(LitElement)) { box-sizing: border-box; } - [part="container"] vaadin-context-menu { - margin-left: calc(var(--lumo-space-s, var(--vaadin-gap-s, 8px)) * -1); - } - ::slotted([slot="overflowIcon"]) { --lumo-icon-size-m: var(--fc-days-of-week-selector-overflow-icon-size, 1em); } @@ -185,12 +186,15 @@ export class DaysOfWeekSelector extends ResizeMixin(ThemableMixin(LitElement)) { } // Update context menu items from hidden buttons - this._overflowItems = overflowButtons.map(button => ({ - component: button, + const overflowItems: ContextMenuItem[] = overflowButtons.map(button => ({ + component: button as HTMLElement, })); + if (this._overflowMenu) { + this._overflowMenu.items = overflowItems; + } // Update badges visibility - this._overflowBadge.toggleAttribute('hidden', this._overflowItems.length < 1); + this._overflowBadge.toggleAttribute('hidden', overflowItems.length < 1); } private _cloneButton(originalButton: Button) { @@ -220,19 +224,28 @@ export class DaysOfWeekSelector extends ResizeMixin(ThemableMixin(LitElement)) {
- - - +
+ `; } + firstUpdated() { + const menu = document.createElement('vaadin-context-menu') as ContextMenu; + menu.slot = 'overflowMenu'; + menu.setAttribute('theme', 'fc-day-of-week-selector-context-menu'); + menu.openOn = 'click'; + menu.listenOn = this._overflowBadge; + this.appendChild(menu); + this._overflowMenu = menu; + } + update(_changedProperties: Map) { if (_changedProperties.has('label')) { this.toggleAttribute('has-label', this.label != null);