refactor: update snippets/embedded example comments in material docs md to reflect new API (panel, stepper) (#19680)

* expansion panel

* stepper

* add space in obj literal

Author: annieyw

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html

@@ -2,7 +2,9 @@
   <button mat-button (click)="accordion.openAll()">Expand All</button>
   <button mat-button (click)="accordion.closeAll()">Collapse All</button>
 </div>
+<!-- #docregion multi -->
 <mat-accordion class="example-headers-align" multi>
+<!-- #enddocregion multi -->
   <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-title>
@@ -25,8 +27,9 @@
     </mat-form-field>
 
   </mat-expansion-panel>
-
+<!-- #docregion disabled -->
   <mat-expansion-panel disabled>
+<!-- #enddocregion disabled -->
     <mat-expansion-panel-header>
       <mat-panel-title>
         Destination

src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html

@@ -1,24 +1,19 @@
 <mat-accordion>
-  <mat-expansion-panel>
+<!-- #docregion basic-panel -->
+<!-- #docregion hide-toggle -->
+  <mat-expansion-panel hideToggle>
+<!-- #enddocregion hide-toggle -->
     <mat-expansion-panel-header>
       <mat-panel-title>
-        Personal data
+        This is the expansion title
       </mat-panel-title>
       <mat-panel-description>
-        Type your name and age
+        This is a summary of the content
       </mat-panel-description>
     </mat-expansion-panel-header>
-
-    <mat-form-field>
-      <mat-label>First name</mat-label>
-      <input matInput>
-    </mat-form-field>
-
-    <mat-form-field>
-      <mat-label>Age</mat-label>
-      <input matInput type="number" min="1">
-    </mat-form-field>
+    <p>This is the primary content of the panel.</p>
   </mat-expansion-panel>
+<!-- #enddocregion basic-panel -->
   <mat-expansion-panel (opened)="panelOpenState = true"
                        (closed)="panelOpenState = false">
     <mat-expansion-panel-header>

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html

@@ -19,10 +19,11 @@
       <mat-label>Age</mat-label>
       <input matInput type="number" min="1">
     </mat-form-field>
-
+<!-- #docregion action-bar -->
     <mat-action-row>
       <button mat-button color="primary" (click)="nextStep()">Next</button>
     </mat-action-row>
+<!-- #enddocregion action-bar -->
   </mat-expansion-panel>
 
   <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>

src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html

@@ -3,9 +3,13 @@
 </button>
 
 <mat-horizontal-stepper linear #stepper>
+<!-- #docregion editable -->
   <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
+<!-- #enddocregion editable -->
     <form [formGroup]="firstFormGroup">
+<!-- #edocregion ng-template -->
       <ng-template matStepLabel>Fill out your name</ng-template>
+<!-- #enddocregion ng-template -->
       <mat-form-field>
         <mat-label>Name</mat-label>
         <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>

src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html

@@ -1,4 +1,6 @@
+<!-- #docregion label-position -->
 <mat-horizontal-stepper labelPosition="bottom" #stepper>
+<!-- #enddocregion label-position -->
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -20,8 +22,10 @@
                required>
       </mat-form-field>
       <div>
+<!-- #docregion mat-stepper -->
         <button mat-button matStepperPrevious>Back</button>
         <button mat-button matStepperNext>Next</button>
+<!-- #enddocregion mat-stepper -->
       </div>
     </form>
   </mat-step>

src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html

@@ -15,7 +15,9 @@
       </div>
     </form>
   </mat-step>
+  <!-- #docregion optional -->
   <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
+  <!-- #enddocregion optional -->
     <form [formGroup]="secondFormGroup">
       <ng-template matStepLabel>Fill out your address</ng-template>
       <mat-form-field>

src/components-examples/material/stepper/stepper-states/stepper-states-example.html

@@ -35,13 +35,16 @@
   </mat-step>
 </mat-horizontal-stepper>
 
+<!-- #docregion states -->
 <mat-horizontal-stepper>
+<!-- #docregion label -->
   <mat-step label="Step 1" state="phone">
     <p>Put down your phones.</p>
     <div>
       <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
+<!-- #enddocregion label -->
   <mat-step label="Step 2" state="chat">
     <p>Socialize with each other.</p>
     <div>
@@ -54,10 +57,13 @@
   </mat-step>
 
   <!-- Icon overrides. -->
+<!-- #docregion override-icons -->
   <ng-template matStepperIcon="phone">
     <mat-icon>call_end</mat-icon>
   </ng-template>
   <ng-template matStepperIcon="chat">
     <mat-icon>forum</mat-icon>
   </ng-template>
 </mat-horizontal-stepper>
+<!-- #enddocregion override-icons -->
+<!-- #enddocregion states -->

src/material/expansion/expansion.md

@@ -4,100 +4,51 @@
 
 ### Expansion-panel content
 
-Each expansion-panel must include a header and may optionally include an action bar.
-
 #### Header
 
 The `<mat-expansion-panel-header>` shows a summary of the panel content and acts
 as the control for expanding and collapsing. This header may optionally contain an
 `<mat-panel-title>` and an `<mat-panel-description>`, which format the content of the
 header to align with Material Design specifications.
 
+<!-- example({"example": "expansion-overview",
+              "file": "expansion-overview-example.html", 
+              "region": "basic-panel"}) -->
+              
 By default, the expansion-panel header includes a toggle icon at the end of the
 header to indicate the expansion state. This icon can be hidden via the
 `hideToggle` property.
 
-```html
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    <mat-panel-title>
-      This is the expansion title
-    </mat-panel-title>
-    <mat-panel-description>
-      This is a summary of the content
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-
-  <p>This is the primary content of the panel.</p>
-
-</mat-expansion-panel>
-```
+<!-- example({"example": "expansion-overview",
+              "file": "expansion-overview-example.html", 
+              "region": "hide-toggle"}) -->         
 
 #### Action bar
 
 Actions may optionally be included at the bottom of the panel, visible only when the expansion
 is in its expanded state.
 
-```html
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    This is the expansion title
-  </mat-expansion-panel-header>
-
-  <p>This is the primary content of the panel.</p>
-
-  <mat-action-row>
-    <button mat-button>Click me</button>
-  </mat-action-row>
-</mat-expansion-panel>
-```
-
+<!-- example({"example": "expansion-steps",
+              "file": "expansion-steps-example.html", 
+              "region": "action-bar"}) -->
 #### Disabling a panel
 
 Expansion panels can be disabled using the `disabled` attribute. A disabled expansion panel can't
 be toggled by the user, but can still be manipulated programmatically.
 
-```html
-<mat-expansion-panel [disabled]="isDisabled">
-  <mat-expansion-panel-header>
-    This is the expansion title
-  </mat-expansion-panel-header>
-  <mat-panel-description>
-    This is a summary of the content
-  </mat-panel-description>
-</mat-expansion-panel>
-```
-
+<!-- example({"example": "expansion-expand-collapse-all",
+              "file": "expansion-expand-collapse-all-example.html", 
+              "region": "disabled"}) -->
 
 ### Accordion
 
 Multiple expansion-panels can be combined into an accordion. The `multi="true"` input allows the
 expansions state to be set independently of each other. When `multi="false"` (default) just one
 panel can be expanded at a given time:
 
-```html
-<mat-accordion>
-
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      This is the expansion 1 title
-    </mat-expansion-panel-header>
-
-    This the expansion 1 content
-
-  </mat-expansion-panel>
-
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      This is the expansion 2 title
-    </mat-expansion-panel-header>
-
-    This the expansion 2 content
-
-  </mat-expansion-panel>
-
-</mat-accordion>
-```
+<!-- example({"example": "expansion-expand-collapse-all",
+              "file": "expansion-expand-collapse-all-example.html", 
+              "region": "multi"}) -->
 
 ### Lazy rendering
 By default, the expansion panel content will be initialized even when the panel is closed.