Rendering changes in 4.3.0 (#1394)

* docs(4.3.0): rendering changes article and list article

* docs(4-3-0): rendering changes

* docs: added minor chnages to upgrade docs

---------

Co-authored-by: dmihaylo <[email protected]>

Author: svdimitr

upgrade/rendering-changes/3-4-0.md

@@ -1,16 +1,16 @@
 ---
 title: 3.4.0
 description: Handle the rendering changes in the 3.4.0 release of the Telerik UI for Blazor components.
-page_title: Rendering Changes in 3.4.0
+page_title: Rendering Changes in the 3.4.0 Release 
 slug: changes-in-3-4-0
-position: 1
+position: 4
 ---
 
 # Rendering Changes in 3.4.0
 
 ## "k-state" CSS classes
 
-Previous to the 3.4.0 version we used `k-state-*` CSS classes to denote that the state of an HTML element happened. As part of the 3.4.0 release, we remove the `state` segment of that classes. 
+Previous to the 3.4.0 version we used `k-state-*` CSS classes to denote that the state of an HTML element happened. As part of the 3.4.0 release, we remove the `state` segment of that classes.
 
 >caption A list of all changed "k-state" classes
 
@@ -34,4 +34,3 @@ Previous to the 3.4.0 version we used `k-state-*` CSS classes to denote that the
 ## See also
 
 * [Good styling practices]({%slug good-styling-practices%})
-

upgrade/rendering-changes/3-6-0.md

@@ -1,9 +1,9 @@
 ---
 title: 3.6.0
 description: Handle the rendering changes in the 3.6.0 release of the Telerik UI for Blazor components.
-page_title: Rendering Changes in 3.6.0
+page_title: Rendering Changes in the 3.6.0 Release 
 slug: changes-in-3-6-0
-position: 2
+position: 3
 ---
 
 # Rendering Changes in 3.6.0
@@ -25,7 +25,7 @@ position: 2
 
 ## Calendar
 
-* Removed the `k-content` and the `k-calendar-content` CSS classes from the `<table class="k-calendar-table">` element. 
+* Removed the `k-content` and the `k-calendar-content` CSS classes from the `<table class="k-calendar-table">` element.
 
 ### Calendar Navigation CSS classes
 

upgrade/rendering-changes/4-0-0.md

@@ -1,18 +1,18 @@
 ---
 title: 4.0.0
 description: Handle the rendering changes in the 4.0.0 release of the Telerik UI for Blazor components.
-page_title: Rendering Changes in 4.0.0
+page_title: Rendering Changes in the 4.0.0 Release
 slug: rendering-changes-in-4-0-0
-position: 3
+position: 2
 ---
 
 # Rendering Changes in 4.0.0
 
 * [Calendar](#calendar)
 * [Card](#card)
 * [ChunkProgressBar](#chunkprogressbar)
-* [Common - Date pickers](#common---date-pickers)
-* [Common - Selects](#common---selects)
+* [(Common) Date Pickers](#common-for-date-pickers)
+* [(Common) Selects](#common-for-selects)
 * [Dialog](#dialog)
 * [Editor](#editor)
 * [FileSelect](#fileselect)
@@ -34,11 +34,11 @@ position: 3
 
 ## Calendar
 
-* Changed `<span class="k-calendar-nav-today k-today">` to a flat button (`<button class="k-button k-calendar-nav-today k-button-flat k-rounded-md k-button-md k-button-flat-primary"><span class="k-button-text">Today</span></button>`).
+The `<span class="k-calendar-nav-today k-today">` CSS class has been changed to a Flat button (`<button class="k-button k-calendar-nav-today k-button-flat k-rounded-md k-button-md k-button-flat-primary"><span class="k-button-text">Today</span></button>`).
 
 ## Card
 
-* Renamed the following classes:
+The following classes related to the Telerik UI for Blazor Card component have been renamed:
 
 | Pre-4.0.0        | 4.0.0      |
 |------------------|------------|
@@ -49,31 +49,31 @@ position: 3
 
 ## ChunkProgressBar
 
-* Added `k-chunk-progressbar` class to the `<div class="k-progressbar>`.
-* Added `k-progressbar-chunks` class to the `<ul>` element.
-* Replaced the `k-item` class of the `<li>` elements with `k-progressbar-chunk` class.
+* Added the `k-chunk-progressbar` CSS class to the `<div class="k-progressbar>`.
+* Added the `k-progressbar-chunks` CSS class to the `<ul>` element.
+* Replaced the `k-item` class of the `<li>` elements with the `k-progressbar-chunk` class.
 
-## Common - Date Pickers
+## Common for Date Pickers
 
-* All date pickers that incorporate a calendar inherit the change of the `<span class="k-calendar-nav-today k-today">` to a flat button (DatePicker, DateTimePicker, DateRangePicker, TimePicker).
-* Added `k-[COMPONENT]-popup` class to the popup element of all date pickers (DatePicker, DateTimePicker, DateRangePicker, TimePicker).
+* All date pickers that incorporate a calendar, namely, the DatePicker, DateTimePicker, DateRangePicker, and TimePicker, inherit the change of the `<span class="k-calendar-nav-today k-today">`CSS class to a Flat button.
+* Added the `k-[COMPONENT]-popup` class to the popup element of all date pickers, namely, the DatePicker, DateTimePicker, DateRangePicker, and TimePicker.
 
-## Common - Selects
+## Common for Selects
 
-* Added `k-[COMPONENT]-popup` class to the popup element of all selects (AutoComplete, ColorPicker, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect).
+The `k-[COMPONENT]-popup` class has been added to the popup element of all components providing a selection option such as the AutoComplete, ColorPicker, ComboBox, DropDownList, MultiColumnComboBox, and MultiSelect.
 
 ## Dialog
 
-* Added `k-rounded-md` to the buttons in the Predefined Dialogs.
-* Renamed `k-window-actions` and `k-dialog-actions` classes to `k-window-titlebar-actions` and `k-dialog-titlebar-actions`.
-* Renamed `k-window-action` and `k-dialog-action` classes to `k-window-titlebar-action` and `k-dialog-titlebar-action`.
-* Removed `k-dialog-buttongroup` class from the `<div class="k-actions>`.
-* Added `k-actions-horizontal`, `k-window-actions` and `k-dialog-actions` to the `<div class="k-actions>`.
+* Added `k-rounded-md` to the buttons in the predefined dialogs.
+* Renamed the `k-window-actions` and `k-dialog-actions` classes to `k-window-titlebar-actions` and `k-dialog-titlebar-actions`.
+* Renamed the `k-window-action` and `k-dialog-action` classes to `k-window-titlebar-action` and `k-dialog-titlebar-action`.
+* Removed the `k-dialog-buttongroup` class from the `<div class="k-actions>`.
+* Added `k-actions-horizontal`, `k-window-actions`, and `k-dialog-actions` to `<div class="k-actions>`.
 
 ## Editor
 
-* Added `k-editor-window` class to all popups.
-* Added `k-editor-toolbar` class to the Editor Toolbar.
+* Added the `k-editor-window` class to all popups.
+* Added the `k-editor-toolbar` class to the Editor toolbar.
 
 ## FileSelect
 
@@ -86,19 +86,18 @@ position: 3
 
 ## Filter
 
-* Added `k-toolbar-item` class to the `<div class="k-filter-toolbar-item>`.
+The `k-toolbar-item` class has been added to `<div class="k-filter-toolbar-item>`.
 
 ## Form
 
-* Added `k-form-{size}` to the main wrapping element of the component (`<form class="k-form">`). Necessary to introduce the [`Size` options of the Form]({%slug form-appearance%}).
+`k-form-{size}` has been added to the main wrapping element of the Telerik UI for Blazor Form component (`<form class="k-form">`). It's necessary to introduce the [`Size` options of the Form]({%slug form-appearance%}).
 
 ## Gantt
 
-* Added `k-grid-md` class to the `<div class="k-grid>` element - this ensures the default medium size of the Tree.
+* Added the `k-grid-md` class to the `<div class="k-grid>` element. This action ensures the default medium size of the Gantt tree.
+* Added `table`-specific classes to the `table` elements of the Gantt tree:
 
-* Added table-specific classes to the table elements of the Gantt Tree:
-
-| Pre-4.0.0        | 4.0.0      |
+| Prior to 4.0.0        | 4.0.0 and Later      |
 |------------------|------------|
 | `<table>` | `<table class="k-table">` |
 | `<thead>` | `<thead class="k-table-thead">` |
@@ -111,21 +110,21 @@ position: 3
 
 ## Grid
 
-* Wrapped sorting icon in a `<span class="k-sort-icon">`
+* Wrapped the sorting icon in a `<span class="k-sort-icon">` element.
 
-````HTML
+  ````HTML
     <span class="k-sort-icon">
           <span class="k-icon k-i-sort-asc-small"></span>
     </span>
-````
+  ````
 
-* Added `k-grid-{size}` to the main wrapping element of the component (`<div class="k-grid">`). Necessary to introduce the [`Size` options of the Grid]({%slug grid-sizing%}). The child elements inherit the `k-grid-{size}` class.
+* Added `k-grid-{size}` to the main wrapping element of the component (`<div class="k-grid">`). It's necessary to introduce the [`Size` options of the Grid]({%slug grid-sizing%}). The child elements inherit the `k-grid-{size}` class.
 
-* Added Grid-specific classes added to header, body and footer tables - `k-grid-header-table`, `k-grid-table`, `k-grid-footer-table`.
+* Added the `k-grid-header-table`, `k-grid-table`, and `k-grid-footer-table` Grid-specific classes to the header, body, and footer of the tables.
 
-* Added table-specific classes to the table elements of the Grid:
+* Added `table`-specific classes to the `table` elements of the Grid:
 
-| Pre-4.0.0        | 4.0.0      |
+| Prior to 4.0.0        | 4.0.0 and Later      |
 |------------------|------------|
 | `<table>` | `<table class="k-table">` |
 | `<thead>` | `<thead class="k-table-thead">` |
@@ -138,67 +137,67 @@ position: 3
 
 ### Grid Grouping
 
-* Removed `<div class="k-indicator-container">` in favor of `<div class="k-chip>`. The Group value is now rendered in a `<span class="k-chip-content">`. The close icon is now rendered in a `<span class="k-chip-actions">` container.
-* Changed the close icon from `<span class="k-button-icon k-icon k-i-x"></span>` to `<span class="k-button-icon k-icon k-i-x-circle"></span>`.
+* Removed `<div class="k-indicator-container">` in favor of `<div class="k-chip>`. The `Group` value is now rendered in a `<span class="k-chip-content">`. The **Close** icon is now rendered in a `<span class="k-chip-actions">` container.
+* Changed the **Close** icon from `<span class="k-button-icon k-icon k-i-x"></span>` to `<span class="k-button-icon k-icon k-i-x-circle"></span>`.
 * Removed the `k-grouping-header-flex` class from the grouping header.
 * Renamed the class of the empty `<div class="k-indicator-container">` to `<div class="k-grouping-drop-container">`.
 
 ## ListView
 
-* Added `<div class="k-listview-item">` wrapper to Item Template.
+The `<div class="k-listview-item">` wrapper has been added to the Item template.
 
 ## MultiSelect
 
-* Added `k-text-ellipsis` class to the `<span class="k-chip-label>` element.
-* Removed `k-input-values` and `k-selection-multiple` classes from the `<div class="k-chip-list">` element.
+* Added the `k-text-ellipsis` class to the `<span class="k-chip-label>` element.
+* Removed the `k-input-values` and `k-selection-multiple` classes from the `<div class="k-chip-list">` element.
 * Wrapped the `<div class="k-chip-list">` element in a `<div class="k-input-values">` container.
 
 ## Notification
 
-* Removed `<div class="k-notification-wrap">` element.
-* Replaced closable Notification icon `<a class="k-icon k-i-x">` with a `<span class="k-icon k-i-x">`.
+* Removed the `<div class="k-notification-wrap">` element.
+* Replaced the closable Notification icon `<a class="k-icon k-i-x">` with a `<span class="k-icon k-i-x">`.
 * Wrapped the closable icon in a `<span class="k-notification-actions">` container.
 
 ## Pager
 
 * Replaced `<ul class="k-pager-numbers">` with a `<div class="k-pager-numbers">`.
-* Replaced navigation buttons `<a class="k-link k-page-nav">` with flat buttons `<button class="k-pager-nav k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">`.
-* Replaced page numbers `<span class="k-link>` with flat primary buttons `<button class="k-button k-button-{size} k-button-flat k-button-flat-primary">`
-* Removed `k-floatwrap`, `k-link`, `k-pager-wrap` and `k-label` classes.
-* Added `k-pager-{size}` to the main wrapping element of the component (`<div class="k-pager">`). Necessary to introduce the [`Size` options of the Form]({%slug pager-appearance%}).
+* Replaced the `<a class="k-link k-page-nav">` navigation buttons with Flat buttons `<button class="k-pager-nav k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">`.
+* Replaced the `<span class="k-link>` page numbers with Flat primary buttons `<button class="k-button k-button-{size} k-button-flat k-button-flat-primary">`.
+* Removed the `k-floatwrap`, `k-link`, `k-pager-wrap`, and `k-label` classes.
+* Added `k-pager-{size}` to the main wrapping element of the component (`<div class="k-pager">`). It's necessary to introduce the [`Size` options of the Form]({%slug pager-appearance%}).
 
 ## ProgressBar
 
-* Added `k-progressbar-progress` class to the `<div class="k-selected>` element.
-* Changed the inline style of the `<div class="k-progressbar>` from `--kendo-progressbar-progress` to `--kendo-progressbar-value`. (This style conrols the progress width/height.)
+* Added the `k-progressbar-progress` class to the `<div class="k-selected>` element.
+* Changed the inline style of the `<div class="k-progressbar>` from `--kendo-progressbar-progress` to `--kendo-progressbar-value`. The implemented style controls the progress width and height.
 
 ## Splitter
 
-* Removed the `k-collapse-prev` and `k-collapse-next` classes from the `<span class="k-icon>`.
+The `k-collapse-prev` and `k-collapse-next` classes have been removed from the `<span class="k-icon>` element.
 
 ## Toolbar
 
-* Added `k-toolbar-resizable` class to the main wrapping element of the component (`<div class="k-toolbar>`). Applicable when the Toolbar is responsive.
-* Renamed `k-overflow-anchor` class to `k-toolbar-overflow-button` class.
-* Added Toolbar-specific classes to all built-in tools(`k-toolbar-button`, `k-toolbar-toggle-button`, `k-toolbar-button-group` and more)
-* All template items are wrapped in `<div class="k-toolbar-item">`.
-* Added `k-toolbar-{size}` to the main wrapping element of the component (`<div class="k-toolbar">`). Necessary to introduce the [`Size` options of the Toolbar]({%slug toolbar-appearance%}).
-
+* Added the `k-toolbar-resizable` class to the main `<div class="k-toolbar>` wrapping element of the component. Applicable when the Toolbar is responsive.
+* Renamed the `k-overflow-anchor` class to `k-toolbar-overflow-button`.
+* Added Toolbar-specific classes to all built-in tools such as `k-toolbar-button`, `k-toolbar-toggle-button`, `k-toolbar-button-group`, and more.
+* All template items are now wrapped in a `<div class="k-toolbar-item">` element.
+* Added `k-toolbar-{size}` to the main `<div class="k-toolbar">` wrapping element of the component. It's necessary to introduce the [`Size` options of the Toolbar]({%slug toolbar-appearance%}).
 
 ## Treelist
 
-* Wrapped sorting icon in a `<span class="k-sort-icon">`
+* Wrapped the sorting icon in a `<span class="k-sort-icon">` element.
 
-````HTML
+  ````HTML
     <span class="k-sort-icon">
         <span class="k-icon k-i-sort-asc-small"></span>
     </span>
-````
-* Added `k-grid-md` class to the `<div class="k-grid>` element - this ensures the default medium size of the TreeList.
+  ````
 
-* Added table-specific classes to the table elements of the TreeList:
+* Added the `k-grid-md` class to the `<div class="k-grid>` element. This implementation ensures the default medium size of the TreeList.
 
-| Pre-4.0.0        | 4.0.0      |
+* Added `table`-specific classes to the `table` elements of the TreeList:
+
+| Prior to 4.0.0        | 4.0.0 and Later    |
 |------------------|------------|
 | `<table>` | `<table class="k-table">` |
 | `<thead>` | `<thead class="k-table-thead">` |
@@ -210,31 +209,31 @@ position: 3
 
 ## Upload
 
-* Upload `button` and `input` are no longer nested and are now siblings wrapped inside a `<div class="k-upload-button-wrap">`.
-* Removed `k-header` class from `<div class="k-upload>`.
-* Added `k-upload-async` class to `<div class="k-upload>`.
-* Added `k-upload-dropzone` class to `<div class="k-dropzone">`.
-* Removed `k-upload-status-total` class from `<div class="k-upload-status">`.
-* Removed `k-reset` class from the `<ul class="k-upload-files">`.
+* The `button` and `input` of the Upload are no longer nested and are now siblings wrapped inside a `<div class="k-upload-button-wrap">`.
+* Removed the `k-header` class from `<div class="k-upload>`.
+* Added the `k-upload-async` class to `<div class="k-upload>`.
+* Added the `k-upload-dropzone` class to `<div class="k-dropzone">`.
+* Removed the `k-upload-status-total` class from `<div class="k-upload-status">`.
+* Removed the `k-reset` class from the `<ul class="k-upload-files">`.
 * Replaced `<div class="k-progressbar">` with a `<TelerikProgressBar>` component without visible labels.
-* Replaced `k-file-group-wrapper`, `k-file-invalid-group-wrapper`, `k-multiple-files-group-wrapper` and `k-multiple-files-invalid-group-wrapper` classes with `k-file-icon-wrapper` class.
-* Replaced `k-file-name-size-wrapper` class with `k-file-info` class.
-* Removed `k-text-success` and `k-text-error` classes from `<span class="k-file-validation-message">`.
+* Replaced the `k-file-group-wrapper`, `k-file-invalid-group-wrapper`, `k-multiple-files-group-wrapper`, and `k-multiple-files-invalid-group-wrapper` classes with the `k-file-icon-wrapper` class.
+* Replaced the `k-file-name-size-wrapper` class with the `k-file-info` class.
+* Removed the `k-text-success` and `k-text-error` classes from `<span class="k-file-validation-message">`.
 
-### Action buttons
+### Action Buttons
 
-The following changes are applicable when `AutoUpload = "false"`, so the action buttons `Clear` and `Upload` are rendered:
+The following changes are applicable when `AutoUpload = "false"`, so the **Clear** and **Upload** action buttons are rendered:
 
-* Added `k-actions-horizontal` class to `<div class="k-actions>`.
-* Removed `k-clear-selected` and `k-upload-selected` classes from the action buttons.
-* Added `k-rounded-md` class to the action buttons.
-* Wrapped the buttons text in a `<span class="k-button-text">`.
+* Added the `k-actions-horizontal` class to `<div class="k-actions>`.
+* Removed the `k-clear-selected` and `k-upload-selected` classes from the action buttons.
+* Added the `k-rounded-md` class to the action buttons.
+* Wrapped the buttons text in a `<span class="k-button-text">` element.
 
 
 ## Window
 
-* Removed `k-window-wrapper` class from the `<div class="k-window>`.
-* Removed `k-dialog-content` class from the `<div class="k-window-content>`.
-* Removed `k-dialog-titlebar` and `k-header` classes from the `<div class="k-window-titlebar>`.
-* Renamed `k-window-actions` to `k-window-titlebar-actions`
-* Renamed `k-window-action` to `k-window-titlebar-action`
+* Removed the `k-window-wrapper` class from `<div class="k-window>`.
+* Removed the `k-dialog-content` class from `<div class="k-window-content>`.
+* Removed the `k-dialog-titlebar` and `k-header` classes from `<div class="k-window-titlebar>`.
+* Renamed `k-window-actions` to `k-window-titlebar-actions`.
+* Renamed `k-window-action` to `k-window-titlebar-action`.