Changes to step-header based on review

angular · Aug 22, 2017 · 57c0751 · 57c0751
1 parent ec3993a
commit 57c0751
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 60 deletions.
diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss
@@ -7,14 +7,12 @@
   $background: map-get($theme, background);
   $primary: map-get($theme, primary);
 
-  .mat-stepper-header {
+  .mat-step-header {
     &:focus,
     &:hover {
       background-color: mat-color($background, hover);
     }
-  }
 
-  .mat-step-header {
     .mat-step-label-active {
       color: mat-color($foreground, text);
     }

diff --git a/src/lib/stepper/step-header.html b/src/lib/stepper/step-header.html
@@ -7,10 +7,10 @@
 <div [class.mat-step-label-active]="active"
      [class.mat-step-label-inactive]="!active">
   <!-- If there is a label template, use it. -->
-  <ng-container *ngIf="stepLabel" [ngTemplateOutlet]="stepLabel.template">
+  <ng-container *ngIf="_templateLabel" [ngTemplateOutlet]="label.template">
   </ng-container>
   <!-- It there is no label template, fall back to the text label. -->
-  <div class="mat-step-text-label" *ngIf="!stepLabel">{{label}}</div>
+  <div class="mat-step-text-label" *ngIf="_stringLabel">{{label}}</div>
 
   <div class="mat-step-optional" *ngIf="optional">Optional</div>
 </div>

diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss
@@ -4,6 +4,7 @@ $mat-stepper-side-gap: 24px !default;
 $mat-vertical-stepper-content-margin: 36px !default;
 $mat-stepper-line-gap: 8px !default;
 $mat-step-optional-font-size: 12px;
+$mat-step-header-icon-size: 16px !default;
 
 :host {
   display: flex;
@@ -18,9 +19,15 @@ $mat-step-optional-font-size: 12px;
   border-radius: 50%;
   height: $mat-stepper-label-header-height;
   width: $mat-stepper-label-header-height;
-  text-align: center;
-  line-height: $mat-stepper-label-header-height;
-  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.mat-step-icon .mat-icon {
+  font-size: $mat-step-header-icon-size;
+  height: $mat-step-header-icon-size;
+  width: $mat-step-header-icon-size;
 }
 
 .mat-step-label-active,

diff --git a/src/lib/stepper/step-header.ts b/src/lib/stepper/step-header.ts
@@ -17,21 +17,10 @@ import {MdStepLabel} from './step-label';
   host: {
     'class': 'mat-step-header',
     'role': 'tab',
-    '[attr.id]': 'labelId',
-    '[attr.aria-controls]': 'contentId',
-    '[attr.aria-selected]': 'selected'
   },
   encapsulation: ViewEncapsulation.None
 })
 export class MdStepHeader {
-  /** Unique label ID of step header. */
-  @Input()
-  labelId: string;
-
-  /** Unique content ID of step content. */
-  @Input()
-  contentId: string;
-
   /** Icon for the given step. */
   @Input()
   icon: string;
@@ -42,15 +31,7 @@ export class MdStepHeader {
   set label(value: any) {
     this._label = value;
   }
-  private _label: string;
-
-  /** Templated label of the given step. */
-  @Input()
-  get stepLabel() { return this._stepLabel; }
-  set stepLabel(value: any) {
-    this._stepLabel = value;
-  }
-  private _stepLabel: MdStepLabel;
+  private _label: MdStepLabel | string;
 
   /** Index of the given step. */
   @Input()
@@ -83,4 +64,14 @@ export class MdStepHeader {
     this._optional = coerceBooleanProperty(value);
   }
   private _optional: boolean;
+
+  /** Returns string label of given step if it is a text label. */
+  get _stringLabel(): string | null {
+    return this.label instanceof MdStepLabel ? null : this.label;
+  }
+
+  /** Returns MdStepLabel if the label of given step is a template label. */
+  get _templateLabel(): MdStepLabel | null {
+    return this.label instanceof MdStepLabel ? this.label : null;
+  }
 }
diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
@@ -1,19 +1,19 @@
 <div class="mat-horizontal-stepper-header-container">
   <ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
-    <div class="mat-stepper-header" #stepperHeader (click)="step.select()"
-         (keydown)="_onKeydown($event)" [tabIndex]="_focusIndex == i ? 0 : -1">
-      <md-step-header  class="mat-horizontal-stepper-header"
-                       [labelId]="_getStepLabelId(i)"
-                       [contentId]="_getStepContentId(i)"
-                       [index]="i"
-                       [icon]="_getIndicatorType(i)"
-                       [stepLabel]="step.stepLabel"
-                       [label]="step.label"
-                       [selected]="selectedIndex == i"
-                       [active]="step.completed || selectedIndex == i"
-                       [optional]="step.optional">
-      </md-step-header>
-    </div>
+    <md-step-header  class="mat-horizontal-stepper-header"
+                     (click)="step.select()"
+                     (keydown)="_onKeydown($event)"
+                     [tabIndex]="_focusIndex == i ? 0 : -1"
+                     [id]="_getStepLabelId(i)"
+                     [attr.aria-controls]="_getStepContentId(i)"
+                     [attr.aria-selected]="selectedIndex == i"
+                     [index]="i"
+                     [icon]="_getIndicatorType(i)"
+                     [label]="step.stepLabel ? step.stepLabel : step.label"
+                     [selected]="selectedIndex == i"
+                     [active]="step.completed || selectedIndex == i"
+                     [optional]="step.optional">
+    </md-step-header>
     <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
   </ng-container>
 </div>

diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
@@ -1,18 +1,18 @@
 <div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
-  <div class="mat-stepper-header" #stepperHeader (click)="step.select()"
-       (keydown)="_onKeydown($event)" [tabIndex]="_focusIndex == i ? 0 : -1">
-    <md-step-header  class="mat-vertical-stepper-header"
-                     [labelId]="_getStepLabelId(i)"
-                     [contentId]="_getStepContentId(i)"
-                     [index]="i"
-                     [icon]="_getIndicatorType(i)"
-                     [stepLabel]="step.stepLabel"
-                     [label]="step.label"
-                     [selected]="selectedIndex == i"
-                     [active]="step.completed || selectedIndex == i"
-                     [optional]="step.optional">
-    </md-step-header>
-  </div>
+  <md-step-header  class="mat-vertical-stepper-header"
+                   (click)="step.select()"
+                   (keydown)="_onKeydown($event)"
+                   [tabIndex]="_focusIndex == i ? 0 : -1"
+                   [id]="_getStepLabelId(i)"
+                   [attr.aria-controls]="_getStepContentId(i)"
+                   [attr.aria-selected]="selectedIndex == i"
+                   [index]="i"
+                   [icon]="_getIndicatorType(i)"
+                   [label]="step.stepLabel ? step.stepLabel : step.label"
+                   [selected]="selectedIndex == i"
+                   [active]="step.completed || selectedIndex == i"
+                   [optional]="step.optional">
+  </md-step-header>
 
   <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
     <div class="mat-vertical-stepper-content" role="tabpanel"

diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
@@ -11,7 +11,7 @@ $mat-stepper-line-gap: 8px !default;
   display: block;
 }
 
-.mat-stepper-header {
+.mat-step-header {
   overflow: hidden;
   outline: none;
 }

diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts
@@ -449,7 +449,7 @@ function assertCorrectKeyboardInteraction(stepperComponent: MdStepper,
 function assertStepHeaderFocusNotCalled(stepperComponent: MdStepper,
                                         fixture: ComponentFixture<any>) {
   let stepHeaderEl = fixture.debugElement
-      .queryAll(By.css('.mat-stepper-header'))[1].nativeElement;
+      .queryAll(By.css('md-step-header'))[1].nativeElement;
   let nextButtonNativeEl = fixture.debugElement
       .queryAll(By.directive(MdStepperNext))[0].nativeElement;
   spyOn(stepHeaderEl, 'focus');
@@ -491,7 +491,7 @@ function assertLinearStepperValidity(stepHeaderEl: HTMLElement,
 /** Asserts that step header focus is blurred if the step cannot be selected upon header click. */
 function assertStepHeaderBlurred(fixture: ComponentFixture<any>) {
   let stepHeaderEl = fixture.debugElement
-      .queryAll(By.css('.mat-stepper-header'))[1].nativeElement;
+      .queryAll(By.css('md-step-header'))[1].nativeElement;
   spyOn(stepHeaderEl, 'blur');
   stepHeaderEl.click();
   fixture.detectChanges();

diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts
@@ -29,6 +29,7 @@ import {
   ErrorStateMatcher
 } from '../core/error/error-options';
 import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
+import {MdStepHeader} from './step-header';
 
 @Component({
   moduleId: module.id,
@@ -67,7 +68,7 @@ export class MdStep extends CdkStep implements ErrorOptions {
 
 export class MdStepper extends CdkStepper implements ErrorOptions {
   /** The list of step headers of the steps in the stepper. */
-  @ViewChildren('stepperHeader') _stepHeader: QueryList<ElementRef>;
+  @ViewChildren(MdStepHeader, {read: ElementRef}) _stepHeader: QueryList<ElementRef>;
 
   /** Steps that the stepper holds. */
   @ContentChildren(MdStep) _steps: QueryList<MdStep>;