refactor(material/stepper): remove all usages of deprecated selectors (#22838)

The `mat-horizontal-stepper` and `mat-vertical-stepper` were deprecated after we introduced the `orientation` input on `mat-stepper`. These changes update all docs and tests to use the new approach.

Author: crisbeto

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

@@ -2,7 +2,7 @@
   {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}
 </button>
 
-<mat-horizontal-stepper linear #stepper>
+<mat-stepper linear #stepper>
 <!-- #docregion editable -->
   <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
 <!-- #enddocregion editable -->
@@ -41,4 +41,4 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>

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

@@ -1,4 +1,4 @@
-<mat-horizontal-stepper #stepper>
+<mat-stepper #stepper>
   <mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -35,4 +35,4 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>

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

@@ -1,4 +1,4 @@
-<mat-horizontal-stepper>
+<mat-stepper>
   <mat-step>
     <ng-template matStepLabel>One</ng-template>
     <button matStepperNext>Next</button>
@@ -12,4 +12,4 @@
     <ng-template matStepLabel>Three</ng-template>
     <button matStepperPrevious>Previous</button>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>

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

@@ -11,7 +11,7 @@
     {{optionalLabelTextChoice}}
   </mat-radio-button>
 </mat-radio-group>
-<mat-horizontal-stepper class="demo-stepper" #stepper>
+<mat-stepper class="demo-stepper" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -56,4 +56,4 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>

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

@@ -1,5 +1,5 @@
 <!-- #docregion label-position -->
-<mat-horizontal-stepper labelPosition="bottom" #stepper>
+<mat-stepper labelPosition="bottom" #stepper>
 <!-- #enddocregion label-position -->
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
@@ -37,4 +37,4 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>

src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html

@@ -1,4 +1,4 @@
-<mat-vertical-stepper>
+<mat-stepper orientation="vertical">
   <mat-step>
     <ng-template matStepLabel>Step 1</ng-template>
     <ng-template matStepContent>
@@ -19,4 +19,4 @@
     <p>This content was rendered eagerly</p>
     <button mat-button matStepperPrevious>Back</button>
   </mat-step>
-</mat-vertical-stepper>
+</mat-stepper>

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

@@ -2,7 +2,7 @@
   {{!isOptional ? 'Enable optional steps' : 'Disable optional steps'}}
 </button>
 
-<mat-horizontal-stepper linear #stepper>
+<mat-stepper linear #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -39,4 +39,4 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>

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

@@ -1,7 +1,7 @@
 <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
   {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
-<mat-horizontal-stepper [linear]="isLinear" #stepper>
+<mat-stepper [linear]="isLinear" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -37,4 +37,4 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>

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

@@ -1,4 +1,4 @@
-<mat-horizontal-stepper #stepper>
+<mat-stepper #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -33,10 +33,10 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>
 
 <!-- #docregion states -->
-<mat-horizontal-stepper>
+<mat-stepper>
 <!-- #docregion label -->
   <mat-step label="Step 1" state="phone">
     <p>Put down your phones.</p>
@@ -64,6 +64,6 @@
   <ng-template matStepperIcon="chat">
     <mat-icon>forum</mat-icon>
   </ng-template>
-</mat-horizontal-stepper>
+</mat-stepper>
 <!-- #enddocregion override-icons -->
 <!-- #enddocregion states -->

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

@@ -1,7 +1,7 @@
 <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
   {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
-<mat-vertical-stepper [linear]="isLinear" #stepper>
+<mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -36,4 +36,4 @@
       <button mat-button (click)="stepper.reset()">Reset</button>
     </div>
   </mat-step>
-</mat-vertical-stepper>
+</mat-stepper>

src/dev-app/stepper/stepper-demo.html

@@ -76,7 +76,7 @@ <h3>Linear Stepper Demo using a single form</h3>
 </form>
 
 <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
-<mat-horizontal-stepper #linearHorizontalStepper="matHorizontalStepper" [linear]="!isNonLinear"
+<mat-stepper #linearHorizontalStepper="matHorizontalStepper" [linear]="!isNonLinear"
                         [disableRipple]="disableRipple"
                         [labelPosition]="showLabelBottom ? 'bottom' : 'end'"
                         [color]="theme">
@@ -124,11 +124,11 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
       </div>
     </form>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>
 
 <h3>Vertical Stepper Demo</h3>
 <mat-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</mat-checkbox>
-<mat-vertical-stepper [color]="theme">
+<mat-stepper orientation="vertical" [color]="theme">
   <mat-step [editable]="!isNonEditable">
     <ng-template matStepLabel>Fill out your name</ng-template>
     <mat-form-field>
@@ -180,10 +180,10 @@ <h3>Vertical Stepper Demo</h3>
       <button mat-button>Done</button>
     </div>
   </mat-step>
-</mat-vertical-stepper>
+</mat-stepper>
 
 <h3>Horizontal Stepper Demo with Text Label</h3>
-<mat-horizontal-stepper [color]="theme">
+<mat-stepper [color]="theme">
   <mat-step label="Fill out your name">
     <mat-form-field>
       <mat-label>First name</mat-label>
@@ -227,10 +227,10 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
       <button mat-button>Done</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>
 
 <h3>Horizontal Stepper Demo with Templated Label</h3>
-<mat-horizontal-stepper [color]="theme">
+<mat-stepper [color]="theme">
   <mat-step *ngFor="let step of steps">
     <ng-template matStepLabel>{{step.label}}</ng-template>
     <mat-form-field>
@@ -242,15 +242,15 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
       <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>
 
 <h3>Stepper with autosize textarea</h3>
-<mat-horizontal-stepper [color]="theme">
+<mat-stepper [color]="theme">
   <mat-step label="Step 1">
     <mat-form-field>
       <mat-label>Autosize textarea</mat-label>
       <textarea matInput cdkTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
     </mat-form-field>
   </mat-step>
-</mat-horizontal-stepper>
+</mat-stepper>
 

src/material/input/input.spec.ts

@@ -2245,15 +2245,15 @@ class AutosizeTextareaInATab {}
 
 @Component({
   template: `
-    <mat-horizontal-stepper>
+    <mat-stepper>
       <mat-step label="Step 1">
         <mat-form-field>
           <textarea matInput matTextareaAautosize>
             Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
           </textarea>
         </mat-form-field>
       </mat-step>
-    </mat-horizontal-stepper>
+    </mat-stepper>
   `
 })
 class AutosizeTextareaInAStep {}

src/material/stepper/stepper.e2e.spec.ts

@@ -5,7 +5,7 @@ describe('stepper', () => {
   beforeEach(async () => await browser.get('/stepper'));
 
   it('should render a stepper', async () => {
-    await expectToExist('mat-horizontal-stepper');
+    await expectToExist('mat-stepper');
   });
 
   describe('basic behavior', () => {

src/material/stepper/stepper.md

@@ -5,17 +5,13 @@ that drives a stepped workflow. Material stepper extends the CDK stepper and has
 styling.
 
 ### Stepper variants
-There are two stepper components: `mat-horizontal-stepper` and `mat-vertical-stepper`. They
-can be used the same way. The only difference is the orientation of stepper.
+There are two stepper variants: `horizontal` and `vertical`. You can switch between the two using
+the `orientation` attribute.
 
 <!-- example(stepper-overview) -->
 
 <!-- example(stepper-vertical) -->
 
-`mat-horizontal-stepper` selector can be used to create a horizontal stepper, and
-`mat-vertical-stepper` can be used to create a vertical stepper. `mat-step` components need to be
-placed inside either one of the two stepper components.
-
 ### Labels
 If a step's label is only text, then the `label` attribute can be used.
 <!-- example({"example": "stepper-overview",
@@ -29,7 +25,7 @@ For more complex labels, add a template with the `matStepLabel` directive inside
               "region": "step-label"}) -->
 
 #### Label position
-For `mat-horizontal-stepper` it's possible to define the position of the label. `end` is the
+For a horizontal `mat-stepper` it's possible to define the position of the label. `end` is the
 default value, while `bottom` will place it under the step icon instead of at its side.
 This behaviour is controlled by `labelPosition` property.
 
@@ -45,10 +41,10 @@ There are two button directives to support navigation between different steps:
               "region": "buttons"}) -->
 
 ### Linear stepper
-The `linear` attribute can be set on `mat-horizontal-stepper` and `mat-vertical-stepper` to create
-a linear stepper that requires the user to complete previous steps before proceeding to following
-steps. For each `mat-step`, the `stepControl` attribute can be set to the top level
-`AbstractControl` that is used to check the validity of the step.
+The `linear` attribute can be set on `mat-stepper` to create a linear stepper that requires the
+user to complete previous steps before proceeding to following steps. For each `mat-step`, the
+`stepControl` attribute can be set to the top level `AbstractControl` that is used to check the
+validity of the step.
 
 There are two possible approaches. One is using a single form for stepper, and the other is
 using a different form for each step.
@@ -64,7 +60,7 @@ are completed.
 
 ```html
 <form [formGroup]="formGroup">
-  <mat-horizontal-stepper formArrayName="formArray" linear>
+  <mat-stepper formArrayName="formArray" linear>
     <mat-step formGroupName="0" [stepControl]="formArray.get([0])">
       ...
       <div>
@@ -79,13 +75,13 @@ are completed.
       </div>
     </mat-step>
     ...
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </form>
 ```
 
 #### Using a different form for each step
 ```html
-<mat-vertical-stepper linear>
+<mat-stepper orientation="vertical" linear>
   <mat-step [stepControl]="formGroup1">
     <form [formGroup]="formGroup1">
       ...
@@ -96,7 +92,7 @@ are completed.
       ...
     </form>
   </mat-step>
-</mat-vertical-stepper>
+</mat-stepper>
 ```
 ### Types of steps