V30 breaking changes (#700)

* docs: Document GridEditMode.None and TreeListEditMode.None

* docs: document ContextMenu OnClick and k class changes

* Update Button Overview (#646)

* docs: update button overview.md

* docs: address review comments

* Apply suggestions from code review

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* docs: Document button style changes

* docs: Document button style changes 2

* docs: Breaking changes language improvements

* docs: DrawerContent Breaking change

* docs: Window and Loader Size breaking change

* docs: Window Size breaking change

* docs: Breaking changes sections and table formatting

Co-authored-by: Dimo Dimov <dimo@Dimos-MacBook-Pro.local>
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>

Author: 3 people

components/contextmenu/events.md

@@ -16,26 +16,27 @@ This article explains the events available in the Telerik Context Menu for Blazo
 
 ## OnClick
 
-The `OnClick` event fires when the user clicks or taps on a menu item. It receives the model of the item as an argument that you can cast to the concrete model type you are using.
+The `OnClick` event fires when the user clicks or taps on a menu item. The event handler receives an argument of type `ContextMenuClickEventArgs<TItem>` with the item model (`args.Item`) and a boolean flag that controls component re-rendering (`args.ShouldRender`) after the event.
 
-You can use the `OnClick` event to react to user choices in a menu without using navigation to load new content automatically.
+You can use the `OnClick` event to react to user choices, for example load new content without using navigation.
 
 >caption Handle OnClick
 
 ````CSHTML
-Last clicked item: @ClickedItem?.Text
-<div id="context-menu-target" style="background:yellow;">right click for context menu</div>
+<p>Last clicked item: @ClickedItem?.Text</p>
+
+<div id="context-menu-target" style="padding:1em;background:yellow;">right-click for context menu</div>
 
 <TelerikContextMenu Data="@MenuItems" Selector="#context-menu-target"
-                    OnClick="@((MenuItem item) => OnClickHandler(item))">
+                    OnClick="@((ContextMenuClickEventArgs<MenuItem> args) => OnClickHandler(args))">
 </TelerikContextMenu>
 
 @code {
     public MenuItem ClickedItem { get; set; }
 
-    protected void OnClickHandler(MenuItem item)
+    protected void OnClickHandler(ContextMenuClickEventArgs<MenuItem> args)
     {
-        ClickedItem = item;
+        ClickedItem = args.Item;
     }
 
     public List<MenuItem> MenuItems { get; set; }

components/contextmenu/integration.md

@@ -43,7 +43,7 @@ Hooking to your own HTML elements' events lets you determine what to do with the
 <TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu"
                     TextField="Text" SeparatorField="Separator" IconField="Icon"
                     DisabledField="Disabled"
-                    OnClick="@( (ContextMenuItem itm) => ContextMenuClickHandler(itm) )">
+                    OnClick="@( (ContextMenuClickEventArgs<ContextMenuItem> args) => ContextMenuClickHandler(args) )">
 </TelerikContextMenu>
 
 <TelerikListView Data="@ListViewData" Width="700px" Pageable="true">
@@ -79,8 +79,9 @@ Hooking to your own HTML elements' events lets you determine what to do with the
         MenuItems[2].Items[0].Disabled = clickedItem.IsSpecial;
     }
 
-    async Task ContextMenuClickHandler(ContextMenuItem clickedItem)
+    void ContextMenuClickHandler(ContextMenuClickEventArgs<ContextMenuItem> args)
     {
+        var clickedItem = args.Item;
         // handle the command from the context menu by using the stored metadata
         if (!string.IsNullOrEmpty(clickedItem.CommandName) && LastClickedItem != null)
         {
@@ -92,9 +93,8 @@ Hooking to your own HTML elements' events lets you determine what to do with the
     // generate sample data for the listview and the menu
     protected override void OnInitialized()
     {
-
         MenuItems = new List<ContextMenuItem>()
-    {
+        {
             new ContextMenuItem
             {
                 Text = "More Info",
@@ -185,7 +185,7 @@ In this example, the context menu is used to select/deselect items, put an item
 @using System.Collections.ObjectModel
 
 <TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems" 
-                    OnClick="@((MenuItem item) => ContextMenuClickHandler(item))">
+                    OnClick="@((ContextMenuClickEventArgs<MenuItem> args) => ContextMenuClickHandler(args))">
 </TelerikContextMenu>
 
 <TelerikGrid Data="@GridData" @ref="@GridRef"
@@ -253,8 +253,9 @@ In this example, the context menu is used to select/deselect items, put an item
     }
 
     // sample handling of the context menu click
-    async Task ContextMenuClickHandler(MenuItem item)
+    async Task ContextMenuClickHandler(ContextMenuClickEventArgs<MenuItem> args)
     {
+        var item = args.Item;
         // one way to pass handlers is to use an Action, you don't have to use this
         if (item.Action != null)
         {
@@ -403,7 +404,7 @@ In this example, the context menu is used to select/deselect items and delete it
 
 <TelerikContextMenu Data="@ContextMenuData"
                     @ref="ContextMenu"
-                    OnClick="@((ContextMenuItem item) => ContextMenuClickHandler(item))">
+                    OnClick="@((ContextMenuClickEventArgs<ContextMenuItem> args) => ContextMenuClickHandler(args))">
 </TelerikContextMenu>
 
 <TelerikTreeView Data="@FlatData"
@@ -433,9 +434,9 @@ In this example, the context menu is used to select/deselect items and delete it
         }
     }
 
-    private void ContextMenuClickHandler(ContextMenuItem item)
+    private void ContextMenuClickHandler(ContextMenuClickEventArgs<ContextMenuItem> args)
     {
-
+        var item = args.Item;
         // Use local code to perform a task such as put select/deselect a node or delete it
         switch (item.CommandName)
         {

components/contextmenu/overview.md

@@ -32,15 +32,15 @@ In addition to built-in [navigation capabilities]({%slug contextmenu-navigation%
 
 <TelerikContextMenu Selector=".context-menu-target" Data="@MenuItems"
                     TextField="Text" SeparatorField="Separator" IconField="Icon"
-                    OnClick="@( (ContextMenuItem itm) => ClickHandler(itm) )">
+                    OnClick="@( (ContextMenuClickEventArgs<ContextMenuItem> args) => ClickHandler(args) )">
 </TelerikContextMenu>
 
-
 @code {
     public List<ContextMenuItem> MenuItems { get; set; }
 
-    async Task ClickHandler(ContextMenuItem clickedItem)
+    async Task ClickHandler(ContextMenuClickEventArgs<ContextMenuItem> args)
     {
+        var clickedItem = args.Item;
         if (!string.IsNullOrEmpty(clickedItem.CommandName))
         {
             Console.WriteLine($"The programm will now perform the {clickedItem.CommandName} operation");

components/drawer/data-bind.md

@@ -66,9 +66,9 @@ https://docs.telerik.com/blazor-ui/components/drawer/navigation
 
 <TelerikDrawer Data="@Data" UrlField="ItemUrl" TextField="ItemText" IconField="ItemIcon"
                MiniMode="true" Mode="@DrawerMode.Push" Expanded="true">
-    <Content>
+    <DrawerContent>
         @Body
-    </Content>
+    </DrawerContent>
 </TelerikDrawer>
 
 @code {

components/drawer/events.md

@@ -28,11 +28,11 @@ The `SelectedItemChanged` event fires every time the user clicks on a new item f
 <TelerikDrawer Data="@Data" Expanded="true" MiniMode="true" Mode="DrawerMode.Push"
                SelectedItem="@selectedItem"
                SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))">
-    <Content>
+    <DrawerContent>
         <div class="text-info">
             Content for the @selectedItem?.Text
         </div>
-    </Content>
+    </DrawerContent>
 </TelerikDrawer>
 
 @code {
@@ -91,11 +91,11 @@ The `ExpandedChanged` event fires every time the component's state is changed -
                Mode="@DrawerMode.Push"
                @bind-SelectedItem="@selectedItem"
                @ref="@DrawerRef">
-    <Content>
+    <DrawerContent>
         <div class="text-info">
             Content for the @selectedItem?.Text
         </div>
-    </Content>
+    </DrawerContent>
 </TelerikDrawer>
 
 @code {

components/drawer/icons.md

@@ -32,12 +32,12 @@ The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span c
                Mode="DrawerMode.Push"
                @ref="@DrawerRef"
                @bind-SelectedItem="@SelectedItem">
-    <Content>
+    <DrawerContent>
         <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
         <div class="m-5">
             Selected Item: @SelectedItem?.Text
         </div>
-    </Content>
+    </DrawerContent>
 </TelerikDrawer>
 
 @code {

components/drawer/modes.md

@@ -43,14 +43,14 @@ The drawer's height is dynamic based on the height of the content (you can chang
                    Mode="@DrawerMode.Push"
                    @bind-SelectedItem="@selectedItem"
                    @ref="@DrawerRef">
-        <Content>
+        <DrawerContent>
             <div class="m-5">
                 Select an item. The drawer is expaned: @Expanded
                 <div class="text-info">
                     Content for the @selectedItem?.Text
                 </div>
             </div>
-        </Content>
+        </DrawerContent>
     </TelerikDrawer>
 </div>
 
@@ -94,13 +94,13 @@ You may want to add padding to the left of the content so that it is not overlap
                Mode="@DrawerMode.Overlay"
                @bind-SelectedItem="@selectedItem"
                @ref="@DrawerRef">
-    <Content>
+    <DrawerContent>
         <div class="text-info pl-4">
             The drawer is expanded: @Expanded
             <br />
             Content for the @selectedItem?.Text
         </div>
-    </Content>
+    </DrawerContent>
 </TelerikDrawer>
 
 @code {

components/drawer/navigation.md

@@ -15,7 +15,7 @@ The Drawer is a different kind of a [menu]({%slug components/menu/overview%}) th
 To use the Drawer for navigating between pages:
 
 * Add the Drawer to the `MainLayot.razor` of your app.
-* Put the `@Body` tag in the `<Content>` tag of the drawer.
+* Put the `@Body` tag in the `<DrawerContent>` tag of the drawer.
 * Provide a collection of models that describe the pages you want the user to navigate to.
 
 >tip You can find a runnable sample that showcases this in the [Drawer as Side Navigation](https://github.com/telerik/blazor-ui/tree/master/drawer/sidenav) sample project.
@@ -31,9 +31,9 @@ To use the Drawer for navigating between pages:
 <TelerikRootComponent>
 
     <TelerikDrawer Data="@NavigablePages" Expanded="true" MiniMode="true" Mode="@DrawerMode.Push">
-        <Content>
+        <DrawerContent>
             @Body
-        </Content>
+        </DrawerContent>
     </TelerikDrawer>
 
 </TelerikRootComponent>

components/drawer/overview.md

@@ -16,7 +16,7 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr
 
 1. Add the `TelerikDrawer` tag.
 1. Populate its `Data` property with the collection of items you want the user to see.
-1. Place the content of the Drawer in the `<Content>` tag.
+1. Place the content of the Drawer in the `<DrawerContent>` tag.
     * In this example, we keep it simple by using the selected item. See the [Navigation]({%slug drawer-navigation%}) article for a menu-like experience with links.
 
 >caption Basic configuration of the Drawer.
@@ -29,7 +29,7 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr
                Mode="DrawerMode.Push"
                @ref="@DrawerRef"
                @bind-SelectedItem="@SelectedItem">
-    <Content>
+    <DrawerContent>
         <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
 
         @* Place your contents here - it can be as simple as text, it can be conditional components or components that
@@ -38,7 +38,7 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr
         <div class="m-5">
             Selected Item: @SelectedItem?.Text
         </div>
-    </Content>
+    </DrawerContent>
 </TelerikDrawer>
 
 @code {
@@ -73,7 +73,7 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr
 * `Position` - you can control the position of the Drawer, through the `DrawerPosition` enum.
 The members of the enum are:
  * `Left` - the default position
- * `Right` - the drawer item list will render on the right hand side of the `Content`
+ * `Right` - the drawer item list will render on the right hand side of the `DrawerContent`
 
 * `Expanded` - two-way bindable property that specifies whether the Drawer is expanded or collapsed. If this parameter is used to expand or collapse the component the animations will not be available. To use animations you have to use the Drawer's [Methods](#methods). You can, however, use the value to implement custom layouts in the drawer [templates]({%slug drawer-templates%}) or in your own layout.
 
@@ -85,7 +85,7 @@ The members of the enum are:
 
 * `MiniMode` - controls whether there is mini view when the Drawer is collapsed. For more information read the [Mini View]({%slug drawer-mini-mode%}) article.
 
-* `Content` - the `<Content>` child tag of `<TelerikDrawer>` is a `RenderFragment` where you put a component or custom HTML as the content of the Drawer - this is what the drawer will push or overlay.
+* `DrawerContent` - the `<DrawerContent>` child tag of `<TelerikDrawer>` is a `RenderFragment` where you put a component or custom HTML as the content of the Drawer - this is what the drawer will push or overlay.
 
 * `SelectedItem` - two-way bindable property that contains the currently selected item in the Drawer. For more information read the [Selection]({%slug drawer-selection%}) article.
 
@@ -117,7 +117,7 @@ The Drawer methods are accessible through it's reference. The reference exposes
 
 <TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
                @ref="@DrawerRef">
-    <Content>lorem ipsum</Content>
+    <DrawerContent>lorem ipsum</DrawerContent>
 </TelerikDrawer>
 
 @code {

components/drawer/refresh-data.md

@@ -42,12 +42,12 @@ In this article:
                Mode="DrawerMode.Push"
                @ref="@DrawerRef"
                @bind-SelectedItem="@SelectedItem">
-    <Content>
+    <DrawerContent>
         <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
         <div class="m-5">
             Selected Item: @SelectedItem?.Text
         </div>
-    </Content>
+    </DrawerContent>
 </TelerikDrawer>
 
 @code {