From 2f59e5d7db319b224a0a44d18ef9d7b2e476d274 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 13 May 2026 20:09:10 +0300 Subject: [PATCH 1/2] refactor: use shared field-required mixin in Lumo checkbox Co-Authored-By: Claude Opus 4.7 (1M context) --- .../vaadin-lumo-styles/components/checkbox.css | 2 ++ .../src/components/checkbox.css | 18 ------------------ 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/vaadin-lumo-styles/components/checkbox.css b/packages/vaadin-lumo-styles/components/checkbox.css index cb83a94a702..da2b1613984 100644 --- a/packages/vaadin-lumo-styles/components/checkbox.css +++ b/packages/vaadin-lumo-styles/components/checkbox.css @@ -4,6 +4,7 @@ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ @import '../src/mixins/checkable-field.css'; +@import '../src/mixins/field-required.css'; @import '../src/components/checkbox.css'; :root, @@ -11,5 +12,6 @@ --_lumo-vaadin-checkbox-inject: 1; --_lumo-vaadin-checkbox-inject-modules: lumo_mixins_checkable-field, + lumo_mixins_field-required, lumo_components_checkbox; } diff --git a/packages/vaadin-lumo-styles/src/components/checkbox.css b/packages/vaadin-lumo-styles/src/components/checkbox.css index 502650fa021..d1f0fb52d50 100644 --- a/packages/vaadin-lumo-styles/src/components/checkbox.css +++ b/packages/vaadin-lumo-styles/src/components/checkbox.css @@ -224,17 +224,6 @@ left: var(--lumo-space-xs); } - :host([required]) [part='required-indicator']::after { - content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022')); - transition: opacity 0.2s; - color: var( - --vaadin-input-field-required-indicator-color, - var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color)) - ); - width: 1em; - text-align: center; - } - :host(:not([has-label])) [part='required-indicator'] { display: none; } @@ -259,13 +248,6 @@ --_focus-ring-color: var(--lumo-error-color-50pct); } - :host([invalid]) [part='required-indicator']::after { - color: var( - --vaadin-input-field-required-indicator-color, - var(--lumo-required-field-indicator-color, var(--lumo-error-text-color)) - ); - } - /* Error message */ [part='error-message'] { font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs)); From 4cfb896e93c4d77e23d8a57e72dd4294ca9e95e1 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 13 May 2026 20:20:20 +0300 Subject: [PATCH 2/2] fix: restore position on checkbox requried indicator --- packages/vaadin-lumo-styles/src/components/checkbox.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/vaadin-lumo-styles/src/components/checkbox.css b/packages/vaadin-lumo-styles/src/components/checkbox.css index d1f0fb52d50..eaddc980a65 100644 --- a/packages/vaadin-lumo-styles/src/components/checkbox.css +++ b/packages/vaadin-lumo-styles/src/components/checkbox.css @@ -224,6 +224,10 @@ left: var(--lumo-space-xs); } + :host([required]) [part='required-indicator']::after { + position: static; + } + :host(:not([has-label])) [part='required-indicator'] { display: none; }