feat(stepper): Add background for focus and hover and fix focus logic

src/cdk/stepper/stepper.ts

@@ -109,9 +109,12 @@ export class CdkStepper {
   @Input()
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
-    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 {
       color: mat-color($foreground, text);
     }
@@ -33,11 +38,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

@@ -21,7 +21,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

@@ -19,7 +19,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,20 +1,15 @@
 @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-vertical-stepper-content-margin: 36px !default;
+$mat-stepper-line-width: 1px !default;
+$mat-stepper-line-gap: 8px !default;
 
 :host {
   display: block;
-  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
 }
 
 .mat-stepper-label {
@@ -28,10 +23,10 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 
 .mat-stepper-index {
   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;
 }
 
 .mat-horizontal-stepper-header-container {
@@ -46,9 +41,10 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   overflow: hidden;
   align-items: center;
   outline: none;
+  padding: 0 $mat-stepper-side-gap;
 
   .mat-stepper-index {
-    margin-right: $mat-connector-line-gap;
+    margin-right: $mat-stepper-line-gap;
     display: inline-block;
     flex: none;
   }
@@ -57,21 +53,21 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 .mat-vertical-stepper-header {
   display: flex;
   align-items: center;
-  margin: $mat-connector-line-gap 0;
+  padding: $mat-stepper-side-gap;
   outline: none;
 
   .mat-stepper-index {
-    margin-right: $mat-vertical-stepper-content-margin;
+    margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
   }
 }
 
-.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 {
@@ -84,35 +80,35 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 
 .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

@@ -75,6 +75,12 @@ describe('MdHorizontalStepper', () => {
       let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
       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);
+    });
   });
 
   describe('linear horizontal stepper', () => {
@@ -105,6 +111,12 @@ describe('MdHorizontalStepper', () => {
           .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement;
       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);
+    });
   });
 });
 
@@ -173,6 +185,12 @@ describe('MdVerticalStepper', () => {
       let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
       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);
+    });
   });
 
   describe('linear vertical stepper', () => {
@@ -204,6 +222,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);
+    });
   });
 });
 
@@ -387,6 +411,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:
@@ -412,6 +449,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();
+}
+
 @Component({
   template: `
     <md-horizontal-stepper>