feat(material-experimental/mdc-card): add appearance input (#22070)

* feat(material-experimental/mdc-card): add appearance input

* fixup! feat(material-experimental/mdc-card): add appearance input

Author: annieyw

src/dev-app/mdc-card/mdc-card-demo.html

@@ -1,18 +1,18 @@
 <div class="demo-card-container">
-  <mat-checkbox [(ngModel)]="outlined">Use outlined cards</mat-checkbox>
+  <mat-checkbox (change)="toggleAppearance()">Use outlined cards</mat-checkbox>
 
 <!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     Card with only text content
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-content>
       Card with only <code>&lt;mat-card-content&gt;</code> and text content.
     </mat-card-content>
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-subtitle>Subtitle</mat-card-subtitle>
     <mat-card-title>Card with title and footer</mat-card-title>
     <mat-card-content>
@@ -25,7 +25,7 @@
     </mat-card-actions>
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-subtitle>Subtitle</mat-card-subtitle>
     <mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
     <mat-card-content>
@@ -39,7 +39,7 @@
 
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
     <mat-card-title>Content Title</mat-card-title>
     <mat-card-content>
@@ -51,7 +51,7 @@
     </mat-card-actions>
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-header>
       <img mat-card-avatar>
       <mat-card-title>Header title</mat-card-title>
@@ -63,7 +63,7 @@
     </mat-card-content>
   </mat-card>
 
-  <mat-card class="demo-card-blue mat-card-flat" [class.mdc-card--outlined]="outlined">
+  <mat-card class="demo-card-blue mat-card-flat" [appearance]="appearance">
     <mat-card-title>Easily customizable</mat-card-title>
     <mat-card-actions>
       <button mat-button>First</button>
@@ -74,7 +74,7 @@
   <hr>
   <h2>Cards with media area</h2>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Small</mat-card-subtitle>
@@ -85,7 +85,7 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Medium</mat-card-subtitle>
@@ -96,7 +96,7 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Large</mat-card-subtitle>
@@ -107,7 +107,7 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
-  <mat-card [class.mdc-card--outlined]="outlined">
+  <mat-card [appearance]="appearance">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Extra large</mat-card-subtitle>

src/dev-app/mdc-card/mdc-card-demo.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component, ViewEncapsulation} from '@angular/core';
+import {MatCardAppearance} from '@angular/material-experimental/mdc-card';
 
 @Component({
   selector: 'mdc-card-demo',
@@ -15,11 +16,14 @@ import {Component, ViewEncapsulation} from '@angular/core';
   encapsulation: ViewEncapsulation.None,
 })
 export class MdcCardDemo {
-  outlined = false;
+  appearance: MatCardAppearance = 'raised';
   longText = `Once upon a midnight dreary, while I pondered, weak and weary,
               Over many a quaint and curious volume of forgotten lore—
               While I nodded, nearly napping, suddenly there came a tapping,
               As of some one gently rapping, rapping at my chamber door.
               “’Tis some visitor,” I muttered, “tapping at my chamber door—
               Only this and nothing more.”`;
+  toggleAppearance() {
+    this.appearance = this.appearance == 'raised' ? 'outlined' : 'raised';
+  }
 }

src/material-experimental/mdc-card/card.ts

@@ -14,6 +14,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
+export type MatCardAppearance = 'outlined' | 'raised';
 
 /**
  * Material Design card component. Cards contain content and actions about a single subject.
@@ -25,13 +26,17 @@ import {
   selector: 'mat-card',
   templateUrl: 'card.html',
   styleUrls: ['card.css'],
-  host: {'class': 'mat-mdc-card mdc-card'},
+  host: {
+    'class': 'mat-mdc-card mdc-card',
+    '[class.mdc-card--outlined]': 'appearance == "outlined"'
+  },
   exportAs: 'matCard',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatCard {
-  // TODO(jelbourn): add `outline` option to card (supported by MDC)
+  @Input() appearance: MatCardAppearance = 'raised';
+
 }
 
 // TODO(jelbourn): add `MatActionCard`, which is a card that acts like a button (and has a ripple).