docs(material/datepicker): switch examples to use MDC

crisbeto · crisbeto · commit 4a4d7722faee · 2022-10-12T18:00:25.000+02:00
Switches the datepicker docs to use MDC since we won't be including the theming for the legacy components anymore.
diff --git a/src/components-examples/material/datepicker/BUILD.bazel b/src/components-examples/material/datepicker/BUILD.bazel
@@ -16,13 +16,13 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material-moment-adapter",
+        "//src/material/button",
+        "//src/material/card",
         "//src/material/core",
         "//src/material/datepicker",
         "//src/material/datepicker/testing",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-card",
-        "//src/material/legacy-input",
+        "//src/material/input",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
@@ -9,7 +9,7 @@
     <input matEndDate placeholder="End date" formControlName="end">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
   <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
 </mat-form-field>
 
@@ -23,7 +23,7 @@
     <input matStartDate placeholder="Start date" formControlName="start">
     <input matEndDate placeholder="End date" formControlName="end">
   </mat-date-range-input>
-  <mat-datepicker-toggle matSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
   <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
@@ -5,7 +5,7 @@
     <input matEndDate formControlName="end" placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
 
   <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
diff --git a/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html b/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html
@@ -5,6 +5,6 @@
     <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html b/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html
@@ -5,6 +5,6 @@
     <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html
@@ -2,7 +2,7 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="datepicker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
 <!-- #docregion datepicker-actions -->
   <mat-datepicker #datepicker>
     <mat-datepicker-actions>
@@ -20,7 +20,7 @@
     <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
 <!-- #docregion date-range-picker-actions -->
   <mat-date-range-picker #rangePicker>
     <mat-date-range-picker-actions>
diff --git a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html b/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html
@@ -2,14 +2,14 @@
   <mat-label>Inherited calendar color</mat-label>
   <input matInput [matDatepicker]="picker1">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1></mat-datepicker>
 </mat-form-field>
 
 <mat-form-field color="accent" appearance="fill">
   <mat-label>Custom calendar color</mat-label>
   <input matInput [matDatepicker]="picker2">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
   <mat-datepicker #picker2 color="primary"></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.html b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.html
@@ -2,6 +2,6 @@
   <mat-label>Custom calendar header</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts
@@ -37,17 +37,12 @@ export class DatepickerCustomHeaderExample {
       font-weight: 500;
       text-align: center;
     }
-
-    .example-double-arrow .mat-icon {
-      margin: -22%;
-    }
   `,
   ],
   template: `
     <div class="example-header">
-      <button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">
-        <mat-icon>keyboard_arrow_left</mat-icon>
-        <mat-icon>keyboard_arrow_left</mat-icon>
+      <button mat-icon-button (click)="previousClicked('year')">
+        <mat-icon>keyboard_double_arrow_left</mat-icon>
       </button>
       <button mat-icon-button (click)="previousClicked('month')">
         <mat-icon>keyboard_arrow_left</mat-icon>
