Rendering Changes in 13.0.0

The Kendo UI for Angular 13.0.0 release introduces changes in the rendering of a number of components.

Icons

With the R2 2023 release, the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. This change marks the next milestone in a series of improvements related to Content Security Policy (CSP). For more detailed information, refer to the Migrating Font Icons to SVG Icons article.

Dialog Edit Forms

We have made changes to the rendering of the edit forms within several components, including the Grid, TreeList, Gantt, Scheduler, Editor, DateTimePicker, and TimePicker. Previously, these forms were displayed horizontally, but now they are displayed vertically. Additionally, the action buttons in these components edit forms have been realigned to the bottom left of the form and are no longer stretched. The "Submit" button, which represents the primary action, is positioned before the "Cancel" button. As a result of these changes, it may be necessary to refactor any custom styles that were applied to the edit forms.

BreadCrumb

• Removed the k-flex-none class from the k-breadcrumb-item element.
• Removed the k-flex-none and k-cursor-pointer classes from the k-breadcrumb-link element.
• Removed the k-flex-none and k-cursor-pointer classes from the k-breadcrumb-root-link element.
• Replaced the k-flex-wrap class with !k-flex-wrap inside the k-breadcrumb-container element in collapse mode.
• The item text is now wrapped in a span element <span class="k-breadcrumb-item-text">.

BottomNavigation

• The k-bottom-nav-#{$themeColor} class has been renamed to k-bottom-nav-#{$fillMode}-#{$themeColor}.

ColorGradient

• Changed the ColorGradient alpha and hue slider drag handles from <a class="k-draghandle"></a> to <span class="k-draghandle"></span>.

ColorPalette

• Removed k-colorpalette-table-wrap table wrapper.
• Removed k-palette class from the ColorPalette table.

DropDownTree

• Replaced the k-popup-dropdowntree class with k-dropdowntree-popup. The legacy k-popup-dropdowntree class is still available for backward compatibility until R3 2023.

ExpansionPanel

• The class k-expander-indicator used for the ExpansionPanel icon <span class="k-icon k-i-chevron-up"></span> has been relocated to a higher level, now applied to a wrapper container <span class="k-expander-indicator"></span>.

MultiSelectTree

• Changed the k-multiselect-tree class to k-multiselecttree.
• Changed the k-list-container element from span to div.
• Replaced the k-popup-dropdowntree class with k-multiselecttree-popup. The legacy k-popup-dropdowntree class is still available for backward compatibility until R3 2023.
• Added the k-multiselecttree-popup class to the MultiSelectTree popup.

Scheduler

• Removed the k-scheduler-views-wrapper class from the Scheduler views wrapper.

Slider and RangeSlider

• Removed k-slider-wrap wrapper.