Changes for 2.0.0

.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/input-validation.md

@@ -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 />

components/animationcontainer/overview.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 />

components/button/overview.md

@@ -14,15 +14,23 @@ This article provides information about the Button component and its core featur
 
 The Button component provides styling according to the [chosen theme]({%slug general-information/themes%}), click event and icons. You can also disable the button through a property.
 
+In this article:
+
+* [Basic Button](#basic-button)
+* [Click Handler](#click-handler)
+* [Styling](#styling)
+* [Icons](#icons)
+* [Disabled State](#disabled-state)
+* [Button Type](#button-type)
+
+
 ## Basic Button
 
 To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
 
 >caption Basic Telerik Button tag
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
-
 <TelerikButton>Hello!</TelerikButton>
 ````
 
@@ -33,12 +41,12 @@ To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
 >caption Component namespace and reference
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
+@using Telerik.Blazor.Components
 
 <TelerikButton @ref="theButton">Hello!</TelerikButton>
 
 @code{
-	Telerik.Blazor.Components.Button.TelerikButton theButton;
+	Telerik.Blazor.Components.TelerikButton theButton;
 }
 ````
 
@@ -49,12 +57,10 @@ To attach a click handler, use the `OnClick` attribute and define the method in
 >caption Click handler for a Telerik Button
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
+@someVariable
 
 <TelerikButton OnClick="@myHandler">Click me!</TelerikButton>
 
-@someVariable
-
 @code {
 	MarkupString someVariable;
 
@@ -72,8 +78,6 @@ You can style the button through its `Class` attribute to define your own CSS ru
 >caption Set CSS class to the button and change its appearance
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
-
 <TelerikButton Class="RedText">My text is red.</TelerikButton>
 
 <style>
@@ -93,8 +97,6 @@ You can also make the button use a strong color to attact attention, called Prim
 >caption Button with the Primary color scheme from the current theme
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
-
 <TelerikButton Primary="true">Primary</TelerikButton>
 ````
 
@@ -119,9 +121,6 @@ The following example shows how to use an image from a URL, a sprite image, and
 >caption How to use icons in Telerik Button
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
-@using Telerik.Blazor
-
 <TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
 <TelerikButton Icon="@IconName.Filter">Font Icon</TelerikButton>
 <TelerikButton ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image URL</TelerikButton>
@@ -148,8 +147,6 @@ To disable a button, set its `Enabled` attribute to `false`.
 >caption Disabled Telerik Button
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
-
 <TelerikButton Enabled="false">Disabled Button</TelerikButton>
 ````
 
@@ -168,9 +165,6 @@ You can control the `type` attribute through the `ButtonType` property of the co
 * `Reset` - Renders a `type="reset"` attribute. Can reset the current form.
 
 ````CSHTML
-@using Telerik.Blazor.Components.Button
-@using Telerik.Blazor
-
 <TelerikButton>Implicit SUBMIT</TelerikButton>
 <TelerikButton ButtonType="@ButtonType.Submit">Explicit SUBMIT</TelerikButton>
 <TelerikButton ButtonType="@ButtonType.Button">BUTTON</TelerikButton>

components/calendar/navigation.md

@@ -21,9 +21,6 @@ You can control how far the user can go by setting the `Min` and `Max` propertie
 >caption Previous and Next navigation is enabled by default. You can control the min and max range of dates the user can navigate through
 
 ````CSHTML
-@using Telerik.Blazor.Components.Calendar
-@using Telerik.Blazor
-
 The user starts in April 2019 and can navigate between January 2019 and July 2019.
 <br />
 
@@ -57,9 +54,6 @@ You can control how much detail the user can go into by setting the `BottomView`
 >caption Control current view and how deep the user can go
 
 ````CSHTML
-@using Telerik.Blazor.Components.Calendar
-@using Telerik.Blazor
-
 The user starts in the Decade view and can only go down to years.
 <br />
 
@@ -88,28 +82,32 @@ The selected date is: @selectedDate
 
 ## Programmatic Navigation
 
-You can make the Calendar component move to a certain date and view through its `Navigate` method from your own code. The method takes into account the min and max dates, and the allowed views. If the parameters passed to the method are not allowed by those constraints, navigation will not occur.
+You can make the Calendar component move to a certain date and view through its `Date` and `View` parameters that support two-way binding. The constraints of the min/max and bottom view apply to programmatic navigation as well as to user navigation.
 
 >caption Navigate the Calendar to a date and view programmatically
 
 ````CSHTML
-@using Telerik.Blazor.Components.Calendar
-@using Telerik.Blazor.Components.Button
+Programmatic Calendar navigation<br />
 
-<TelerikButton OnClick="@NavigateCalendarProgrammatically">Go to new date and view</TelerikButton>
-<TelerikCalendar Date="@startDate" Max="@maxDate" Min="@minDate" View="@Telerik.Blazor.CalendarView.Decade" @ref="theCalendar"></TelerikCalendar>
+<TelerikCalendar Date="@startDate"
+                    Min="@min"
+                    Max="@max"
+                    View="@calendarView">
+</TelerikCalendar>
+<TelerikButton OnClick="@UpdateView">Update View</TelerikButton>
 
-@code{
-	DateTime startDate = new DateTime(2345, 11, 22);
-	DateTime maxDate = new DateTime(2400, 11, 22);
-	DateTime minDate = new DateTime(1800, 11, 22);
+@code {
+    CalendarView calendarView { get; set; } = CalendarView.Month;
+    DateTime startDate { get; set; } = new DateTime(2019, 5, 2);
 
-	Telerik.Blazor.Components.Calendar.TelerikCalendar theCalendar;
+    DateTime min = new DateTime(2015, 1, 1);
+    DateTime max = new DateTime(2025, 12, 31);
 
-	void NavigateCalendarProgrammatically()
-	{
-		theCalendar.Navigate(DateTime.Now, Telerik.Blazor.CalendarView.Month);
-	}
+    protected void UpdateView()
+    {
+        calendarView = CalendarView.Year;
+        startDate = new DateTime(2018, 5, 2);
+    }
 }
 ````