Modifiy example

Author: jwshinjwshin

e2e/components/stepper-e2e.spec.ts

@@ -19,20 +19,23 @@ describe('stepper', () => {
       const previousButton = element.all(by.buttonText('Back'));
       const nextButton = element.all(by.buttonText('Next'));
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('1\nStep one');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
 
       screenshot('start');
       nextButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('2\nStep two');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('2\nFill out your address');
 
       await browser.wait(ExpectedConditions.not(
           ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
       screenshot('click next');
 
       previousButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('1\nStep one');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
 
       await browser.wait(ExpectedConditions.not(
           ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
@@ -74,7 +77,8 @@ describe('stepper', () => {
       let nextButton = element.all(by.buttonText('Next'));
       nextButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('1\nStep one');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
     });
   });
 });

src/lib/stepper/stepper.md

@@ -1,5 +1,7 @@
 Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.
 
+<!-- example(stepper-overview) -->
+
 Material stepper builds on the foundation of the CDK stepper that is responsible for the logic
 that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design
 styling.

src/material-examples/stepper-overview/stepper-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

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

@@ -2,22 +2,32 @@
 <md-horizontal-stepper [linear]="isLinear">
   <md-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
-      <ng-template mdStepLabel>Step one</ng-template>
-      Content of step one
-      <button md-button mdStepperNext>Next</button>
+      <ng-template mdStepLabel>Fill out your name</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperNext>Next</button>
+      </div>
     </form>
   </md-step>
   <md-step [stepControl]="secondFormGroup">
     <form [formGroup]="secondFormGroup">
-      <ng-template mdStepLabel>Step two</ng-template>
-      Content of step two
-      <button md-button mdStepperPrevious>Back</button>
-      <button md-button mdStepperNext>Next</button>
+      <ng-template mdStepLabel>Fill out your address</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Address" formControlName="secondCtrl" required>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperPrevious>Back</button>
+        <button md-button mdStepperNext>Next</button>
+      </div>
     </form>
   </md-step>
   <md-step>
-    <ng-template mdStepLabel>Step three</ng-template>
-    Content of step three
-    <button md-button mdStepperPrevious>Back</button>
+    <ng-template mdStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button md-button mdStepperPrevious>Back</button>
+    </div>
   </md-step>
 </md-horizontal-stepper>

src/material-examples/stepper-overview/stepper-overview-example.ts

@@ -7,6 +7,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 @Component({
   selector: 'stepper-overview-example',
   templateUrl: 'stepper-overview-example.html',
+  styleUrls: ['stepper-overview-example.css']
 })
 export class StepperOverviewExample {
   isLinear = false;