@@ -56,9 +51,8 @@ export class DatepickerCustomHeaderExample {
       <button mat-icon-button (click)="nextClicked('month')">
         <mat-icon>keyboard_arrow_right</mat-icon>
       </button>
-      <button mat-icon-button class="example-double-arrow" (click)="nextClicked('year')">
-        <mat-icon>keyboard_arrow_right</mat-icon>
-        <mat-icon>keyboard_arrow_right</mat-icon>
+      <button mat-icon-button (click)="nextClicked('year')">
+        <mat-icon>keyboard_double_arrow_right</mat-icon>
       </button>
     </div>
   `,
diff --git a/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html b/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html
@@ -2,7 +2,7 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker">
+  <mat-datepicker-toggle matIconSuffix [for]="picker">
     <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
   </mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
diff --git a/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html b/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html
@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html b/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html
@@ -3,7 +3,7 @@
     <mat-label>Completely disabled</mat-label>
     <input matInput [matDatepicker]="dp1" disabled>
     <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
+    <mat-datepicker-toggle matIconSuffix [for]="dp1"></mat-datepicker-toggle>
     <mat-datepicker #dp1></mat-datepicker>
   </mat-form-field>
 </p>
@@ -13,7 +13,7 @@
     <mat-label>Popup disabled</mat-label>
     <input matInput [matDatepicker]="dp2">
     <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
+    <mat-datepicker-toggle matIconSuffix [for]="dp2" disabled></mat-datepicker-toggle>
     <mat-datepicker #dp2></mat-datepicker>
   </mat-form-field>
 </p>
@@ -23,7 +23,7 @@
     <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="dp3" disabled>
     <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
+    <mat-datepicker-toggle matIconSuffix [for]="dp3"></mat-datepicker-toggle>
     <mat-datepicker #dp3 disabled="false"></mat-datepicker>
   </mat-form-field>
 </p>
diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html
@@ -3,7 +3,7 @@
   <input matInput [matDatepicker]="picker"
          (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
 
diff --git a/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.html b/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.html
@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html b/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html
@@ -2,6 +2,6 @@
   <mat-label>Verbose datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MMMM DD, YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html
@@ -2,7 +2,7 @@
   <mat-label>Different locale</mat-label>
   <input matInput [matDatepicker]="dp">
   <mat-hint>{{getDateFormatString()}}</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>
 <button mat-button (click)="french()">Dynamically switch to French</button>
diff --git a/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html b/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html
@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html b/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html
@@ -2,6 +2,6 @@
   <mat-label>Moment.js datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.html b/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.html
@@ -3,7 +3,7 @@
 <!-- #docregion toggle -->
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 <!-- #enddocregion toggle -->
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.html b/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.html
@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.html b/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.html
@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker touchUi #picker></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.html b/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.html
@@ -2,7 +2,7 @@
   <mat-label>Angular forms</mat-label>
   <input matInput [matDatepicker]="picker1" [formControl]="date">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1></mat-datepicker>
 </mat-form-field>
 
@@ -11,14 +11,14 @@
   <input matInput [matDatepicker]="picker2"
          [formControl]="serializedDate">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
   <mat-datepicker #picker2></mat-datepicker>
 </mat-form-field>
 
 <mat-form-field appearance="fill">
   <mat-label>Value binding</mat-label>
   <input matInput [matDatepicker]="picker3" [value]="date.value">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker3"></mat-datepicker-toggle>
   <mat-datepicker #picker3></mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html
@@ -2,7 +2,7 @@
   <mat-label>Month and Year</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MM/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp
                   startView="multi-year"
                   (monthSelected)="setMonthAndYear($event, dp)"
diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts
@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {DateRangePickerComparisonExample} from './date-range-picker-comparison/date-range-picker-comparison-example';
 import {DateRangePickerFormsExample} from './date-range-picker-forms/date-range-picker-forms-example';
 import {DateRangePickerOverviewExample} from './date-range-picker-overview/date-range-picker-overview-example';
@@ -95,10 +95,10 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
-    MatLegacyCardModule,
+    MatButtonModule,
+    MatCardModule,
     MatDatepickerModule,
-    MatLegacyInputModule,
+    MatInputModule,
     MatIconModule,
     MatNativeDateModule,
     ReactiveFormsModule,
diff --git a/src/dev-app/datepicker/custom-header.html b/src/dev-app/datepicker/custom-header.html
@@ -1,7 +1,6 @@
 <div class="demo-calendar-header">
-  <button mat-icon-button class="demo-double-arrow" (click)="previousClicked('year')">
-    <mat-icon>keyboard_arrow_left</mat-icon>
-    <mat-icon>keyboard_arrow_left</mat-icon>
+  <button mat-icon-button (click)="previousClicked('year')">
+    <mat-icon>keyboard_double_arrow_left</mat-icon>
   </button>
   <button mat-icon-button (click)="previousClicked('month')">
     <mat-icon>keyboard_arrow_left</mat-icon>
@@ -10,8 +9,7 @@
   <button mat-icon-button (click)="nextClicked('month')">
     <mat-icon>keyboard_arrow_right</mat-icon>
   </button>
-  <button mat-icon-button class="demo-double-arrow" (click)="nextClicked('year')">
-    <mat-icon>keyboard_arrow_right</mat-icon>
-    <mat-icon>keyboard_arrow_right</mat-icon>
+  <button mat-icon-button (click)="nextClicked('year')">
+    <mat-icon>keyboard_double_arrow_right</mat-icon>
   </button>
 </div>
diff --git a/src/dev-app/datepicker/custom-header.scss b/src/dev-app/datepicker/custom-header.scss
@@ -10,7 +10,3 @@
   font-weight: bold;
   text-align: center;
 }
-
-.demo-double-arrow .mat-icon {
-  margin: -22%;
-}
diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts
@@ -111,7 +111,7 @@ export class CustomRangeStrategy {}
   styleUrls: ['custom-header.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule],
+  imports: [MatIconModule, MatButtonModule],
 })
 export class CustomHeader<D> implements OnDestroy {
   private readonly _destroyed = new Subject<void>();
