feat: add Lumo custom properties for input field label #6636
Conversation
| @@ -47,20 +43,12 @@ const inputField = css` | |||
| } | |||
|
|
|||
| /* Hover */ | |||
| :host(:hover:not([readonly]):not([focused])) [part='label'] { | |||
There was a problem hiding this comment.
Moved these styles to the file where [part='label'] are actually defined.
| --_label-color-focused: var(--vaadin-input-field-focused-label-color, var(--lumo-primary-text-color)); | ||
| --_label-color-hovered: var(--vaadin-input-field-hovered-label-color, var(--lumo-body-text-color)); | ||
| --_label-font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s)); | ||
| --_label-font-weight: var(--vaadin-input-field-label-font-weight, 500); |
There was a problem hiding this comment.
Off topic: You also wanna align the --lumo properties I've added some time ago? (21d2556)
There was a problem hiding this comment.
Good question. We don't have these on the preliminary list at the moment, although some other --lumo- prefixed properties e.g. --lumo-button-size and --lumo-text-field-size are planned to be aligned.
There was a problem hiding this comment.
Indeed, I had forgotten about --lumo-required-field-indicator and --lumo-required-field-indicator-color.
I think that now that we're drawing a line between the abstract Lumo properties prefixed with --lumo- and the component/feature-specific properties prefixed with --vaadin-, it would make sense to refactor those to be --vaadin-prefixed (while keeping the current props around for backward compact, of course)
web-padawan
force-pushed
the
feat/input-field-label-props
branch
from
93328e2
to
428d958
Compare
web-padawan
force-pushed
the
feat/input-field-label-props
branch
from
428d958
to
ba756e6
Compare
| @@ -10,17 +10,26 @@ import '../typography.js'; | |||
| import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | |||
|
|
|||
| const requiredField = css` | |||
| :host { | |||
There was a problem hiding this comment.
I suppose this is another place where we don't really need these private intermediate properties that we decided to remove from the helper and error stylesheets?
web-padawan
force-pushed
the
feat/input-field-label-props
branch
from
ba756e6
to
69d8a3d
Compare
|
Kudos, SonarCloud Quality Gate passed!
|
|
This ticket/PR has been released with Vaadin 24.3.0.alpha1 and is also targeting the upcoming stable 24.3.0 version. |
Description
Part of #2954
Type of change
CSS properties
The following custom CSS properties from the spreadsheet are added in this PR:
--vaadin-input-field-label-color--vaadin-input-field-focused-label-color--vaadin-input-field-hovered-label-color--vaadin-input-field-label-font-size--vaadin-input-field-label-font-weight