V30 breaking changes

components/button/disabled-button.md

@@ -0,0 +1,35 @@
+---
+title: Disabled Button
+page_title: Disabled Button
+description: Learn how to configure a disabled Blazor Button component by Telerik UI.
+slug: button-disabled
+tags: telerik,blazor,disabled,button,
+published: True
+position: 5
+---
+
+# Disabled Button
+
+Sometimes specific buttons in an application must be temporarily disabled. To control the enabled state of the component, use the `Enabled` Boolean attribute.
+
+The following example demonstrates how to enable and disable the Button.
+
+>caption Toggle Telerik Button Enabled State
+
+````CSHTML
+<p>
+    <label>
+        <TelerikCheckBox @bind-Value="@ButtonIsEnabled" /> Toggle Button State
+    </label>
+</p>
+
+<TelerikButton Enabled="@ButtonIsEnabled">@ButtonText</TelerikButton>
+
+@code {
+    bool ButtonIsEnabled { get; set; } = false;
+    string ButtonText => ButtonIsEnabled ? "Enabled Button" : "Disabled Button";
+}
+
+>caption Comparison between disabled and enabled button
+
+![](images/disabled-button.png)

components/button/overview.md

@@ -1,7 +1,7 @@
 ---
 title: Overview
 page_title: Button Overview
-description: Overview of the Button for Blazor.
+description: Discover the Blazor Button and explore the examples.
 slug: components/button/overview
 tags: telerik,blazor,button,overview
 published: True
@@ -10,24 +10,19 @@ position: 0
 
 # Button Overview
 
-This article provides information about the <a href="https://www.telerik.com/blazor-ui/buttons" target="_blank">Blazor Button component</a> and its core features.
+This article introduces the <a href="https://www.telerik.com/blazor-ui/buttons" target="_blank">Blazor Button component</a>, shows how to start using it, and lists its core features.
 
-The Button component provides styling according to the [chosen theme]({%slug general-information/themes%}), click [event]({%slug button-events%}) and [icons]({%slug button-icons%}). You can also disable the button and set its [type]({%slug button-type%}).
+Buttons convey user actions and can display text, images and HTML.
 
-#### In this article:
+The Blazor Button provides a variety of styling options through the [built-in themes]({%slug general-information/themes%}) and the [button type]({%slug button-type%}). It supports [font icons and images]({%slug button-icons%}) and fires click [events]({%slug button-events%}).
 
