docs: new styling docs / styling components #4761
Conversation
AI Language ReviewThe file "Styling Vaadin Components" appears well-written and comprehensive. I do not have any specific suggestions for improvements based on the content presented. |
|
|
||
| Component style properties are prefixed with `--vaadin-`. Most of these properties are specific to a particular component type, such as `--vaadin-button-background`, but some are shared across multiple component types, like the `--vaadin-input-field-*` properties that are used on all input field components. | ||
|
|
||
| Style properties are generally applied to the `html` element at the root of the page, where they apply to all instances of the component within your UI, but you can also scope them to only apply within a certain part of your UI, or individual component instances, by using other selectors, such as CSS classnames. |
There was a problem hiding this comment.
| Style properties are generally applied to the `html` element at the root of the page, where they apply to all instances of the component within your UI, but you can also scope them to only apply within a certain part of your UI, or individual component instances, by using other selectors, such as CSS classnames. | |
| Style properties are generally applied to the `html` element at the root of the page, where they apply to all instances of the component within your UI, but you can also scope them to only apply within a certain part of your UI, or individual component instances, by using other selectors, such as CSS class names. |
|
|
||
| The following layered approach to styling Vaadin components is recommended to minimize the amount of CSS, avoid breaking components and protect your styling from getting broken in future versions. | ||
|
|
||
| . *Theme*: choose the <<{articles}/styling/themes#,theme>> that is the best match to your desired look and feel for components, or stick to the components’ base styles if neither theme is a good match; |
There was a problem hiding this comment.
We generally use * for bullet lists in other articles, should it be used here as well?
| ---- | ||
| -- |
There was a problem hiding this comment.
Not sure if necessary but for me adding newline here fixes .asciidoc highlighting in VS Code for the following == Recommended Styling Approach heading and the bullet list below it:
| ---- | |
| -- | |
| ---- | |
| -- |
Before
After
| vaadin-date-picker::part(input-field)::after { | ||
| background-color: green; | ||
| } |
There was a problem hiding this comment.
Hover highlight only applies to Lumo, let's use this instead and update wording above accordingly:
| vaadin-date-picker::part(input-field)::after { | |
| background-color: green; | |
| } | |
| vaadin-date-picker::part(required-indicator)::after { | |
| color: rebeccapurple; | |
| } |
| vaadin-text-field[disabled]:hover::part(input-field) { | ||
| border-color: red; |
There was a problem hiding this comment.
This was already there in existing docs, but probably could be changed as it doesn't work for Lumo due to pointer-events: none set in [disabled] state that prevents :hover from being applied.
| .CSS Class Names | ||
| [NOTE] | ||
| ==== | ||
| CSS class names are identifier-attributes applied to HTML elements to scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes. |
There was a problem hiding this comment.
Let's align wording with the other similar admonition above (maybe we don't need two of them):
| CSS class names are identifier-attributes applied to HTML elements to scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes. | |
| CSS class names are identifier-attributes applied to HTML elements in order to scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes. |
| .Custom Theme Names Supported, Not Recommended | ||
| [NOTE] | ||
| ==== | ||
| In previous versions of Vaadin, a different feature called _theme names_ was used to apply identifiers that were also propagated to overlays. This feature is still supported and is used for the built-in style variants in Vaadin components. However, it’s no longer the recommended approach for styling components or their overlays. |
There was a problem hiding this comment.
Specifically for overlays, we could mention that this feature may be removed in a future Vaadin version.
Adds the "Styling Vaadin Components" article for the new styling docs.
Note
The PR targets a base branch for the new styling docs. That branch has the old styling docs removed and new articles are added gradually until the new section is ready. Cross-references between new articles will be filled in later, respective sections have been marked with TODOs.