docs(material-experimental/button): update class JsDoc (#16988)

Author: andrewseguin

src/material-experimental/mdc-button/README.md

@@ -1,6 +1,4 @@
 ### TODO
-- Write README - looks like lot of overlap with checkbox README. Create common readme for setup
-- JSDoc comments on all classes, consts
 - Consider supporting button[mat-outlined-button]
 - Add to universal app
 - Consider if we want to add a "appearance/type" input to button, similar to form field (outline/stroked, flat, raised)

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

@@ -27,7 +27,15 @@ import {
   MatButtonBase
 } from './button-base';
 
-
+/**
+ * Material Design button component. Users interact with a button to perform an action.
+ * See https://material.io/components/buttons
+ *
+ * The `MatButton` class applies to native button elements and captures the appearances for
+ * "text button", "outlined button", and "contained button" per the Material Design
+ * specification. `MatButton` additionally captures an additional "flat" appearance, which matches
+ * "contained" but without elevation.
+ */
 @Component({
   moduleId: module.id,
   selector: `
@@ -50,6 +58,16 @@ export class MatButton extends MatButtonBase {
   }
 }
 
+/**
+ * Material Design button component for anchor elements. Anchor elements are used to provide
+ * links for the user to navigate across different routes or pages.
+ * See https://material.io/components/buttons
+ *
+ * The `MatAnchor` class applies to native anchor elements and captures the appearances for
+ * "text button", "outlined button", and "contained button" per the Material Design
+ * specification. `MatAnchor` additionally captures an additional "flat" appearance, which matches
+ * "contained" but without elevation.
+ */
 @Component({
   moduleId: module.id,
   selector: `a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]`,

src/material-experimental/mdc-button/fab.ts

@@ -26,8 +26,15 @@ import {
   MAT_BUTTON_INPUTS,
   MatButtonBase
 } from './button-base';
+import {ThemePalette} from '@angular/material/core';
 
-
+/**
+ * Material Design floating action button (FAB) component. These buttons represent the primary
+ * or most common action for users to interact with.
+ * See https://material.io/components/buttons-floating-action-button/
+ *
+ * The `MatFabButton` class has two appearances: normal and mini.
+ */
 @Component({
   moduleId: module.id,
   selector: `button[mat-fab], button[mat-mini-fab]`,
@@ -40,14 +47,24 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatFabButton extends MatButtonBase {
+  // The FAB by default has its color set to accent.
+  color = 'accent' as ThemePalette;
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
-    this.color = 'accent';
   }
 }
 
+
+/**
+ * Material Design floating action button (FAB) component for anchor elements. Anchor elements
+ * are used to provide links for the user to navigate across different routes or pages.
+ * See https://material.io/components/buttons-floating-action-button/
+ *
+ * The `MatFabAnchor` class has two appearances: normal and mini.
+ */
 @Component({
   moduleId: module.id,
   selector: `a[mat-fab], a[mat-mini-fab]`,
@@ -60,10 +77,12 @@ export class MatFabButton extends MatButtonBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatFabAnchor extends MatAnchor {
+  // The FAB by default has its color set to accent.
+  color = 'accent' as ThemePalette;
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
-    this.color = 'accent';
   }
 }

src/material-experimental/mdc-button/icon-button.ts

@@ -27,7 +27,11 @@ import {
   MatButtonBase
 } from './button-base';
 
-
+/**
+ * Material Design icon button component. This type of button displays a single interactive icon for
+ * users to perform an action.
+ * See https://material.io/develop/web/components/buttons/icon-buttons/
+ */
 @Component({
   moduleId: module.id,
   selector: `button[mat-icon-button]`,
@@ -40,6 +44,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIconButton extends MatButtonBase {
+  // Set the ripple to be centered for icon buttons
   _isRippleCentered = true;
 
   constructor(
@@ -49,6 +54,11 @@ export class MatIconButton extends MatButtonBase {
   }
 }
 
+/**
+ * Material Design icon button component for anchor elements. This button displays a single
+ * interaction icon that allows users to navigate across different routes or pages.
+ * See https://material.io/develop/web/components/buttons/icon-buttons/
+ */
 @Component({
   moduleId: module.id,
   selector: `a[mat-icon-button]`,
@@ -61,6 +71,7 @@ export class MatIconButton extends MatButtonBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIconAnchor extends MatAnchorBase {
+  // Set the ripple to be centered for icon buttons
   _isRippleCentered = true;
 
   constructor(