docs(Common): Add breaking and rendering changes for version 13

upgrade/breaking-changes/13-0-0.md

@@ -0,0 +1,55 @@
+---
+title: 13.0.0
+description: Handle the changes in the 13.0.0 release of the Telerik UI for Blazor components.
+page_title: Breaking Changes in 13.0.0
+slug: changes-in-13-0-0
+position: 945
+---
+
+# Breaking Changes in 13.0.0
+
+## Default Apperance Settings
+
+The default values of the following parameters have changed to `null`:
+
+* `FillMode`
+* `Rounded`
+* `Size`
+* `ThemeColor`
+
+The following information and code snippets use the Button component as an example, but the same idea applies to all components, which use the above parameters.
+
+Starting from version 13.0.0, the default background, border and dimension styles depend on the main component CSS class rather than explicit default parameter values that render additional CSS classes. Technically, changing the default value of a parameter is a breaking change, but your Blazor apps may not require any modifications:
+
+* Components that do not use appearance parameters maintain their styling.
+* Components that use explicit apperance parameters (for example, `Primary` `ThemeColor` or `Large` `Size`) maintain their styling.
+* You may need to adjust CSS selectors in custom CSS rules, if these rules rely on classes that no longer render by default. See [Rendering Changes in Version 13.0.0](slug:rendering-changes-in-13-0-0).
+
+The following configurations produce equivalent UI in all versions of Telerik UI for Blazor, except the explicit `null` settings that are only valid for version 13.0.0 and above.
+
+````RAZOR
+<TelerikButton>
+    Button Text
+</TelerikButton>
+
+<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Solid"
+               Rounded="@ThemeConstants.Button.Rounded.Medium"
+               Size="@ThemeConstants.Button.Size.Medium"
+               ThemeColor="@ThemeConstants.Button.ThemeColor.Base">
+    Button Text
+</TelerikButton>
+
+<TelerikButton FillMode="solid"
+               Rounded="md"
+               Size="md"
+               ThemeColor="base">
+    Button Text
+</TelerikButton>
+
+<TelerikButton FillMode="@null"
+               Rounded="@null"
+               Size="@null"
+               ThemeColor="@null">
+    Button Text
+</TelerikButton>
+````

upgrade/breaking-changes/list.md

@@ -9,6 +9,8 @@ position: 0
 # List of Telerik UI for Blazor Versions with Breaking Changes
 
 This article lists the releases of the Telerik UI for Blazor product that introduce breaking changes. You may want to go through it when [upgrading](slug:upgrade-tutorial) to see whether you are affected.
+
+* [13.0.0](slug:changes-in-13-0-0)
 * [12.0.0](slug:changes-in-12-0-0)
 * [10.0.0](slug:changes-in-10-0-0)
 * [9.0.0](slug:changes-in-9-0-0)

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

