Merge branch 'stepper' of github.com:angular/material2 into steps1

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -130,9 +130,12 @@ export class CdkStepper {
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
     if (index < this._selectedIndex && !this._steps.toArray()[index].editable) { return; }
-    if (this._selectedIndex != index && !this._anyControlsInvalid(index)) {
+    if (this._anyControlsInvalid(index)) {
+      // remove focus from clicked step header if the step is not able to be selected
+      this._stepHeader.toArray()[index].nativeElement.blur();
+    } else if (this._selectedIndex != index) {
       this._emitStepperSelectionEvent(index);
-      this._focusStep(this._selectedIndex);
+      this._focusIndex = this._selectedIndex;
     }
   }
   private _selectedIndex: number = 0;

src/lib/stepper/_stepper-theme.scss

@@ -9,6 +9,11 @@
 
   .mat-horizontal-stepper-header, .mat-vertical-stepper-header {
 
+    &:focus,
+    &:hover {
+      background-color: mat-color($background, hover);
+    }
+
     .mat-stepper-label-active {
       color: mat-color($foreground, text);
     }
@@ -39,11 +44,11 @@
     background-color: mat-color($background, card);
   }
 
-  .mat-vertical-content-container {
+  .mat-stepper-vertical-line::before {
     border-left-color: mat-color($foreground, divider);
   }
 
-  .mat-connector-line {
+  .mat-stepper-horizontal-line {
     border-top-color: mat-color($foreground, divider);
   }
 }

src/lib/stepper/stepper-horizontal.html

@@ -30,7 +30,7 @@
       </div>
     </div>
 
-    <div *ngIf="!isLast" class="mat-connector-line"></div>
+    <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
   </ng-container>
 </div>
 <div class="mat-horizontal-content-container">

src/lib/stepper/stepper-vertical.html

@@ -28,7 +28,7 @@
     </div>
   </div>
 
-  <div class="mat-vertical-content-container">
+  <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
     <div class="mat-vertical-stepper-content" role="tabpanel"
          [@stepTransition]="_getAnimationDirection(i)"
          [id]="_getStepContentId(i)"

src/lib/stepper/stepper.scss

@@ -1,21 +1,16 @@
 @import '../core/style/variables';
 
 $mat-horizontal-stepper-header-height: 72px !default;
-$mat-label-header-height: 24px !default;
+$mat-stepper-label-header-height: 24px !default;
 $mat-stepper-label-min-width: 50px !default;
 $mat-stepper-side-gap: 24px !default;
-$mat-vertical-stepper-content-margin: 12px !default;
-$mat-vertical-content-padding-bottom: 32px !default;
-$mat-vertical-content-container-padding: 8px !default;
-$mat-connector-line-width: 1px !default;
-$mat-connector-line-gap: 8px !default;
-$mat-horizontal-connector-line-size: 5% !default;
-$mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-gap !default;
-$mat-step-optional-label-font-size: 12px;
+$mat-vertical-stepper-content-margin: 36px !default;
+$mat-stepper-line-width: 1px !default;
+$mat-stepper-line-gap: 8px !default;
+$mat-step-optional-font-size: 12px;
 
 :host {
   display: block;
-  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
 }
 
 .mat-stepper-label-active,
@@ -32,10 +27,10 @@ $mat-step-optional-label-font-size: 12px;
 .mat-stepper-index-new ,
 .mat-stepper-index-interacted {
   border-radius: 50%;
-  height: $mat-label-header-height;
-  width: $mat-label-header-height;
+  height: $mat-stepper-label-header-height;
+  width: $mat-stepper-label-header-height;
   text-align: center;
-  line-height: $mat-label-header-height;
+  line-height: $mat-stepper-label-header-height;
   display: inline-block;
 }
 
@@ -51,38 +46,39 @@ $mat-step-optional-label-font-size: 12px;
   overflow: hidden;
   align-items: center;
   outline: none;
+  padding: 0 $mat-stepper-side-gap;
 
   .mat-stepper-index-new ,
   .mat-stepper-index-interacted {
-    margin-right: $mat-connector-line-gap;
+    margin-right: $mat-stepper-line-gap;
     flex: none;
   }
 }
 
 .mat-vertical-stepper-header {
   display: flex;
   align-items: center;
-  margin: $mat-connector-line-gap 0;
+  padding: $mat-stepper-side-gap;
   outline: none;
-  max-height: $mat-label-header-height;
+  max-height: $mat-stepper-label-header-height;
 
   .mat-stepper-index-new ,
   .mat-stepper-index-interacted {
-    margin-right: $mat-vertical-stepper-content-margin;
+    margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
   }
 }
 
 .mat-step-optional {
-  font-size: $mat-step-optional-label-font-size;
+  font-size: $mat-step-optional-font-size;
 }
 
-.mat-connector-line {
-  border-top-width: $mat-connector-line-width;
+.mat-stepper-horizontal-line {
+  border-top-width: $mat-stepper-line-width;
   border-top-style: solid;
-  width: $mat-horizontal-connector-line-size;
   flex: auto;
-  margin: 0 $mat-connector-line-gap;
   height: 0;
+  margin: 0 $mat-stepper-line-gap - $mat-stepper-side-gap;
+  min-width: $mat-stepper-line-gap + $mat-stepper-side-gap;
 }
 
 .mat-horizontal-stepper-content {
@@ -95,35 +91,35 @@ $mat-step-optional-label-font-size: 12px;
 
 .mat-horizontal-content-container {
   overflow: hidden;
+  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
 }
 
 .mat-vertical-content-container {
-  border-left-width: $mat-connector-line-width;
-  border-left-style: solid;
   margin-left: $mat-vertical-stepper-content-margin;
-  padding: $mat-vertical-content-container-padding 0;
+  border: 0;
+  position: relative;
+}
+
+.mat-stepper-vertical-line::before {
+  content: '';
+  position: absolute;
+  top: $mat-stepper-line-gap - $mat-stepper-side-gap;
+  bottom: $mat-stepper-line-gap - $mat-stepper-side-gap;
+  left: 0;
+  border-left-width: $mat-stepper-line-width;
+  border-left-style: solid;
 }
 
 .mat-vertical-stepper-content {
-  padding-left: $mat-stepper-side-gap;
   overflow: hidden;
 }
 
 .mat-vertical-content {
-  padding-bottom: $mat-vertical-content-padding-bottom;
+  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
 }
 
-.mat-step {
-  margin-top: $mat-connector-line-gap;
-
-  &:last-child {
-    .mat-vertical-content-container {
-      border: none;
-    }
-  }
-
-  &:first-child {
-    margin-top: 0;
-    padding-top: $mat-vertical-stepper-margin-top;
+.mat-step:last-child {
+  .mat-vertical-content-container {
+    border: none;
   }
 }

src/lib/stepper/stepper.spec.ts

@@ -76,6 +76,12 @@ describe('MdHorizontalStepper', () => {
       checkKeyboardEvent(stepperComponent, fixture, stepHeaders);
     });
 
+    it('should not set focus on header of selected step if header is not clicked', () => {
+      let stepHeaderEl = fixture.debugElement
+          .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement;
+      checkStepHeaderFocusNotCalled(stepHeaderEl, stepperComponent, fixture);
+    });
+
     it('should only be able to return to a previous step if it is editable', () => {
       checkEditableStep(stepperComponent, fixture);
     });
@@ -116,6 +122,12 @@ describe('MdHorizontalStepper', () => {
       checkLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture);
     });
 
+    it('should not focus step header upon click if it is not able to be selected', () => {
+      let stepHeaderEl = fixture.debugElement
+          .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement;
+      checkStepHeaderBlur(stepHeaderEl, fixture);
+    });
+
     it('should be able to move to next step even when invalid if current step is optional', () => {
       checkOptionalStep(stepperComponent, testComponent, fixture);
     });
@@ -188,6 +200,12 @@ describe('MdVerticalStepper', () => {
       checkKeyboardEvent(stepperComponent, fixture, stepHeaders);
     });
 
+    it('should not set focus on header of selected step if header is not clicked', () => {
+      let stepHeaderEl = fixture.debugElement
+          .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement;
+      checkStepHeaderFocusNotCalled(stepHeaderEl, stepperComponent, fixture);
+    });
+
     it('should only be able to return to a previous step if it is editable', () => {
       checkEditableStep(stepperComponent, fixture);
     });
@@ -229,6 +247,12 @@ describe('MdVerticalStepper', () => {
       checkLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture);
     });
 
+    it('should not focus step header upon click if it is not able to be selected', () => {
+      let stepHeaderEl = fixture.debugElement
+          .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement;
+      checkStepHeaderBlur(stepHeaderEl, fixture);
+    });
+
     it('should be able to move to next step even when invalid if current step is optional', () => {
       checkOptionalStep(stepperComponent, testComponent, fixture);
     });
@@ -415,6 +439,19 @@ function checkKeyboardEvent(stepperComponent: MdStepper,
           'Expected index of selected step to change to index of focused step after SPACE event.');
 }
 
+function checkStepHeaderFocusNotCalled(stepHeaderEl: HTMLElement,
+                                       stepperComponent: MdStepper,
+                                       fixture: ComponentFixture<any>) {
+  let nextButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperNext))[0].nativeElement;
+  spyOn(stepHeaderEl, 'focus');
+  nextButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(1);
+  expect(stepHeaderEl.focus).not.toHaveBeenCalled();
+}
+
 function checkLinearStepperValidity(stepHeaderEl: HTMLElement,
                                     stepperComponent: MdStepper,
                                     testComponent:
@@ -440,6 +477,14 @@ function checkLinearStepperValidity(stepHeaderEl: HTMLElement,
   expect(stepperComponent.selectedIndex).toBe(1);
 }
 
+function checkStepHeaderBlur(stepHeaderEl: HTMLElement, fixture: ComponentFixture<any>) {
+  spyOn(stepHeaderEl, 'blur');
+  stepHeaderEl.click();
+  fixture.detectChanges();
+
+  expect(stepHeaderEl.blur).toHaveBeenCalled();
+}
+
 function checkEditableStep(stepperComponent: MdStepper,
                            fixture: ComponentFixture<any>) {
   stepperComponent.selectedIndex = 1;