Merge pull request #20 from telerik/changes-2-0

Changes for 2.0.0

Author: marin-bratanov

.gitignore

@@ -1,11 +1,11 @@
 
-.vs
 .asset-cache/
 .dockerignore
 .DS_Store
 .editorconfig
 .jekyll-metadata
 .ruby-version
+.vs
 /_assets/
 /_build/
 /_buildApi/

_config.yml

@@ -30,6 +30,11 @@ navigation:
      "common-features":
         title: "Common Features"
         position: 15
+     "upgrade":
+        title: "Upgrade"
+        position: 17
+     "upgrade/breaking-changes":
+        title: "Breaking Changes"
      "how-to":
         title: "How To"
         position: 20

_contentTemplates/chart/link-to-basics.md

@@ -8,20 +8,17 @@ This article assumes you are familiar with the [chart basics]({%slug components/
 Bar and Column charts can take the color of the series item from the `ColorField` of the data source. You can pass a valid CSS color (for example, `#abcdef`, `#f00`, or `blue`).
 
 ````CSHTML
-@using Telerik.Blazor
-@using Telerik.Blazor.Components.Chart
+Colors per series item
 
 <TelerikChart>
-	<TelerikChartSeriesItems>
-		<TelerikChartSeries Type="ChartSeriesType.Bar" Data="@theData" ColorField="@nameof(MyChartDataModel.Color)"
-							Field="@nameof(MyChartDataModel.ItemValue)" CategoryField="@nameof(MyChartDataModel.Category)">
-		</TelerikChartSeries>
-	</TelerikChartSeriesItems>
+	<ChartSeriesItems>
+		<ChartSeries Type="ChartSeriesType.Bar" Data="@theData" ColorField="@nameof(MyChartDataModel.Color)"
+							Field="@nameof(MyChartDataModel.ItemValue)" CategoryField="@nameof(MyChartDataModel.Category)" />
+	</ChartSeriesItems>
 
-	<TelerikChartTitle Text="Revenue per product"></TelerikChartTitle>
+	<ChartTitle Text="Revenue per product" />
 
-	<TelerikChartLegend Position="ChartLegendPosition.Right">
-	</TelerikChartLegend>
+	<ChartLegend Position="ChartLegendPosition.Right" />
 </TelerikChart>
 
 @code {
@@ -31,8 +28,9 @@ Bar and Column charts can take the color of the series item from the `ColorField
 		public double ItemValue { get; set; }
 		public string Color { get; set; }
 	}
+
 	public List<MyChartDataModel> theData = new List<MyChartDataModel>
-{
+    {
 		new MyChartDataModel
 		{
 			Category = "Product 1",

_contentTemplates/common/general-info.md

@@ -1,3 +1,7 @@
 #event-callback-can-be-async
 >tip The event is an `EventCallback` and its type can be `void`, or it can also be asynchronous and return `async Task`.
+#end
+
+#ensure-nuget-packge-for-upgrade
+Make sure that you have a NuGet feed source with the version you want to upgrade to. This is usually the [Telerik NuGet Feed]({%slug installation/nuget%}), but you can also use a local feed from [our MSI installer]({%slug installation/msi%}) or [ZIP archive]({%slug installation/zip%}).
 #end

_contentTemplates/common/get-started.md

@@ -91,17 +91,13 @@ To get access to the UI for Blazor components, follow these steps:
 
     **CSHTML**
 
-        @using Telerik.Blazor.Components.Button
-    
         <TelerikButton>Say Hello</TelerikButton>
         
 1. Optionally, hook up a click handler that will show a message. The resulting view should look like this:
 
     **CSHTML**
 
         @page "/"
-
-        @using Telerik.Blazor.Components.Button
 
         <TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
 

_contentTemplates/treeview/basic-example.md

@@ -1,12 +1,12 @@
 #basic-example
 
 ````CSHTML
-@using Telerik.Blazor.Components.TreeView
+Sample treeview bound to self-referencing flat data. Also uses the built-in icons from the Telerik suite
 
 <TelerikTreeView Data="@FlatData">
-	<TelerikTreeViewBindings>
-		<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon"></TelerikTreeViewBinding>
-	</TelerikTreeViewBindings>
+	<TreeViewBindings>
+		<TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
+	</TreeViewBindings>
 </TelerikTreeView>
 
 @code {

common-features/font-icons.md

@@ -10,7 +10,7 @@ position: 1
 
 # Built-in Icons
 
-The UI for Blazor suite comes with a set of font icons that you can use in various places like in the Button component.
+The UI for Blazor suite comes with a set of font icons that you can use in various places like in the Button component, or as a standalone component.
 
 To use a predefined font icon, you can set the corresponding property to a member of the `Telerik.Blazor.IconName` static class. The Visual Studio intellisense should provide you with the available options.
 
@@ -36,27 +36,26 @@ You can find the full list of available icons in the [Kendo UI Web Font Icons Li
 >caption Render a standalone font icon through the TelerikIcon component
 
 ````CSHTML
-@using Telerik.Blazor
-@using Telerik.Blazor.Components
-
-<TelerikIcon IconName="@IconName.Audio" /> @* will render the audio speaker icon *@
+@using Telerik.Blazor.Components.Common.Icon
 
-<TelerikIcon Class="oi oi-home" /> @* home icon from OpenIconic, assuming you have loaded the font on the page *@
+<TelerikIcon Icon="@IconName.Audio" /> @* will render the audio note icon *@
 
-<TelerikIcon Class="my-font-icon-class" /> @* In this simple example, the built-in Telerik icon font matching the glyph position will be used, unless you provide an actual font icon of your own to override the values *@
+<TelerikIcon IconClass="oi oi-home" /> @* home icon from OpenIconic, assuming you have loaded the font on the pag, you can use your own CSS classes and font icon fonts *@
 
-<style>
-	.my-font-icon-class::before {
-		font: myFontIconFont; /* use actual font icon font */
-		content: "\e123"; /* use actual glyph position */
-	}
-</style>
+<TelerikIcon ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png" /> @* an image by URL, renders an actual <img /> tag *@
 ````
 
 >caption The result from the snippet above
 
 ![](images/standalone-font-icons.png)
 
+The priority order of the Icon properties, if more than one is defined, is
+
+1. ImageUrl
+2. Icon
+3. IconClass
+4. SpriteClass
+
 
 ## See Also
 

common-features/images/standalone-font-icons.png

@@ -34,12 +34,7 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th
 >caption How to validate inputs
 
 ````CSHTML
-@using Telerik.Blazor.Components.TextBox
-@using Telerik.Blazor.Components.NumericTextBox
-@using Telerik.Blazor.Components.DateInput
-@using Telerik.Blazor.Components.DatePicker
-@using Telerik.Blazor.Components.TimePicker
-@using System.ComponentModel.DataAnnotations
+@using System.ComponentModel.DataAnnotations // used for the model class attributes
 
 <EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
     <DataAnnotationsValidator />
@@ -125,8 +120,7 @@ The DropDownList always has an item selected - the first item from its data sour
 >caption How to validate a dropdownlist
 
 ````CSHTML
-@using Telerik.Blazor.Components.DropDownList
-@using System.ComponentModel.DataAnnotations
+@using System.ComponentModel.DataAnnotations // used for the model class attributes
 
 <EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
 	<DataAnnotationsValidator />

common-features/input-validation.md

@@ -17,9 +17,7 @@ To use the animation container, add the `TelerikAnimationContainer` tag.
 >caption How to use the Animation Container
 
 ````CSHTML
-@using Telerik.Blazor.Components.AnimationContainer
-@using Telerik.Blazor.Components.Button
-@using Telerik.Blazor
+Click the button to toggle the visibility of the customized popup
 
 <TelerikAnimationContainer @ref="myPopupRef" Top="300px" Width="100px" Height="100px" AnimationType="AnimationType.ZoomOut" Class="k-popup">
 	My content goes here. The "k-popup" class adds some background and borders which you can define through your own styles instead.
@@ -28,7 +26,7 @@ To use the animation container, add the `TelerikAnimationContainer` tag.
 <TelerikButton OnClick="@ToggleContainer">Toggle Animation Container</TelerikButton>
 
 @code {
-	Telerik.Blazor.Components.AnimationContainer.TelerikAnimationContainer myPopupRef;
+	Telerik.Blazor.Components.TelerikAnimationContainer myPopupRef;
 
 	public void ToggleContainer()
 	{
@@ -39,8 +37,8 @@ To use the animation container, add the `TelerikAnimationContainer` tag.
 
 The animation container exposes the following properties and methods:
 
-* `Show()`, `Hide()` and `Toggle()` - to control whether the container is shown.
-* `Width` and `Height` - to control its size.
+* `Show()`, `Hide()` and `Toggle()`; `ShowAsync()`, `HideAsync()` and `ToggleAsync()` - to control whether the container is shown.
+* `Width` and `Height` - to control its [size]({%slug common-features/dimensions%}).
 * `Top` and `Left` - to control its offset from its parent with special positioning (`relative`, `absolute`, `fixed`).
 * `AnimationType` and `AnimationDuration` to control the way it is shown and hidden. The animation duration is in milliseconds (defaults to `300`), and the type is of the `Telerik.Blazor.AnimationType` enum with the following options:
 	* SlideUp,
@@ -61,9 +59,7 @@ The animation container exposes the following properties and methods:
 >caption Explore the animation options
 
 ````CSHTML
-@using Telerik.Blazor.Components.AnimationContainer
-@using Telerik.Blazor.Components.Button
-@using Telerik.Blazor
+Choose a new animation from the dropdown and toggle the container
 
 <TelerikAnimationContainer @ref="myPopup" Top="300px" Width="200px" Height="200px" AnimationType="@AnimType" Class="my-popup">
 	My content goes here.<br />