@@ -19,4 +19,4 @@ The `li.k-tabstrip-item` elements no longer render a `k-item` CSS class.
 ## See Also
 
 * [Use best practices when overriding theme styles](slug:themes-override#best-practices)
-* [Breaking changes in Telerik UI for Blazor 10.0.0](slug:changes-in-10-0-0)
+* [Breaking changes in Telerik UI for Blazor 12.0.0](slug:changes-in-12-0-0)

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

@@ -0,0 +1,119 @@
+---
+title: 13.0.0
+description: Handle the rendering changes in the 13.0.0 release of the Telerik UI for Blazor components.
+page_title: Rendering Changes in the 10.0.0 Release
+slug: rendering-changes-in-13-0-0
+position: 950
+---
+
+# Rendering Changes in 13.0.0
+
+## Apperance Classes
+
+All applicable components render CSS classes for the following parameters only if these parameters are set explicitly:
+
+* `FillMode`
+* `Rounded`
+* `Size`
+* `ThemeColor`
+
+For example, the following Telerik Button configuration...
+
+````RAZOR.skip-repl
+<TelerikButton>Click Me</TelerikButton>
+````
+
+... produces the following HTML output:
+
+<table>
+<thead><tr>
+<th>UI for Blazor 12.3.0</th>
+<th>UI for Blazor 13.0.0</th>
+</tr></thead>
+<tbody>
+<tr>
+<td style="vertical-align:top;">
+
+````HTML.skip-repl
+<button class="k-button k-button-solid k-rounded-md k-button-md k-button-solid-base">
+    <span class="k-button-text">Button Text</span>
+</button>
+````
+
+</td>
+<td style="vertical-align:top;">
+
+````HTML.skip-repl
+<button class="k-button">
+    <span class="k-button-text">Button Text</span>
+</button>
+````
+
+</td>
+</tr>
+</tbody>
+</table>
+
+To use the old rendering with more CSS classes in version 13.0.0, set the following parameters explicitly, for example:
+
+* `FillMode="@ThemeConstants.Button.FillMode.Solid"` renders a class `k-button-solid`.
+* `Rounded="@ThemeConstants.Button.Rounded.Medium"` renders a class `k-rounded-md`.
+* `Size="@ThemeConstants.Button.Size.Medium"` renders a class `k-button-md`.
+* `ThemeColor="@ThemeConstants.Button.ThemeColor.Base"` renders a class `k-button-base`. Note that this class differs in version 12.3.0 where it used to be `k-button-solid-base`.
+
+## Chat
+
+* The AppBar component in the Chat header is replaced by a ToolBar component. The `k-chat-header` class is preserved.
+* The TextArea component is replaced by a PromptBox component.
+* The `k-chat-file-wrapper` CSS class is renamed to `k-file-box-wrapper`.
+* The `k-chat-file` class is renamed to `k-file-box`.
+* The `k-chat-file-info` class is renamed to `k-file-info`.
+* The `k-chat-file-size` class is renamed to `k-file-size`.
+
+## TreeView
+
+* The `CaretAltRight` and `CaretAltDown` expand/collapse [icons](slug:common-features-icons#icons-list) are replaced by `ChevronRight` and `ChevronDown`.
+* The `k-treeview-top`, `k-treeview-mid`, and `k-treeview-bot` classes are no longer used. The same `<span>` elements use a `k-treeview-item-content` class instead.
+* The `k-focus` and `k-selected` classes are rendered on the parent `span.k-treeview-item-content` instead.
+
+<table>
+<thead><tr>
+<th>UI for Blazor 12.3.0</th>
+<th>UI for Blazor 13.0.0</th>
+</tr></thead>
+<tbody>
+<tr>
+<td style="vertical-align:top;">
+
+````HTML.skip-repl
+<li class="k-treeview-item">
+    <span class="k-treeview-mid">
+        <span class="k-treeview-leaf k-focus k-selected">
+            <span class="k-treeview-leaf-text">Item Text</span>
+        </span>
+    </span>
+</li>
+````
+
+</td>
+<td style="vertical-align:top;">
+
+````HTML.skip-repl
+<li class="k-treeview-item">
+    <span class="k-treeview-item-content k-focus k-selected">
+        <span class="k-treeview-leaf">
+            <span class="k-treeview-leaf-text">Item Text</span>
+        </span>
+    </span>
+</li>
+````
+
+</td>
+</tr>
+</tbody>
+</table>
+
+## See Also
+
+* [Use best practices when overriding theme styles](slug:themes-override#best-practices)
+* [Breaking changes in Telerik UI for Blazor 13.0.0](slug:changes-in-13-0-0)

upgrade/rendering-changes/list.md

@@ -10,6 +10,7 @@ position: 0
 
 As the Telerik UI for Blazor matures we will continuously optimize the HTML rendering and the usage of CSS classes. The rendering changes only affect the styling of the components if the application [overrides the built-in CSS styles](slug:themes-override) or uses an outdated [custom theme](slug:themes-customize). This article tracks the product versions with rendering changes.
 
+* [13.0.0](slug:rendering-changes-in-13-0-0)
 * [12.0.0](slug:rendering-changes-in-12-0-0)
 * [10.0.0](slug:rendering-changes-in-10-0-0)
 * [9.0.0](slug:rendering-changes-in-9-0-0)