From 0c2ffdb6225c325713e5bb0ad9972b96ba36ef0d Mon Sep 17 00:00:00 2001 From: Kendo Bot Date: Wed, 15 Mar 2023 04:58:43 +0200 Subject: [PATCH] Sync with Kendo UI Professional --- .../2023-backward-compatibility.md | 338 +++++++++++++++--- 1 file changed, 281 insertions(+), 57 deletions(-) diff --git a/docs/backwards-compatibility/2023-backward-compatibility.md b/docs/backwards-compatibility/2023-backward-compatibility.md index 41e7c5a4fa1..20d5c514546 100644 --- a/docs/backwards-compatibility/2023-backward-compatibility.md +++ b/docs/backwards-compatibility/2023-backward-compatibility.md @@ -10,70 +10,294 @@ position: 0 This article lists the breaking or important changes in the 2023 releases of Kendo UI. -## Kendo UI 2023 R1 +## Kendo UI 2023 R1 SP1 -**ToolBar** +As of the 2023 R1 SP1 release, to unify their support for the new [ThemeBuilder Pro](https://docs.telerik.com/themebuilder/introduction), the following components have changed their rendering: -Starting with R1 2023 the tools in the ToolBar are actual widget instances (instead of ToolBar items). As a result, the `click` and `toggle` event arguments objects no longer hold a reference to the ToolBar item (`e.item`). From that release on, the widget instance of the tool can be taken using the `kendo.widgetInstance()` method. When rendered in the OverflowMenu or the popup of a DropDownButton/SplitButton those tools are menu items. Hence, they are not Kendo widgets. A reference to the jQuery elements is still available in those cases in the `e.target` event argument. - -```html -
- -``` +* [Grid]({% slug overview_kendoui_grid_widget %}) +* [FileManager]({% slug overview_kendoui_filemanager_widget %}) +* [TreeList]({% slug overview_kendoui_treelist_widget %}) +* [Gantt]({% slug overview_kendoui_gantt_widget %}) +* [PivotGrid]({% slug overview_kendoui_pivotgrid_widget %}) +* [ListView]({% slug overview_kendoui_listview_widget %}) +* [ProgressBar]({% slug overview_kendoui_progressbar_widget %}) +* [Notification]({% slug overview_kendoui_notification_widget %}) +* [Upload]({% slug overview_kendoui_upload_widget %}) +* [Pager]({% slug overview_kendoui_pager_widget %}) +* [Toolbar]({% slug api-web-toolbar %}) +* [Window]({% slug overview_kendoui_window_widget %}) +* [Editor]({% slug overview_kendoui_editor_widget %}) +* [Calendar]({% overview_kendoui_calendar_widget %}) and [MultiViewCalendar](overview_kendoui_multiviewcalendar_widget) +* Animation Containers and their dependent components -Starting with R1 2023 the ToolBar buttons will always be rendered as ` + + + + ``` + +* The `.k-upload-status-total` class has been removed from the `.k-upload-status` element. +* The `.k-validation-icon` class is now removed from the `.upload-status` icon. +* The `.k-file-error` class has been added to `.k-file-invalid`. +* `.k-file-single` and `.k-file-multiple` wrapper elements have been added inside the `.k-file` element for single and multiple files respectively. +* The `.k-file-group-wrapper`, `.k-file-invalid-group-wrapper`, `.k-multiple-files-group-wrapperand`, and `.k-multiple-files-invalid-group-wrapper` classes are now replaced with `.k-file-icon-wrapper`. +* The `.k-file-group` icon class is now replaced with the `.k-file-icon` class. +* The `.k-file-name-size-wrap` class is now replaced with the `.k-file-info` class. +* The `.k-file-name-invalid` class has been removed from the `.k-file-name` element. +* The `.k-text-success` and `.k-text-error` classes have been removed from the `.k-validation-message` element. +* The `.k-file-information` class is now replaced with a `.k-file-summary` class. +* The Upload action buttons are no longer wrapped in a `.k-upload-status` class but in the `.k-upload-actions` class. +* The progress bar is now replaced with the [ProgressBar](/controls/interactivity/progressbar/overview) component without visible labels. + +**Pager** + +* The `.k-widget` class is now removed from the `.k-pager` element. +* The `.k-pager-numbers` element is now a `
` element. +* The `` navigation buttons have been replaced with `` flat buttons. +* The `...` flat primary buttons. +* The `.k-link` class is now removed from the component. +* The `.k-pager-wrap` class selector is now removed. +* The `.k-pager-mobile-md` and `.k-pager-mobile-sm` classes are added when internal Pager elements are shown or hidden. + +**Toolbar** + +* The `.k-widget` class is now removed from the `.k-toolbar` element. +* The `.k-toolbar-resizable` class is added when the Toolbar is responsive. +* The `.k-overflow-anchor` class has been replaced with the `.k-toolbar-overflow-button` class. + +**Window** + +* The `.k-window-titleless` class is now removed. +* The `.k-window-actions` class in the title bar has been replaced with `.k-window-titlebar-actions`. +* The `.k-window-buttongroup` and `.k-window-buttons` classes are replaced with `.k-window-actions`. +* The `.k-window-titlebar-action` class is added to action buttons inside the title bar. +* The `.k-dialog-{something}` classes are removed from the component. + +**Dialog** + +* A `.k-window` class is now added to the component. +* The `.k-dialog-actions` class in the title bar has been replaced with the `.k-dialog-titlebar-actions` class. +* The `.k-window-titlebar-action` and `.k-dialog-titlebar-action` classes have been added to the action buttons. +* The `.k-dialog-buttongroup` and `.k-dialog-buttons` classes are now replaced with `.k-dialog-actions`. +* A new `.k-dialog-{value}` theme color property has been added to the `.k-window` element. It supports the `primary`, `dark`, and `light` theme colors. + + ``` + +
...
+ + +
...
+ + +
...
+ ``` **Editor** -Starting with R1 2023 SP1 the Editor widget features an improved method to register custom Tools. The main difference with the previous implementation is the substitution of the `ToolTemplate` instance with a `ui` configuration object. An example of of the new approach of registering tools could be found in the [Create Custom Editor Tool]({% slug editor-custom-tool %}) KB article. - -Starting with R1 2023 SP1 release the Editor no longer allows the use of togglable and non-togglable buttons in the same ButtonGroup of its ToolBar. If such a configuration is present, all buttons will be rendered as simple (non-togglable) buttons. - -Starting with R1 2023 SP1 release the `break` pseudo tool is no longer needed in order to separate tools from the same logical group. In order to display such tools separately, you should simply place them in separate arrays in the `tools` configuration: - -```dojo - - $("#editor").kendoEditor({ - tools: [ - ["bold"], - ["italic"], - ["underline"], - ["strikethrough"] - ] - }); -``` - -Multiple tools could also be grouped in a group by following the same approach: - -```dojo - - $("#editor").kendoEditor({ - tools: [ - ["bold", "italic"], - ["underline", "strikethrough"] - ] - }); -``` +* As of R1 2023 SP1, the Editor features an improved method to register custom tools. The main difference from the previous implementation is the substitution of the `ToolTemplate` instance with a `ui` configuration object. An example of the new approach of registering tools is available in the knowledge-base article on [creating custom Editor tools]({% slug editor-custom-tool %}). +* The Editor no longer allows the use of togglable and non-togglable buttons in the same ButtonGroup of its ToolBar. If such a configuration is present, all buttons will be rendered as simple (non-togglable) buttons. +* The `break` pseudo tool is no longer needed for separating tools from the same logical group. To display such tools separately, place them in separate arrays in the `tools` configuration: + + ```dojo + + $("#editor").kendoEditor({ + tools: [ + ["bold"], + ["italic"], + ["underline"], + ["strikethrough"] + ] + }); + ``` + + You can also group multiple tools in a group by following the same approach: + + ```dojo + + $("#editor").kendoEditor({ + tools: [ + ["bold", "italic"], + ["underline", "strikethrough"] + ] + }); + ``` + +* The `table` element has been replaced with a `
` element. +* The toolbar is no longer wrapped inside the `.k-editor-toolbar-wrap` element. +* The toolbar is no longer a `