docs(i18n): Updating JA with the latest changes.

jp/components/button.md

@@ -9,7 +9,7 @@ _language: ja
 
 Angular Button ディレクティブは、アクション可能なボタンを作成して Web ページ/アプリケーションに追加するために使用されます。簡単にカスタマイズでき、いくつかの組み込み機能を含むさまざまな Angular Button タイプがあります。デフォルトでは、AngularMaterial はネイティブの `<button>` および `<a>` 要素を使用して、アクセス可能なエクスペリエンスを提供します。 
 
-Ignite UI for Angular Button ディレクティブを任意の button、span、div、または anchor 要素に適用して高機能なボタンを構成できます。Flat ボタン、Raised ボタン、Outlined ボタン、Icon ボタン、FAB (フローティング アクション ボタン) の Angular ボタン タイプを使用できます。カスタマイズ可能な色、テーマを作成して Angular ボタン スタイルを変更するオプション、ユーザーがボタンのサイズを選択できるようにするオプションなどを提供します。
+Ignite UI for Angular Button ディレクティブを任意の button、span、div、または anchor 要素に適用して高機能なボタンを構成できます。Flat ボタン、Contained ボタン、Outlined ボタン、FAB (フローティング アクション ボタン) の Angular ボタン タイプを使用できます。カスタマイズ可能な色、テーマを作成して Angular ボタン スタイルを変更するオプション、ユーザーがボタンのサイズを選択できるようにするオプションなどを提供します。
 
 ## Angular Button の例
 以下の Angular Button の例を作成して、さまざまなボタン タイプが境界線でスタイル設定されている場合、または透明な背景が適用されている場合にどのように表示されるかを示します。
@@ -84,12 +84,12 @@ Ignite UI for Angular Button モジュールまたはディレクティブをイ
     <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-2"></iframe>
 </div>
 
-### Raised ボタン
+### Contained ボタン
 
-エンボス加工されたボタンを作成するには、`igxButton` プロパティの値を変更するだけです。
+Contained ボタンを作成するには、`igxButton` プロパティの値を変更するだけです。
 
 ```html
-<button igxButton="raised">Raised</button>
+<button igxButton="contained">Contained</button>
 ```
 
 <div class="sample-container loading" style="height: 70px">
@@ -110,10 +110,10 @@ Ignite UI for Angular Button モジュールまたはディレクティブをイ
 
 ### Icon ボタン
 
-アイコンをボタンとして使用することもできます。
+バージョン `17.1.0` 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい `igxIconButton` ディレクティブを公開します。*Icon Button* の詳細については[こちら](icon-button.md)を参照してください。
 
 ```html
-<button igxButton="icon">
+<button igxIconButton="flat">
   <igx-icon fontSet="material">favorite</igx-icon>
 </button>
 ```
@@ -155,7 +155,7 @@ Ignite UI for Angular Button モジュールまたはディレクティブをイ
 ボタンを無効にするには、`disabled` プロパティを使用します。
 
 ```html
-<button igxButton="raised" [disabled]="'true'">Disabled</button>
+<button igxButton="contained" [disabled]="'true'">Disabled</button>
 ```
 
 <div class="sample-container loading" style="height: 70px">
@@ -167,7 +167,7 @@ Ignite UI for Angular Button モジュールまたはディレクティブをイ
 [`igxRipple`]({environment:angularApiUrl}/classes/igxrippledirective.html) ディレクティブは、ボタンまたはその他の指定した要素にリップル効果を追加します。`以下のプロパティを使用して、デフォルトのリップル色、位置、および期間を簡単に変更できます。
 
 ```html
-<button igxButton="raised" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
+<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
     Ripple
 </button>
 ```
@@ -181,7 +181,7 @@ Ignite UI for Angular Button モジュールまたはディレクティブをイ
 `span` や `div` などの要素を Ignite UI for Angular スタイルのボタンに変更するために `igxButton` ディレクティブを使用できます。デフォルトの色は `igxButtonColor` と `igxButtonBackground` プロパティでカスタマイズできます。
 
 ```html
-<span igxButton="raised" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
+<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
     Span
 </span>
 ```
@@ -260,8 +260,8 @@ protected get sizeStyle() {
 次のマークアップを前提として:
 
 ```html
-<div class="my-raised-btn">
-    <button igxButton="raised">Raised button</button>
+<div class="my-contained-btn">
+    <button igxButton="contained">Contained button</button>
 </div>
 ```
 
@@ -286,7 +286,7 @@ $custom-button-theme: button-theme(
 最後には、カスタム ボタン テーマをアプリケーションに渡します。 
 
 ```scss
