Skip to content

refactor: use shared field-required mixin in Lumo checkbox #11749

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

Merged
web-padawan merged 2 commits into from
May 14, 2026
+3 −15
Merged

refactor: use shared field-required mixin in Lumo checkbox #11749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f59e5d
refactor: use shared field-required mixin in Lumo checkbox
web-padawan May 13, 2026
4cfb896
fix: restore position on checkbox requried indicator
web-padawan May 13, 2026
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: 2 additions & 0 deletions packages/vaadin-lumo-styles/components/checkbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@
* 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,
:host {
--_lumo-vaadin-checkbox-inject: 1;
--_lumo-vaadin-checkbox-inject-modules:
lumo_mixins_checkable-field,
lumo_mixins_field-required,
lumo_components_checkbox;
}
16 changes: 1 addition & 15 deletions packages/vaadin-lumo-styles/src/components/checkbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,14 +225,7 @@
}

:host([required]) [part='required-indicator']::after {
content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
transition: opacity 0.2s;
Copy link
Copy Markdown
Member Author

@web-padawan web-padawan May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was copied from form-item.css but not working as in checkbox, indicator is hidden using display: none and not opacity.

color: var(
--vaadin-input-field-required-indicator-color,
var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
);
width: 1em;
text-align: center;
position: static;
Copy link
Copy Markdown
Member Author

@web-padawan web-padawan May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed because in case of checkbox, the indicator itself is positioned and not ::after.
We could probably change that in the future when modifying Lumo to use base styles.

}

:host(:not([has-label])) [part='required-indicator'] {
Expand All @@ -259,13 +252,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));
Expand Down
Loading