API Documentation →
Changes in Vaadin 22
Vaadin 22 contains many improvements. Some of them affect the DOM structure and styling of components.
The most important changes are noted below. Check out the following links to learn more:
See also the release notes for alpha and beta releases for more details.
♿ Accessibility Improvements
See GitHub Project Board for the comprehensive list of accessibility issues addressed in Vaadin 22.
Accessibility fixes have caused a couple of breaking changes listed in the Upgrading Guide.
Special thanks to @knoobie, for the invaluable help with testing, feedback, and guidance with the accessibility work!
⚠️ Moved Packages
All the public web components packages have been moved. Old packages are preserved for backwards compatibility.
Before (Vaadin 14 - 21)
import { GridElement } from '@vaadin/vaadin-grid';After (Vaadin 22)
import { Grid } from '@vaadin/grid';💥 Breaking Changes
- All components
- ⧉ Simplify typings, drop interfaces files (#2813)
- ⧉ Remove element suffix from component classes (#2765)
button
- ⧉ Use role attribute instead of native button (#2394)
charts
- ⧉ Drop update() method support (#2825)
combo-box
- ⧉ Move combo-box items to light DOM (#2467)
combo-box,context-menu,dialog,grid,menu-bar,notification,select,vaadin-overlay
- ⧉ Drop render() method support (#2819)
select
- ⧉ Update select to use new structure (#2282)
upload
- ⧉ Change box-sizing to work in form-layout (#2907)
- ⧉ Rename clear button to remove button (#2809)
🚀 New Features
charts
- ⧉ Update to latest Highcharts (#2433)
combo-box, item
- ⧉ Add checkmark part to item components (#2879)
crud
- ⧉ Add method to control disabled state of save button (#2461)
- ⧉ Expose editor buttons with slots (#2377)
- ⧉ Add no-toolbar attribute to hide toolbar (#2417)
grid
- ⧉ Add row focus mode to convey treegrid structure (#2434)
- ⧉ Add context to event data and update relevant types (#2165)
grid-pro
- ⧉ Indicate editable and read-only cells visually (#2309)
icons
- ⧉ Update main entrypoint to use Vaadin iconset (#2853)
login
- ⧉ Add autocomplete attribute to login-form password field (#2847)
menu-bar
- ⧉ Add i18n property to menu bar (#2384)
- ⧉ Theme property for individual menu items (#2401)
notification
- ⧉ Add a static "show" method to Notification class (#2322)
- ⧉ Add theme support to notification static helper (#2849)
upload
- ⧉ Use semantic HTML tags for the upload (#2316)
vaadin-lumo-styles
- ⧉ Allow easy customizing of required indicator's color (#2810)
virtual-list
- ⧉ Add requestContentUpdate API to virtual list (#2556)
🐛 Bug Fixes
date-picker,grid-pro
- ⧉ Restore focus on date picker outside click (#3097) (#3103)
menu-bar
select
- ⧉ Restore select focus on fullscreen dropdown close (#3120) (#3121)
💅 Polish
app-layout
- ⧉ Remove use of
constant() as no longer required (#3113) (#3119)
- ⧉ Remove no longer needed CSS property (#3115) (#3118)
upload
- ⧉ Stop click event propagation, improve tests (#3086) (#3094)
📝 Documentation
app-layout
- ⧉ Remove incorrectly documented content part (#3114) (#3116)
🏠 Internal
grid
- ⧉ Update JSDoc to use fetch in the data provider (#3098) (#3099)