-* [Basic Button](#basic-button)
-* [Primary Button](#primary-button)
-* [Disabled State](#disabled-state)
-* [Styling](#styling)
+## Creating Blazor Button
 
+1. Use the `<TelerikButton>` tag to add the component to your razor page.
 
+1. Add an `OnClick` event handler to show the current date and time.
 
-## Basic Button
-
-To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
-
->caption Basic Telerik Button with OnClick event handling
+>caption Basic Blazor Button with OnClick event handler
 
 ````CSHTML
 @result
@@ -44,95 +39,58 @@ To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
 }
 ````
 
->caption The result from the code snippet above
 
-![](images/basic-button.png)
+## Icons
 
->caption Component namespace and reference
+To visually communicate the purpose of a button, you can add an image, sprite, or font icon. You can choose between a wide range of built-in font icons or use your custom font icons. [Read more about the Blazor Button icons...]({%slug button-icons%})
 
-````CSHTML
-@using Telerik.Blazor.Components
+## Type
 
-<TelerikButton @ref="theButton">Hello!</TelerikButton>
-
-@code{
-	Telerik.Blazor.Components.TelerikButton theButton;
-}
-````
+To control the submit behavior of the Blazor Button, use the `Type` attribute. Select from the following button types: `Submit`, `Reset`, and `Button`. [Read more about the Blazor Button Type...]({%slug button-type%})
 
-## Primary Button
-
-You can also make the button use a strong color to attact attention, called Primary button styling. To do that, set its `Primary` property to true.
-
->caption Button with the Primary color scheme from the current theme
-
-````CSHTML
-<TelerikButton Primary="true">Primary</TelerikButton>
-````
-
->caption The result from the code snippet above, with the Default theme
-
-![](images/primary-button.png)
+## Events
 
+The Blazor Button fires events that you can handle and respond to user actions. [Read more about the Blazor Button events...]({%slug button-events%}).
 
 ## Disabled State
 
-To disable a button, set its `Enabled` attribute to `false`.
-
->caption Disabled Telerik Button
-
-````CSHTML
-<TelerikButton Enabled="false">Disabled Button</TelerikButton>
-````
-
->caption Comparison between disabled and enabled button
-
-![](images/disabled-button.png)
+To prevent user interaction with a Button, disable it. [Read more about the disabled Blazor Button...]({%slug button-disabled%}).
 
 ## Styling
 
-You can style the button through its `Class` attribute to define your own CSS rules that apply to the HTML rendering.
+To customize the style and the appearance of the Blazor Button, you can use the [built-in themes]({%slug general-information/themes%}). Additionally, set the `Class` attribute and implement custom CSS rules. [Read more about the Blazor Button styling...]({%slug button-styling%})
 
->caption Set CSS class to the button and change its appearance
+## Button Reference
 
-````CSHTML
-<TelerikButton Class="RedText">My text is red.</TelerikButton>
-
-<style>
-	.RedText,
-	.RedText:hover {
-		color: red;
-	}
-</style>
-````
+Add a reference to the Button instance to use its methods (for example - `FocusAsync()`).
 
->caption The result from the code snippet above
+>caption Component namespace and reference
 
-![](images/red-button.png)
+````CSHTML
+<TelerikButton @ref="theButton">Hello!</TelerikButton>
 
+@code{
+    Telerik.Blazor.Components.TelerikButton theButton { get; set; }
 
->caption Change the button size
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await theButton.FocusAsync();
 
-````
-<style>
-    .large-button {
-        width: 200px;
-        height: 50px;
+        await base.OnAfterRenderAsync(firstRender);
     }
-</style>
-
-<TelerikButton Class="large-button">Large button</TelerikButton>
+}
 ````
 
->caption The result from the code snippet above
+## Next Steps
+
+* [Styling the Blazor Button]({%slug button-styling%})
 
-![use css to change the button size](images/button-size-change.png)
+* [Using Button Icons]({%slug button-icons%})
 
 ## See Also
 
   * [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index)
   * [Events]({%slug button-events%})
-  * [Icons]({%slug button-icons%})
   * [Type]({%slug button-type%})
   * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikButton)
-   
+

components/button/styling.md

@@ -0,0 +1,46 @@
+---
+title: Styling
+page_title: Styling
+description: Learn how to apply styles to the Blazor Button component by Telerik UI.
+slug: button-styling
+tags: telerik,blazor,button,styling,
+published: True
+position: 10
+---
+
+# Styling
+
+There are a few ways to style the Button component:
+
+* Set a [primary button](#primary-button) style.
+* Use another [built-in theme]({%slug general-information/themes%}).
+* Use the [Button `Class`](#button-class) attribute.
+
+## Primary Button
+
+Through the primary button styling, you can make the button use a strong color to attract attention. To do that, set its `Primary` property to true.
+
+>caption Button with the Primary color scheme from the current theme
+
+````CSHTML
+<TelerikButton Primary="true">Primary</TelerikButton>
+````
+
+## Button Class
+
+The Class attribute allows you to define custom CSS rules that apply to the HTML rendering of one or several Buttons.
+
+>caption Set CSS class to the button and change its appearance
+
+````CSHTML
+<TelerikButton Class="my-button">Large button with red text</TelerikButton>
+
+<style>
+    .my-button,
+    .my-button:hover {
+        color: red;
+        width: 200px;
+        height: 50px;
+    }
+</style>
+````

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 {