-.my-raised-btn {
+.my-contained-btn {
     @include css-vars($custom-button-theme);
 }
 ```
@@ -299,7 +299,7 @@ Internet Explorer 11 などの古いブラウザーのコンポーネントを
 ```scss
 :host {
      ::ng-deep {
-        .my-raised-btn {
+        .my-contained-btn {
             @include button($custom-button-theme);
         }
     }
@@ -320,6 +320,7 @@ Internet Explorer 11 などの古いブラウザーのコンポーネントを
 * [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
 * [IgxButton スタイル]({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)
 
 ## その他のリソース
@@ -328,4 +329,4 @@ Internet Explorer 11 などの古いブラウザーのコンポーネントを
 コミュニティに参加して新しいアイデアをご提案ください。
 
 * [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)

jp/components/calendar.md

@@ -250,7 +250,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>
 ```
 
 以下のデモでは、休暇要求オプションのカレンダーを示します。

jp/components/card.md

@@ -75,10 +75,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>
@@ -126,10 +126,10 @@ Ignite UI for Angular Card モジュールまたはディレクティブをイ
 
     <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>
@@ -216,7 +216,7 @@ Angular Card に表示する画像や動画は、`igx-card-media` タグで囲
     <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>
@@ -246,7 +246,7 @@ Angular Card に表示する画像や動画は、`igx-card-media` タグで囲
 
 ```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>
@@ -309,7 +309,7 @@ Angular Card の操作領域では、すでに説明したコンテンツに追
 <igx-card-actions [reverse]="true">
     <button igxButton>Button</button>
 
-    <button igxButton="icon">
+    <button igxIconButton="flat">
         <igx-icon>star</igx-icon>
     </button>
 </igx-card-actions>
@@ -323,7 +323,7 @@ Angular Card の操作領域では、すでに説明したコンテンツに追
 <igx-card-actions layout="justify">
     <button igxButton>Button</button>
 
-    <button igxButton="icon">
+    <button igxIconButton="flat">
         <igx-icon>star</igx-icon>
     </button>
 </igx-card-actions>

jp/components/carousel.md

@@ -197,7 +197,7 @@ Angular カスタム カルーセル インジケーターを追加するには
                     </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>
@@ -215,7 +215,7 @@ Angular カスタム カルーセル インジケーターを追加するには
                     </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>

jp/components/circular-progress.md

@@ -131,10 +131,10 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ
         class="custom-size">
     </igx-circular-bar>
     <div class="button-container">
-        <button igxButton="icon" (click)="decrementProgress()">
+        <button igxIconButton="flat" (click)="decrementProgress()">
             <igx-icon fontSet="material">remove</igx-icon>
         </button>
-        <button igxButton="icon" (click)="incrementProgress()">
+        <button igxIconButton="flat" (click)="incrementProgress()">
             <igx-icon fontSet="material">add</igx-icon>
         </button>
     </div>
@@ -221,10 +221,10 @@ $custom-theme: progress-circular-theme(
   </igx-circular-bar>
 
   <div class="button-container">
-      <button igxButton="icon" (click)="removeProgress()">
+      <button igxIconButton="flat" (click)="removeProgress()">
           <igx-icon fontSet="material">remove</igx-icon>
       </button>
-      <button igxButton="icon" (click)="addProgress()">
+      <button igxIconButton="flat" (click)="addProgress()">
           <igx-icon fontSet="material">add</igx-icon>
       </button>
   </div>

jp/components/dialog.md

@@ -56,7 +56,7 @@ import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from 'i
 @Component({
     selector: 'app-home',
     template: `
-    <button igxButton="raised" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>
+    <button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>
 
     <igx-dialog #alert
         title="Notification"
@@ -85,7 +85,7 @@ Ignite UI for Angular Dialog Window モジュールまたはディレクティ
 
 ```html
 <!--email.component.html-->
-<button igxButton="raised" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>
+<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>
 
 <igx-dialog #alert
     title="Notification"
@@ -105,7 +105,7 @@ Ignite UI for Angular Dialog Window モジュールまたはディレクティ
 
 ```html
 <!--file-manager.component.html-->
-<button igxButton="raised" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>
+<button igxButton="contained" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>
 
 <igx-dialog #dialog title="Confirmation"
     leftButtonLabel="Cancel"
@@ -131,7 +131,7 @@ Ignite UI for Angular Dialog Window モジュールまたはディレクティ
 
 ```html
 <!--sign-in.component.html-->
-<button igxButton="raised" igxRipple="white" (click)="alert.open()">Show Custom Dialog</button>
+<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Custom Dialog</button>
 
 <igx-dialog #form [closeOnOutsideSelect]="true">
     <igx-dialog-title>

jp/components/drop-down.md

@@ -59,7 +59,7 @@ import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective
 @Component({
     selector: 'app-home',
     template: `
-    <button igxButton="raised" 
+    <button igxButton="contained" 
         [igxToggleAction]="dropdown"
         [igxDropDownItemNavigation]="dropdown">
         Options
@@ -89,7 +89,7 @@ Ignite UI for Angular Drop Down モジュールまたはディレクティブを
 
 ```html
 <!-- dropdown.component.html -->
-<button igxButton="raised" 
+<button igxButton="contained" 
         [igxToggleAction]="dropdown"
         [igxDropDownItemNavigation]="dropdown">
         Options
@@ -122,7 +122,7 @@ export class MyDropDownComponent {
 
 ```html
 <!-- dropdown.component.html -->
-<button igxButton="raised" 
+<button igxButton="contained" 
         [igxToggleAction]="dropdown" 
         [igxDropDownItemNavigation]="dropdown">
         Options
@@ -160,7 +160,7 @@ export class MyDropDownComponent {
 
 ```html
 <!-- dropdown.component.html -->
-<button igxButton="raised" 
+<button igxButton="contained" 
         [igxToggleAction]="dropdown"
         [igxDropDownItemNavigation]="dropdown">
         Countries
@@ -292,7 +292,7 @@ export class MyCustomDropDownComponent {
                 [igxToggleOutlet]="outlet"
                 [overlaySettings]="overlaySettings"
                 [igxDropDownItemNavigation]="menu"
-                igxButton="icon">
+                igxIconButton="flat">
             <igx-icon fontSet="material">more_vert</igx-icon>
         </button>
         <igx-drop-down #menu (selectionChanging)="selectionHandler($event)">
@@ -425,7 +425,7 @@ public ngAfterViewInit(): void {
         [value]="dropDown.selectedItem?.value"
         (keydown.ArrowDown)="openDropDown()"/>
 
-    <igx-suffix igxButton="icon" igxRipple>
+    <igx-suffix igxIconButton="flat" igxRipple>
         <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
     </igx-suffix>
 </igx-input-group>