Skip to content
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

Jump to bottom

Docs/custom flow component cssimport #3779

Open
wants to merge 2 commits into
base: latest
Choose a base branch
from
Open

Docs/custom flow component cssimport #3779

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
228da81
Clarified use of cssimport in custom Flow components
rolfsmeds Oct 8, 2024
07c4b63
Fixed incorrect example of applying cssimport to custom flow component
rolfsmeds Oct 8, 2024
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
19 changes: 8 additions & 11 deletions articles/flow/create-ui/creating-components/extending-component.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

[source,java]
----
@CssImport("./styles/numeric-field-styles.css")
@CssImport(value = "./styles/numeric-field-styles.css")
public class NumericField extends TextField {

private Button substractBtn;
Expand Down Expand Up @@ -81,19 +81,16 @@
incrementValue);
});

getElement().setAttribute("theme", "numeric");
addClassName("numeric");
styleBtns();

addToPrefix(substractBtn);
addToSuffix(addBtn);
}

private void styleBtns() {
// Note: The same as addThemeVariants
substractBtn.getElement()
.setAttribute("theme", "icon");
addBtn.getElement()
.setAttribute("theme", "icon");
substractBtn.addThemeName("icon");
addBtn.addThemeName("icon");
}

public void setNumericValue(int value) {
Expand All @@ -115,20 +112,20 @@
See <<many-elements#,Creating a Component Using Multiple Elements>> for more.

Import additional styles for the component using the `@CssImport` annotation.
These styles apply only to the `NumericField` component, and not to all `TextField` components.
Note that CSS selectors (based on the `numeric` classname applied to the component) must be used to scope the styles to this component.

Check failure on line 115 in articles/flow/create-ui/creating-components/extending-component.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'classname'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'classname'?", "location": {"path": "articles/flow/create-ui/creating-components/extending-component.adoc", "range": {"start": {"line": 115, "column": 49}}}, "severity": "ERROR"}

*Example*: Creating [filename]`numeric-field-styles.css` to customize the appearance of the `vaadin-text-field` component.
*Example*: Creating [filename]`numeric-field-styles.css` to customize the appearance of the custom `vaadin-text-field` component.

.`styles/numeric-field-styles.css`
[source,css]
----
:host([theme~="numeric"]) [part="input-field"] {
vaadin-text-field.numeric::part(input-field) {
background-color: var(--lumo-base-color);
border: 1px solid var(--lumo-contrast-30pct);
box-sizing: border-box;
}

:host([theme~="numeric"]) [part="value"]{
vaadin-text-field.numeric::part(value) {
text-align: center;
}
----
Expand Down
4 changes: 3 additions & 1 deletion articles/styling/legacy/css-import.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ public class MyUI extends Div {
}
----

Although this mechanism still works, the <<../application-theme#, application theme folder>> is now the recommended approach for loading application styles. It also supports <<../advanced/shadow-dom-styling#, injection of Shadow DOM styles>> into Vaadin components through the `components` sub-folder. `@CssImport` is still useful for loading stylesheets into custom standalone components, however.
Although this mechanism still works, the <<../application-theme#, application theme folder>> is now the recommended primary approach for loading application styles. It also supports <<../advanced/shadow-dom-styling#, injection of Shadow DOM styles>> into Vaadin components through the `components` sub-folder.

`@CssImport` is still a valid mechanism for loading stylesheets into <<{articles}/flow/create-ui/creating-components#, custom Flow-based components>>, in cases where these need to be separate from the application theme.
Loading