[3.2] docs(toolbar): Responsive Overflow Popup fixes (#882)

* [3.2] docs(toolbar): Responsive Overflow Popup fixes

* Update components/toolbar/built-in-tools.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/toolbar/built-in-tools.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/toolbar/built-in-tools.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/toolbar/overview.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/toolbar/separators.md

Co-authored-by: Dimo Dimov <[email protected]>

* docs(toolbar):latest comment fix

Co-authored-by: Dimo Dimov <[email protected]>

Author: xristianstefanov

components/toolbar/built-in-tools.md

@@ -41,7 +41,7 @@ The nested `ToolBarButton` tag exposes parameters that allow you to customize th
 | `ImageURL` | `string` | Adds an image to the button. You can provide an image url to this parameter. |
 | `SpriteClass` | `string` | Add a sprite class image to the button. Set this attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite. |
 | `Overflow` | `ToolBarItemOverflow` enum <br /> (`Auto`) | Specifies whether the item will be hidden when the ToolBar is resized. |
-| `OverflowText` | `string` | If not specified, it will get the normal text of the item. (not valid for Separators) |
+| `OverflowText` | `string` | Defines the button text that will be shown only in the overflow popup. If not specified, it will get the default text of the item. |
 | `Title` | `string` | Maps to the `title` HTML attribute for the `<button>`. |
 | `Visible` | `bool` <br /> `true` | Specifies if the button will be visible in the toolbar. |
 
@@ -102,7 +102,7 @@ The nested `ToolBarToggleButton` tag exposes parameters that allow you to custom
 | `Selected` | `bool` | Specifies whether the button is in selected state. You can use it with one and two-way data binding with the `SelectedChanged` event. For more information on how to handle the `SelectedChanged` event see the [Events]({%slug toolbar-events%}) article. |
 | `SpriteClass` | `string` | Add a sprite class image to the button. Set this attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite. |
 | `Overflow` | `ToolBarItemOverflow` enum <br /> (`Auto`) | Specifies whether the item will be hidden when the ToolBar is resized. |
-| `OverflowText` | `string` | If not specified, it will get the normal text of the item. (not valid for Separators) |
+| `OverflowText` | `string` | Defines the button text that will be shown only in the overflow popup. If not specified, it will get the default text of the item. |
 | `Title` | `string` | Maps to the `title` HTML attribute for the `<button>`. |
 | `Visible` | `bool` <br /> `true` | Specifies if the button will be visible in the toolbar. |
 
@@ -162,7 +162,7 @@ The nested `ToolBarButtonGroup` tag exposes parameters that allow you to customi
 | `Enabled` | `bool` <br /> `true` | Specifies if the group is clickable. |
 | `SelectionMode` | `ButtonGroupSelectionMode` enum <br /> `Single` | Specifies whether you can select one or multiple buttons from the group at the same time (applicable for `ToolBarToggleButton` instances inside it). |
 | `Overflow` | `ToolBarItemOverflow` enum <br /> (`Auto`) | Specifies whether the item will be hidden when the ToolBar is resized. |
-| `OverflowText` | `string` | If not specified, it will get the normal text of the item. (not valid for Separators) |
+| `OverflowText` | `string` | Defines the button text that will be shown only in the overflow popup. If not specified, it will get the default text of the item. |
 | `Visible` | `bool` <br /> `true` | Specifies if the group will be visible in the toolbar. |
 | `Width` | `string` | Allows you to control the width of the group. |
 

components/toolbar/overview.md

@@ -87,14 +87,14 @@ The Blazor ToolBar provides parameters to configure the component:
 
 | Parameter | Type | Description |
 | ----------- | ----------- | ----------- |
-| `Adaptive ` | `bool` | Toggles the overflow popup of the toolbar. Consistent with the chosen name for the pager. |
+| `Adaptive ` | `bool` | Toggles the overflow popup of the toolbar. Displays an additional anchor on the right of the toolbar, where it places all items which overflow from the toolbar. |
 | `Class` | `string` | The CSS class to be rendered on the main wrapping element of the ToolBar component, which is `<div class="k-toolbar">`. Use for [styling customizations]({%slug themes-override%}). |
 
 ## Example
 
 The Blazor Toolbar has an option for adaptiveness. This option allows you to hide the items overflowing in a popup.
 
->We do **not** recommend using `ToolBarTemplateItem` with the responsive overflow popup as there is a high chance of breaking the popup. 
+>When using `ToolBarTemplateItem` with the responsive overflow popup, the template inherits automatically `Overflow` - `ToolBarItemOverflow.Never` behavior.
 
 >caption Responsive Overflow Popup
 
@@ -137,10 +137,6 @@ The Blazor Toolbar has an option for adaptiveness. This option allows you to hid
     .toolbar-wrapper{
         width: @(Width.ToString() + "%");
     }
-
-    .toolbar-slider {
-        padding: 0px 16px;
-    }
 </style>
 ````
 

components/toolbar/separators.md

@@ -12,7 +12,7 @@ position: 5
 
 You can visually separate the items in the Telerik ToolBar for Blazor. Depending on the needs of your application you can use of the following, or a combination of them:
 
-* `ToolBarSeparator` - to separate two items with a solid line, add the `<ToolBarSeparator>` tag between them. 
+* `ToolBarSeparator` - to separate two items with a solid line, add the `<ToolBarSeparator>` tag between them. The separator exposes an `Overflow` parameter to specify whether the separator will be hidden when the adaptive ToolBar is resized. Its type is `ToolBarItemOverflow` enum and the default value is `Auto`.
 
 * `ToolBarSpacer` - defines empty space in the toolbar which separates the items. The space between the items is automatically calculated to fit the width of the ToolBar. For example, one spacer in the middle of the items will push the second part of items to the right-hand side of the toolbar.
 
@@ -38,7 +38,6 @@ You can visually separate the items in the Telerik ToolBar for Blazor. Depending
     <ToolBarButton Icon="undo">Undo</ToolBarButton>
 </TelerikToolBar>
 
-
 @code {
     public bool Selected { get; set; } = true;
 }