Rendering Changes in 5.10.0

The KendoReact 5.10.0 release introduces changes in the rendering of a number of components.

AutoComplete

• Added k-autocomplete-popup class to the k-list-container element.

Buttons

• Removed the shape prop.
• Removed the k-shape-* and k-fab-{shape} classes.

Calendar

• The Today <span> element is now rendered with a flat Button component.
• The k-calendar-nav-today element inside the Calendar navigation is now rendered with a <button> element.

ChunkProgressBar

• Added the k-progressbar-chunks class to the k-reset element.
• Replaced the k-item class with the k-progress-chunk class.
• Removed the k-widget class.

ComboBox

• Added k-combobox-popup class to the k-list-container element.

DataTools

• Added k-table-row class to the column draggable <tr> element.
• Added k-table-row class to the k-filter-row element.
• Added k-table-th class to the k-header element.
• Added k-table-thead class to the k-grid-header element.
• Added k-table-row class to the header row element.
• Removed the k-label class from the k-pager-info and the k-pager-sizes elements.

DatePicker

• Added k-datepicker-popup class to its popup element.

DateRangePicker

• Added k-daterangepicker-popup class to its popup element.

Dialog

• Added the new themeColor property that supports primary, dark, and light theme colors.
• Added the k-window-{themeColor} classes to the Dialog component.
• Added the k-window-titlebar-action and k-dialog-titlebar-action classes to the action buttons.
• Replaced the k-dialog-buttongroup class with k-dialog-actions.
• Replaced the k-dialog-actions and k-dialog-actions classes in the titlebar element with the k-window-titlebar-actions and k-dialog-titlebar-actions classes.

DropDownList

• Added k-dropdownlist-popup class to the k-list-container element.

DropDownTree

• Added k-dropdowntree-popup class to the k-list-container element.

Editor

• Added the k-editor-toolbar class to the Editor toolbar.
• Added the k-editor-window class to all the Editor popups.
• Added k-form-label class to the Editor popup labels.
• Replaced the Dialog components in all popups with Window components.
• Replaced the k-edit-field class of the form element with k-form-field-wrap.
• Toolbar components with popups now have the respective KendoReact components instead of their HTML element counterparts. For example, <input> is replaced with the Input component.
• The Form component is moved inside the popup.
• Removed label wrappers with k-edit-label class.
• Removed the k-editor-link-text-row class.
• Removed the k-widget class.
• Removed the wrapper with k-edit-form-container class in the InsertLink popup element.
• Removed the k-textarea class from the k-editor-textarea elements.

Form

• Added the new size property that allows you to configure the size of the Form and supports small, medium, large and not set size (null).

Grid

In 5.10.0 release we added table-specific classes to the following elements

The 5.10.0 release also introduced the following changes:

• Added the new size property that allows you to configure the size of the Pager and supports small, medium, large and not set size (null).
• Added k-grid-{size} class to the main wrapping element of the component. Necessary to introduce the Size options of the Grid. The child elements inherit the k-grid-{size} class.
• Added k-toolbar-{size} class to the wrapping element of the toolbar.
• Added a new <div className="k-grouping-drop-container"> wrapper of the groups.
• Added k-grid-pager class to the nested Pager component.
• Added k-table-alt-row class to the k-alt element.
• Removed the k-widget class of the k-grid element.
• Removed the k-grouping-header-flex class from the k-grouping-header element.
• Removed the k-indicator-container wrapper in favor of the newly added <div className="k-chip-list"> element with a size-depending k-chip-list-{Size} class.
• Changed the role of the <td className="k-group-cell"> element from presentation to gridcell.

ListBox

• Replaced the k-listbox-toolbar class with the k-listbox-actions class.
• Replaced the k-listbox-toolbar-left, k-listbox-toolbar-right, k-listbox-toolbar-top, and k-listbox-toolbar-bottom classes with the k-listbox-actions-left, k-listbox-actions-right, k-listbox-actions-top, and k-listbox-actions-bottom classes.
• The ListBox actions are now wrapped in a single container.
• Removed the <ul> wrapper of the action buttons and its child <li> elements.

ListView

• Removed the k-widget class.

MultiSelect

• Added a separate chip list wrapper with class k-input-values.
• Added k-multiselect-popup class to the k-list-container element.

MultiSelectTree

• Added k-multiselecttree-popup class to the k-list-container element.

Notification

• Removed the k-widget class.
• Added k-notification-status class the IconWrap component.
• Removed the <div class="k-notification-wrap"> element.
• Added the k-notification-actions and k-notification-action classes classes where the closable icon is wrapped in a <span class="k-notification-actions"> container.

Pager

• Added the new size property that allows you to configure the size of the Pager and supports small, medium, large and not set size (null).
• Added k-pager-{Size} class set based on the chosen size value.
• Added a new <select className="k-picker k-dropdown-list k-dropdown k-rounded-md"> element with a k-picker-{Size} class set based on the chosen size value.
• Added k-picker k-dropdown-list k-rounded-md classes to the k-dropdown element along with a k-picker-{Size} class set based on the chosen size value.
• Removed the k-widget class from the k-pager wrapper.
• Replaced the <a> elements used for the rendering of the buttons with flat Button components.
• Removed the k-link class.
• Replaced the <ul className="k-pager-numbers"> element with <div className="k-pager-numbers">.
• Removed the <li> button wrapping elements.

ProgressBar

• Added the k-progressbar-value class to the <div> element that contains the k-selected class.
• Removed the k-widget class.
• The progress width and height are now updated based on --kendo-progressbar-value.

Scheduler

• Added the new size property that allows you to configure the size of the Scheduler's header and footer components and supports small, medium, large and not set size (null).

TextBox

• Added k-textbox class to the k-input wrapper.

TimePicker

• Added k-timepicker-popup class to its popup element.

Toolbar

• Added the new size property that allows you to configure the size of the Toolbar and supports small, medium, large and not set size (null).
• Replaced the toolbar item <span> wrapper with a wrapping <div className="k-toolbar-item"> element.

TreeList

• Added k-table-{size} and k-grid-table classes to the main wrapping element of the component. Necessary to introduce the Size options of the Grid.
• Added all k-table-{element} classes applicable to the Grid as well.

Upload

The 5.10.0 release introduced changes in the names of the following classes:

The 5.10.0 release also introduced the following changes:

• Added k-upload-button-wrap class.
• Added k-upload-button class to the upload button component.
• Added the k-upload-dropzone class to the k-dropzone element.
• Added k-file-error class to the k-file-invalid element.
• Replaced the <input> button with KendoReact Button component.
• Removed the k-widget class from the k-upload element.
• Removed the k-button and k-flat classes from the upload button.
• Removed both k-text-success and k-text-error classes from k-validation-message.
• Removed the k-upload-status-total class of the upload status element.
• The Upload component now uses Button and ProgressBar components for its upload UI.
• Upload action buttons are now wrapped in a <span> element with k-upload-actions class instead of the used <strong> wrapper with k-upload-status class.

Window

• Added the new themeColor property that supports primary, dark, and light theme colors.
• Added the k-window-* classes to the Window component.
• Added k-resize-handles-wrapper class to the Draggable wrapper.
• Replaced the k-window-action class in the titlebar buttons with k-window-titlebar-action.
• Replaced the k-window-actions class in the titlebar element for the k-window-titlebar-actions class.
• Replaced the k-window-buttongroup class with the .k-window-actions class.
• Replaced the built-in close icon of the Window with x.
• Removed the k-widget class.
• Removed the k-dialog-titlebar class from the titlebar element.