Merge branch 'vnext' into dTsvetkov/update-template-version-vnext

.github/CONTRIBUTING.md

@@ -147,7 +147,7 @@ Ensure that whenever a change is made to the text content the appropriate status
 > Note: This status should be set only when the PR is approved. This will indicate that no further changes will be applied.
 2. `status: localized` this status is for issues that were with a pending translation status and have already been localized. Place this status label once these translation changes have been included in the current pull request, or the changes are already pulled with a different pull request.
 
-> Note: Keep in mind that when you submit a change in the EN .md files, you will need to make the same change in the JP versions as well. This will help our Localization team to translate the change. As for the KR version of the topic, these changes will be handled by the Localization team.
+> Note: Keep in mind that when you submit a change in the EN .md files, you don't need to make the same change in the JP/KR versions. This task will be handled by the Localization team.
 
 
 ## Fixing a bug  

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,6 +3,7 @@ Closes #
 ### Checklist:
 
  - [ ] check topic's TOC/menu and paragraph headings
+ - [ ] [Include TOC topic labels](https://github.com/IgniteUI/igniteui-docfx/blob/master/README.md#include-toc-topic-labels) in topic content has a valuable update, it's new or considered as `preview`\ `beta`
  - [ ] link to other topics using `../relative/path.md`
  - [ ] at the References section at the end of the topic add links to topics, samples, etc
  - [ ] reference API documentation instead of adding a section with API

en/components/bullet-graph.md

@@ -25,7 +25,7 @@ The following sample demonstrates how setting multiple properties on the same [`
 
 <div class="divider--half"></div>
 
-The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`transitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#transitionduration) property.
+The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`transitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#transitionDuration) property.
 The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more.
 
 <!-- Angular, React, WebComponents -->
@@ -243,7 +243,7 @@ The backing element represents background and border of the bullet graph compone
 
 ## Scale
 
-The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`isScaleInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#isscaleinverted) property) and all labels will be rendered from right-to-left instead of left-to-right.
+The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`isScaleInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#isScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right.
 
 ```html
 <igx-bullet-graph

en/components/button.md

@@ -8,7 +8,7 @@ _keywords: Angular Button component, Angular Button control, Ignite UI for Angul
 
 Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native `<button>` and `<a>` elements to deliver an accessible experience.
 
-The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Raised Button, Outlined Button, Icon Button and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button size and more.
+The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Contained Button, Outlined Button, and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button size and more.
 
 ## Angular Button Example
 We have created the Angular Button example below to show you how different button types can appear and look like when they are styled with a border or when a transparent background is applied.
@@ -83,12 +83,12 @@ Use the [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.htm
     <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-2"></iframe>
 </div>
 
-### Raised Button
+### Contained Button
 
-All you have to do to create a raised button is to change the value of the `igxButton` property:
+All you have to do to create a contained button is to change the value of the `igxButton` property:
 
 ```html
-<button igxButton="raised">Raised</button>
+<button igxButton="contained">Contained</button>
 ```
 
 <div class="sample-container loading" style="height: 70px">
@@ -109,10 +109,10 @@ Analogically, we can switch to outlined type:
 
 ### Icon Button
 
-We can also use icons as buttons:
+As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` directive intended to turn icons into fully functional buttons. You can read more about the [*Icon Button here*](icon-button.md).
 
 ```html
-<button igxButton="icon">
+<button igxIconButton="flat">
   <igx-icon fontSet="material">favorite</igx-icon>
 </button>
 ```
@@ -154,7 +154,7 @@ To create an extended FAB, you can add any element prior to the `igx-icon`:
 The `disabled` property can be used to make a button unclickable:
 
 ```html
-<button igxButton="raised" [disabled]="'true'">Disabled</button>
+<button igxButton="contained" [disabled]="'true'">Disabled</button>
 ```
 
 <div class="sample-container loading" style="height: 70px">
@@ -166,7 +166,7 @@ The `disabled` property can be used to make a button unclickable:
 The [`igxRipple`]({environment:angularApiUrl}/classes/igxrippledirective.html) directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties:
 
 ```html
-<button igxButton="raised" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
+<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
     Ripple
 </button>
 ```
@@ -180,7 +180,7 @@ The [`igxRipple`]({environment:angularApiUrl}/classes/igxrippledirective.html) d
 We can also use the `igxButton` directive to turn elements like `span` and `div` into Ignite UI for Angular styled buttons. The default colors can be customized via the `igxButtonColor` and the `igxButtonBackground` properties:
 
 ```html
-<span igxButton="raised" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
+<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
     Span
 </span>
 ```
@@ -259,8 +259,8 @@ Following the simplest approach, we create a new theme that extends the [`button
 Given the following markup:
 
 ```html
-<div class="my-raised-btn">
-    <button igxButton="raised">Raised button</button>
+<div class="my-contained-btn">
+    <button igxButton="contained">Contained button</button>
 </div>
 ```
 
@@ -285,7 +285,7 @@ Take a look at the [`button-theme`]({environment:sassApiUrl}/index.html#function
 The last step is to pass the custom button theme in our application:
 
 ```scss
-.my-raised-btn {
+.my-contained-btn {
     @include css-vars($custom-button-theme);
 }
 ```
@@ -298,7 +298,7 @@ If the component is using the [`Emulated`](themes/sass/component-themes.md#view-
 ```scss
 :host {
      ::ng-deep {
-        .my-raised-btn {
+        .my-contained-btn {
             @include button($custom-button-theme);
         }
     }
@@ -319,6 +319,7 @@ If the component is using the [`Emulated`](themes/sass/component-themes.md#view-
 * [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
 * [IgxButton Styles]({environment:sassApiUrl}/index.html#function-button-theme)
 * [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
+* [IgxIconButtonDirective]({environment:angularApiUrl}/classes/igxiconbuttondirective.html)
 * [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html)
 
 ## Additional Resources

en/components/calendar.md

@@ -249,7 +249,7 @@ export class CalendarSample7Component {
     leftButtonLabel="OK"
     (leftButtonSelect)="alert.close()">
 </igx-dialog>
-<button igxButton="raised" (click)="submitPTOdays($event)">Submit Request</button>
+<button igxButton="contained" (click)="submitPTOdays($event)">Submit Request</button>
 ```
 
 The following demo illustrates a calendar with a vacation request option:

en/components/card.md

@@ -74,10 +74,10 @@ import { IGX_CARD_DIRECTIVES } from 'igniteui-angular';
 
         <igx-card-actions>
             <button igxButton igxRipple>Read More</button>
-            <button igxButton="icon" igxRipple igxRippleCentered="true">
+            <button igxIconButton="flat" igxRipple igxRippleCentered="true">
                 <igx-icon>favorite</igx-icon>
             </button>
-            <button igxButton="icon" igxRipple igxRippleCentered="true">
+            <button igxIconButton="flat" igxRipple igxRippleCentered="true">
                 <igx-icon>share</igx-icon>
             </button>
         </igx-card-actions>
@@ -125,10 +125,10 @@ Then to represent the demo card template we can add the following code.
 
     <igx-card-actions>
         <button igxButton igxRipple>Read More</button>
-        <button igxButton="icon" igxRipple igxRippleCentered="true">
+        <button igxIconButton="flat" igxRipple igxRippleCentered="true">
             <igx-icon>favorite</igx-icon>
         </button>
-        <button igxButton="icon" igxRipple igxRippleCentered="true">
+        <button igxIconButton="flat" igxRipple igxRippleCentered="true">
             <igx-icon>share</igx-icon>
         </button>
     </igx-card-actions>
@@ -215,7 +215,7 @@ Here's an example of an outlined horizonal card:
     <igx-divider [vertical]="horizontal"></igx-divider>
 
     <igx-card-actions layout="justify">
-        <button *ngFor="let icon of card.icons;" igxButton="icon" igxRipple igxRippleCentered="true">
+        <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true">
             <igx-icon>{{icon}}</igx-icon>
         </button>
     </igx-card-actions>
@@ -245,7 +245,7 @@ You can set the `vertical` attribute of he actions area explicitly, thus overrid
 
 ```html
 <igx-card-actions layout="justify" [vertical]="false">
-    <button *ngFor="let icon of card.icons;" igxButton="icon" igxRipple igxRippleCentered="true">
+    <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true">
         <igx-icon>{{icon}}</igx-icon>
     </button>
 </igx-card-actions>
@@ -308,7 +308,7 @@ You can reverse order of the flat buttons and the button icons using the `revers
 <igx-card-actions [reverse]="true">
     <button igxButton>Button</button>
 
-    <button igxButton="icon">
+    <button igxIconButton="flat">
         <igx-icon>star</igx-icon>
     </button>
 </igx-card-actions>
@@ -322,7 +322,7 @@ You can also justify the buttons so that they are layed out across the entire ax
 <igx-card-actions layout="justify">
     <button igxButton>Button</button>
 
-    <button igxButton="icon">
+    <button igxIconButton="flat">
         <igx-icon>star</igx-icon>
     </button>
 </igx-card-actions>

en/components/carousel.md

@@ -196,7 +196,7 @@ This carousel is going to contain slides with forms and images:
                     </igx-input-group>
                 </form>
                 <div class="btn">
-                    <button igxButton="raised" type="submit" (click)="form.reset()">Sign In</button>
+                    <button igxButton="contained" type="submit" (click)="form.reset()">Sign In</button>
                 </div>
             </div>
         </igx-slide>
@@ -214,7 +214,7 @@ This carousel is going to contain slides with forms and images:
                     </igx-input-group>
                 </form>
                 <div class="btn">
-                    <button igxButton="raised" type="submit" (click)="form2.reset()">Search</button>
+                    <button igxButton="contained" type="submit" (click)="form2.reset()">Search</button>
                 </div>
             </div>
         </igx-slide>