Various readability updates (#163)

* docs: edit textbox overview

Simplify and clarify the intro.

* docs: edit form-elements

* docs: edit font-icons.md

* dcos: edit upload.md

* docs: edit browser-support.md

* docs: update multiple.md

* docs: edit command.md

* chore(icons): nest tip under its list

* chore(grid): nest note under its list

Co-authored-by: Marin Bratanov <[email protected]>

Author: yordan-mitev

browser-support.md

@@ -8,14 +8,16 @@ position: 200
 
 # Browser Support
 
-This page lists the browsers supported by Telerik UI for Blazor. You can use these browsers to access web applications built with Telerik UI for Blazor. The latest versions of the browsers are supported.
+This page lists the browsers supported by Telerik UI for Blazor. You can use these browsers to access web applications built with Telerik UI for Blazor.
 
 >caption Browsers supported by Telerik UI for Blazor
 
-* Chrome (including Android and iOS)
-* Edge
-* Firefox
-* Safari (including iOS)
+| Browser | Supported Versions |
+| ----------- | ----------- |
+| Chrome (including Android and iOS) | Latest version |
+| Edge | Latest version |
+| Firefox | Latest version |
+| Safari (including iOS) | Latest version |
 
 Telerik UI for Blazor steps on the Blazor framework provided by Microsoft. This means that you can host/run the applications on [platforms supported by .NET Core 3](https://docs.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-3.0) - Windows, Linux, MacOS - and use the supported browsers on them.
 

common-features/font-icons.md

@@ -21,12 +21,15 @@ In this article:
 
 ## Standalone Icon Component
 
-Telerik UI for Blazor provides a component that you can use to render icons - the `TelerikIcon` component. It works with the following types of images (examples of their usage follow):
+Telerik UI for Blazor comes with the `TelerikIcon` component that you can use to render icons. It works with the following image types:
 
-* **Telerik font icon** - the `Icon` parameter takes a Telerik icon from the set we provide out-of-the-box through the `Telerik.Blazor.IconName` static class.
-    * The Visual Studio intellisense should provide you with the available options and you can also see them in the [online API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.IconName).
+* **Telerik font icon** - the `Telerik.Blazor.IconName` static class allows you to supply an `Icon` parameter that takes a **Telerik icon** from our built-in collection. To find the available **Telerik icons**, you can:
 
-    * You can find the full list of available icons in the [Kendo UI Web Font Icons Library](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) article. The names of the icons match the classes you see in the article, but without the `k-i-` prefix. You can use them as hardcoded strings as well. Their corresponding class members are in `CamelCase`.
+    * Use Visual Studio's IntelliSense.
+    
+    * Refer to the [online API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.IconName) article.
+
+    >tip Telerik UI for Blazor uses the same icons as the Kendo UI suite. You can find the rendered icons in the [Kendo UI Web Font Icons Library](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) article. When you use the icon names in this article, remove the `k-i-` prefix, and you will get the correct icon name for Blazor UI. You can use them as hardcoded strings as well. Their corresponding class members are in `CamelCase`.
 
 * **Third party font-icon** - the `IconClass` parameter lets you set a CSS class that provides the required font name, font size and content for the `::before` pseudoelement.
 
@@ -52,7 +55,7 @@ Telerik UI for Blazor provides a component that you can use to render icons - th
 
 ### Icon Parameters - Order of Precedence
 
-The priority order of the Icon properties, if more than one is defined, is
+The priority order of the Icon properties, if more than one is defined, is:
 
 1. `ImageUrl`
 2. `Icon`

components/grid/columns/command.md

@@ -14,7 +14,23 @@ The command column of a grid allows you to initiate [inline]({%slug components/g
 
 To define it, add a `GridCommandColumn` in the `GridColumns` collection of a grid. The command column takes a collection of `GridCommandButton` instances that invoke the commands. It also offers the `Title` property so you can set its header text.
 
->tip The lists below showcase the available features and their use. After them you can find a code example that shows declarations and handling.
+In this article:
+
+* [Grid Command Column Features](#features)
+ 
+   * [GridCommandButton](#the-gridcommandbutton-tag)
+   
+   * [Built-in Commands](#built-in-commands)
+   
+   * [OnClick Handler](#the-onclick-handler)
+   
+* [Code Example](#example)
+
+## Features
+
+The section describes the available features and their use.
+
+### The GridCommandButton tag
 
 The `GridCommandButton` tag offers the following features:
 
@@ -24,13 +40,17 @@ The `GridCommandButton` tag offers the following features:
 * `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags.
 * Appearance properties like `Icon`, `Class`, `Enabled` that are come from the underlying [Button Component features]({%slug components/button/overview%}).
 
+### Built-in Commands
+
 There are four built-in commands:
 
 * `Add` - initiates the creation of a new item.
 * `Edit` - initiates the inline or popup editing (depending on the GridEditMode configuration of the grid).
 * `Save` - performs the actual update operation after the data has been changed. Triggers the `OnUpdate` or `OnCreate` event so you can perform the data source operation. Which event is triggered depends on whether the item was created or edited.
 * `Cancel` - aborts the current operation (edit or insert).
 
+### The OnClick handler
+
 The `OnClick` handler of the commands receives an argument of type `GridCommandEventArgs` that exposes the following properties:
 
 * `IsCancelled` - set this to true to prevent the operation if the business logic requires it.
@@ -39,6 +59,10 @@ The `OnClick` handler of the commands receives an argument of type `GridCommandE
 
 >tip For handling CRUD operations we recommend that you use the grid events (`OnEdit`, `OnUpdate`, `OnCancel`, `OnCreate`). The `OnClick` handler is available for the built-in commands to provide consistency of the API.
 
+## Example
+
+The following code example demonstrates declarations and handling.
+
 >tip The event handlers use `EventCallback` and can be synchronous or async. This example shows async versions, and the signature for the synchronous handlers is `void MyHandlerName(GridCommandEventArgs args)`.
 
 >caption Example of handling custom commands in a grid column

components/grid/selection/multiple.md

@@ -27,25 +27,25 @@ In this article:
 
 To use **multiple** row selection, set the `SelectionMode` property to `Telerik.Blazor.GridSelectionMode.Multiple`.
 
-In Multiple SelectionMode, selection could be made using the following approaches:
+In Multiple SelectionMode, you can select rows through the following approaches:
 
 * Click on a row to select only that row (and deselect any others)
 * Press and hold `Ctrl` and click the desired rows to select or deselect them.
-* Click on the starting row of a range of rows you want selected, press and hold `Shift`, and click on the last row of the range. The last selected item is the start point of the range and the current target row is the end of the selection.
+* Click on the starting row in a range of rows that you want to select, press and hold `Shift`, and click on the last row in the range. The first selected item is the start point of the range and the last selected target row is the end of the selection.
 * Select the checkbox of each desired row.
 
 >tip The [Examples](#examples) section showcases how you can use the grid features together.
 
 ## Checkbox Selection
 
-To add checkboxes in each row that the user can use for selection, add a `GridCheckboxColumn` in the `GridColumns` collection of the grid.
+To add checkboxes in each row, add a `GridCheckboxColumn` in the `GridColumns` collection of the grid. The user can select the desired rows through the checkboxes.
 
 The Grid allows selection and deselection via the `SelectAll` property. Setting this property to `true` (its default value) will render a checkbox in the grid header.
 
 You can add a `SelectAllMode` parameter, which supports the following options:
 * `Current` - selects all rows on the current page. This also applies to filtered, sorted, etc. This is the default value of the `SelectAllMode`.
 * `All` - selects all the data in the Grid.
-  * If IQueriable collections are used, using the header checkbox with in this mode will immediately execute the query over all the data which may be a performance hit.
+    >note  If IQueriable collections are used, using the header checkbox with an `All` option will immediately execute the query over all the data. This may be a performance hit.
 
 `SelectAllMode` behavior with [Virtual Scrolling]({%slug components/grid/virtual-scrolling%}):
 * No `OnRead` configured (the default state):

components/textbox/overview.md

@@ -10,7 +10,13 @@ position: 0
 
 # Textbox Overview
 
-The <a href="https://www.telerik.com/blazor-ui/textbox" target="_blank">Blazor Textbox component</a> allows the user to enter a generic plain text message. You can also add an animated floating Label, a custom CSS class or control various attributes of the `input` element such as making it a password box, the `name`, `placeholder`, `tabindex`, `inputmode`, `autocomplete` and [more](#features) and also respond to [events]({%slug components/textbox/events%}).
+The <a href="https://www.telerik.com/blazor-ui/textbox" target="_blank">Blazor Textbox component</a> allows the user to enter a generic plain text message. To customize the Textbox, you can:
+
+* Add an animated floating Label
+
+* Add a custom CSS class
+
+Furthermore, you can control [various attributes](#features) of the `input` element and turn the Textbox into a password box, for example. You can also configure this component to respond to [events]({%slug components/textbox/events%}).
 
 To use a Telerik Textbox for Blazor, add the `TelerikTextBox` tag.
 

components/upload/overview.md

@@ -10,7 +10,7 @@ position: 0
 
 # Upload Overview
 
-The <a href="https://www.telerik.com/blazor-ui/upload" target="_blank">Blazor Upload component</a> lets the user upload files to a server handler asynchronously. They can select one or multiple files, and you can control whether the upload starts immediately or upon a button click, and also let users delete their uploaded files. The component offers [client-side validation]({%slug upload-validation%}) for the selected files' extensions and size.
+The <a href="https://www.telerik.com/blazor-ui/upload" target="_blank">Blazor Upload component</a> lets the users upload files to a server handler asynchronously. They can select one or multiple files, and you can control whether the upload starts immediately or upon a button click, and also let users delete their uploaded files. The component offers [client-side validation]({%slug upload-validation%}) for the selected files' extensions and size.
 
 To use a Telerik Upload for Blazor
 
@@ -27,8 +27,8 @@ To use a Telerik Upload for Blazor
         </TelerikUpload>
         
         @code {
-            // one way to define relative paths, put the desired URL here
-            // can be a full URL such as https://mydomain/myendpoint/save
+            // One way to define relative paths is to put the desired URL here.
+            // This can be a full URL such as https://mydomain/myendpoint/save
             public string SaveUrl => ToAbsoluteUrl("api/upload/save");
             public string RemoveUrl => ToAbsoluteUrl("api/upload/remove");
         
@@ -77,7 +77,7 @@ To use a Telerik Upload for Blazor
 
                             // Implement security mechanisms here - prevent path traversals,
                             // check for allowed extensions, types, size, content, viruses, etc.
-                            // this sample always saves the file to the root and is not sufficient for a real application
+                            // This sample always saves the file to the root and is not sufficient for a real application.
 
                             using (var fileStream = new FileStream(physicalPath, FileMode.Create))
                             {
@@ -86,7 +86,7 @@ To use a Telerik Upload for Blazor
                         }
                         catch
                         {
-                            // implement error handling here, this merely indicates a failure to the upload
+                            // Implement error handling here, this example merely indicates an upload failure.
                             Response.StatusCode = 500;
                             await Response.WriteAsync("some error message"); // custom error message
                         }
@@ -111,14 +111,14 @@ To use a Telerik Upload for Blazor
                             {
                                 // Implement security mechanisms here - prevent path traversals,
                                 // check for allowed extensions, types, permissions, etc.
-                                // this sample always deletes the file from the root and is not sufficient for a real application
+                                // this sample always deletes the file from the root and is not sufficient for a real application.
 
                                 System.IO.File.Delete(physicalPath);
                             }
                         }
                         catch
                         {
-                            // implement error handling here, this merely indicates a failure to the upload
+                            // Implement error handling here, this example merely indicates an upload failure.
                             Response.StatusCode = 500;
                             Response.WriteAsync("some error message"); // custom error message
                         }
@@ -171,14 +171,19 @@ To use a Telerik Upload for Blazor
 
 ## Notes
 
-The Telerik Upload component facilitates sending a file to an endpoint. There are a few considerations to keep in mind with regards to handling the files on the server.
+The Telerik Upload component facilitates sending a file to an endpoint. There are a few considerations to keep in mind with regards to handling the files on the server:
 
 @[template](/_contentTemplates/upload/notes.md#server-security-note)
 
+* File Size
+
 The `MaxFileSize` parameter of the component is used for [client-side validation]({% slug upload-validation %}), and the server needs a separate configuration. At this stage, the files are uploaded in one piece and so the server may block large requests - server settings such as the IIS `MaxRequestLength` will always be taken into account by the endpoint. You can find some examples of configuring this in the following StackOverflow thread: [IIS7 - The request filtering module is configured to deny a request that exceeds the request content length](https://stackoverflow.com/questions/10871881/iis7-the-request-filtering-module-is-configured-to-deny-a-request-that-exceeds).
 
+* Application Logic
+
 Authentication, authorization and routing of the requests is up to the application logic. The Telerik Upload component makes an XHR request from the browser to the designated endpoint and further application logic is up to the server. You can use the [OnUpload and OnRemove events]({% slug upload-events %}) to add headers and data to the request so you can handle the requests accordingly on the server.
 
+* Cross-Origin Requests
 Cross-origin requests depend on the application and endpoint setup. The `WidthCredentials` parameter sets the corresponding parameter of the XHR request. Handling the cookies, headers and other parameters of the Blazor app and [CORS](https://www.w3.org/TR/cors/) endpoint are to be implemented by the respective applications (for example, including the `Access-Control-Allow-Origin` header with an appropriate value and the `Access-Control-Allow-Credentials` header with a `true` value). You can read more on the subject in the following article: [https://www.html5rocks.com/en/tutorials/cors/](https://www.html5rocks.com/en/tutorials/cors/). You can also find one example setup from a customer of ours in [this thread](https://www.telerik.com/forums/upload-component-reports-'file-failed-to-upload'#-6QPJn3obkm3D1kR1ysukA) which shows one way to setup the CORS requests, headers and responses on the receiving server.
 
 

themes/form-elements.md

@@ -12,19 +12,27 @@ position: 5
 
 The [UI for Blazor Themes]({%slug general-information/themes%}) provide classes that you can use to style elements on the page so they can match the used Telerik Theme.
 
-The Themes are shared with the Kendo library and you can reuse any existing knowledge about the classes that are available. This article will provide several examples of how you can style generic elements through the Telerik Themes so they match the colors and styling of the Telerik components, and so they look the same across browsers.
+>tip The UI for Blazor Themes are shared with the Kendo library - you can apply any previous knowledge about Kendo UI products.
+
+This article provides several examples of how you can use the Telerik Themes to style generic elements. These styled generic elements will:
+
+* match the colors and styling of the Telerik components
+
+* look the same across browsers
+
+Select one of the following links to see the example:
 
 * [Checkboxes](#checkboxes)
 * [Radio Buttons](#radio-buttons)
 * [Inputs](#inputs)
 * [Buttons](#buttons)
 * [Cards](#cards)
 
->note CSS rules from the project may interfere. A common reason is styling from libraries like Bootstrap or rules with low specificity in the site stylesheet. [This blog post](https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools) can help you examine the rendering and applied styles so you can troubleshoot any issues.
+>note Existing CSS rules in the project may interfere with the applied styles. A common reason is styling from libraries like Bootstrap or rules with low specificity in the site stylesheet. [This blog post](https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools) can help you examine the rendering and applied styles so you can troubleshoot any issues.
 
 ## Checkboxes
 
-A specific class on a `label` element can give you a checkbox that looks the same in all browsers. You will still need the actual `input` element, but it will have another class that will hide it visually.
+A specific CSS class applied to a `label` element can give you a checkbox that looks the same in all browsers. You still need to provide the actual `input` element, but it will have another CSS class that will hide it visually.
 
 >tip You can use the [TelerikCheckBox]({%slug checkbox-overview%}) component instead. It offers a few extra features and events.
 
@@ -45,7 +53,7 @@ A specific class on a `label` element can give you a checkbox that looks the sam
 
 ## Radio Buttons
 
-A specific class on a `label` element can give you a radio buttons that looks the same in all browsers. You will still need the actual `input` element, but it will have another class that will hide it visually.
+A specific CSS class applied to a `label` element can give you a radio buttons that look the same in all browsers. You still need to provide the actual `input` element, but it will have another CSS class that will hide it visually.
 
 >note Blazor cannot yet handle binding radio buttons. You can find more details in [this issue](https://github.com/aspnet/AspNetCore/issues/5579).