docs: V24-V25 upgrade guide (DS) #4679
Conversation
|
Fixes #4688 |
yuriy-fix
force-pushed
the
feat/vaadin-24-to-25-upgrade-guide-ds
branch
from
0540e2e to
3a906f7
Compare
|
|
articles/upgrading/index.adoc
Outdated
|
|
||
| The special [filename]`document.css` file (for loading styles into the document root in embedded components) is removed as no longer necessary. | ||
|
|
||
| === Themes |
There was a problem hiding this comment.
Could be merged with the "Changes in Theming System" section, i.e. "Changes in Theming System" content can be just moved to "=== Themes and Styling" ?
There was a problem hiding this comment.
Adjusted the sections
AI Language ReviewThe changes between the old and new versions of this AsciiDoc file appear to primarily involve updates and expansions to the guide content. However, no issues that require immediate improvement have been identified in the modified sections of the document. The content is clear, accurate, and adheres to the guidelines provided. |
vursen
force-pushed
the
feat/vaadin-24-to-25-upgrade-guide-ds
branch
from
2204e56 to
df5a612
Compare
| @import "@vaadin/vaadin-lumo-styles/lumo.css"; | ||
| ---- | ||
|
|
||
| All Lumo styles, including badges, but excluding Lumo Utility Classes are included by default when the Lumo theme is loaded. To load the utility classes, add the following line to a stylesheet: |
There was a problem hiding this comment.
We should probably mention the compact preset that can be loaded as follows:
@import "@vaadin/vaadin-lumo-styles/presets/compact.css";
articles/upgrading/index.adoc
Outdated
| Component overlays (like Dialog or the Combo Box drop-down) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: | ||
|
|
||
| * The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal class name to the component instead. | ||
| * The `vaadin-xyz-overlay` (such as `vaadin-dialog-overlay`) elements have been removed (as they are now unnecessary). Refactor any CSS targeting these elements to target the component itself instead (e.g. `vaadin-dialog` instead of `vaadin-dialog-overlay`). Other CSS selectors are unaffected by this change. |
There was a problem hiding this comment.
- The
vaadin-xyz-overlay(such asvaadin-dialog-overlay) elements have been removed (as they are now unnecessary)
This sounds quite confusing. Let's replace "have been removed" with something like this:
elements are now in placed Shadow DOM of their respective host elements, and are not supposed to be targeted by global CSS, but still provide same set of stylable parts.
articles/upgrading/index.adoc
Outdated
| ==== Context Menu | ||
| The [methodname]`add` method has been removed from the Flow [classname]`ContextMenu`. Instead, use [methodname]`addItem` to add menu items, or [methodname]`addComponent` to add generic components without wrapping them into a menu item. | ||
|
|
||
| ==== Popover |
There was a problem hiding this comment.
nit: should we sort this list alphabetically? It's a bit unexpected that Popover comes after Context Menu.
Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
articles/upgrading/index.adoc
Outdated
| @import "@vaadin/vaadin-lumo-styles/utility.css"; | ||
| ---- | ||
|
|
||
| Vaadin 25 also supports Tailwind CSS utility classes. |
There was a problem hiding this comment.
Thinking maybe we shouldn't mention TW here as it's neither all that relevant for upgraders nor actually fully implemented yet, and will be "experimental" in 25.0 if we manage to get it there.
articles/upgrading/index.adoc
Outdated
|
|
||
| The [classname]`WebComponentExporter` feature in Flow allows you to export Flow components as Web Components for embedding into non-Vaadin user interfaces. In Vaadin 25, stylesheets loaded into exported components using the [classname]`@CssImport` annotation only load those styles into the exported component’s shadow DOM, not the surrounding page as before. To load the same styles into the surrounding page, import the stylesheet to it separately. | ||
|
|
||
| === Overlays |
There was a problem hiding this comment.
IMO this makes more sense under "Components"
Co-authored-by: Rolf Smeds <rolf@vaadin.com>
Co-authored-by: Rolf Smeds <rolf@vaadin.com>
Contributes to #4574
Fixes https://github.com/vaadin/components-team-tasks/issues/639
Depends on #4594