Skip to content

Commit c8a71f4

Browse files
jwshinjwshinjwshinjwshin
committed
Changes to step-header based on review
1 parent ec3993a commit c8a71f4

File tree

9 files changed

+60
-62
lines changed

9 files changed

+60
-62
lines changed

‎src/lib/stepper/_stepper-theme.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@
77
$background: map-get($theme, background);
88
$primary: map-get($theme, primary);
99

10-
.mat-stepper-header {
10+
.mat-step-header {
1111
&:focus,
1212
&:hover {
1313
background-color: mat-color($background, hover);
1414
}
15-
}
1615

17-
.mat-step-header {
1816
.mat-step-label-active {
1917
color: mat-color($foreground, text);
2018
}

‎src/lib/stepper/step-header.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<div [class.mat-step-label-active]="active"
88
[class.mat-step-label-inactive]="!active">
99
<!-- If there is a label template, use it. -->
10-
<ng-container *ngIf="stepLabel" [ngTemplateOutlet]="stepLabel.template">
10+
<ng-container *ngIf="_templateLabel" [ngTemplateOutlet]="label.template">
1111
</ng-container>
1212
<!-- It there is no label template, fall back to the text label. -->
13-
<div class="mat-step-text-label" *ngIf="!stepLabel">{{label}}</div>
13+
<div class="mat-step-text-label" *ngIf="_stringLabel">{{label}}</div>
1414

1515
<div class="mat-step-optional" *ngIf="optional">Optional</div>
1616
</div>

‎src/lib/stepper/step-header.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ $mat-stepper-side-gap: 24px !default;
44
$mat-vertical-stepper-content-margin: 36px !default;
55
$mat-stepper-line-gap: 8px !default;
66
$mat-step-optional-font-size: 12px;
7+
$mat-step-header-icon-size: 16px !default;
78

89
:host {
910
display: flex;
@@ -18,9 +19,15 @@ $mat-step-optional-font-size: 12px;
1819
border-radius: 50%;
1920
height: $mat-stepper-label-header-height;
2021
width: $mat-stepper-label-header-height;
21-
text-align: center;
22-
line-height: $mat-stepper-label-header-height;
23-
display: inline-block;
22+
align-items: center;
23+
justify-content: center;
24+
display: flex;
25+
}
26+
27+
.mat-step-icon .mat-icon {
28+
font-size: $mat-step-header-icon-size;
29+
height: $mat-step-header-icon-size;
30+
width: $mat-step-header-icon-size;
2431
}
2532

2633
.mat-step-label-active,

‎src/lib/stepper/step-header.ts‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,40 +17,21 @@ import {MdStepLabel} from './step-label';
1717
host: {
1818
'class': 'mat-step-header',
1919
'role': 'tab',
20-
'[attr.id]': 'labelId',
21-
'[attr.aria-controls]': 'contentId',
22-
'[attr.aria-selected]': 'selected'
2320
},
2421
encapsulation: ViewEncapsulation.None
2522
})
2623
export class MdStepHeader {
27-
/** Unique label ID of step header. */
28-
@Input()
29-
labelId: string;
30-
31-
/** Unique content ID of step content. */
32-
@Input()
33-
contentId: string;
34-
3524
/** Icon for the given step. */
3625
@Input()
3726
icon: string;
3827

39-
/** Text label of the given step. */
28+
/** Label of the given step. */
4029
@Input()
4130
get label() { return this._label; }
4231
set label(value: any) {
4332
this._label = value;
4433
}
45-
private _label: string;
46-
47-
/** Templated label of the given step. */
48-
@Input()
49-
get stepLabel() { return this._stepLabel; }
50-
set stepLabel(value: any) {
51-
this._stepLabel = value;
52-
}
53-
private _stepLabel: MdStepLabel;
34+
private _label: MdStepLabel | string;
5435

5536
/** Index of the given step. */
5637
@Input()
@@ -83,4 +64,14 @@ export class MdStepHeader {
8364
this._optional = coerceBooleanProperty(value);
8465
}
8566
private _optional: boolean;
67+
68+
/** Returns string label of given step if it is a text label. */
69+
get _stringLabel(): string | null {
70+
return this.label instanceof MdStepLabel ? null : this.label;
71+
}
72+
73+
/** Returns MdStepLabel if the label of given step is a template label. */
74+
get _templateLabel(): MdStepLabel | null {
75+
return this.label instanceof MdStepLabel ? this.label : null;
76+
}
8677
}

‎src/lib/stepper/stepper-horizontal.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<div class="mat-horizontal-stepper-header-container">
22
<ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
3-
<div class="mat-stepper-header" #stepperHeader (click)="step.select()"
4-
(keydown)="_onKeydown($event)" [tabIndex]="_focusIndex == i ? 0 : -1">
5-
<md-step-header class="mat-horizontal-stepper-header"
6-
[labelId]="_getStepLabelId(i)"
7-
[contentId]="_getStepContentId(i)"
8-
[index]="i"
9-
[icon]="_getIndicatorType(i)"
10-
[stepLabel]="step.stepLabel"
11-
[label]="step.label"
12-
[selected]="selectedIndex == i"
13-
[active]="step.completed || selectedIndex == i"
14-
[optional]="step.optional">
15-
</md-step-header>
16-
</div>
3+
<md-step-header class="mat-horizontal-stepper-header"
4+
(click)="step.select()"
5+
(keydown)="_onKeydown($event)"
6+
[tabIndex]="_focusIndex == i ? 0 : -1"
7+
[id]="_getStepLabelId(i)"
8+
[attr.aria-controls]="_getStepContentId(i)"
9+
[attr.aria-selected]="selectedIndex == i"
10+
[index]="i"
11+
[icon]="_getIndicatorType(i)"
12+
[label]="step.stepLabel ? step.stepLabel : step.label"
13+
[selected]="selectedIndex == i"
14+
[active]="step.completed || selectedIndex == i"
15+
[optional]="step.optional">
16+
</md-step-header>
1717
<div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
1818
</ng-container>
1919
</div>

‎src/lib/stepper/stepper-vertical.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
2-
<div class="mat-stepper-header" #stepperHeader (click)="step.select()"
3-
(keydown)="_onKeydown($event)" [tabIndex]="_focusIndex == i ? 0 : -1">
4-
<md-step-header class="mat-vertical-stepper-header"
5-
[labelId]="_getStepLabelId(i)"
6-
[contentId]="_getStepContentId(i)"
7-
[index]="i"
8-
[icon]="_getIndicatorType(i)"
9-
[stepLabel]="step.stepLabel"
10-
[label]="step.label"
11-
[selected]="selectedIndex == i"
12-
[active]="step.completed || selectedIndex == i"
13-
[optional]="step.optional">
14-
</md-step-header>
15-
</div>
2+
<md-step-header class="mat-vertical-stepper-header"
3+
(click)="step.select()"
4+
(keydown)="_onKeydown($event)"
5+
[tabIndex]="_focusIndex == i ? 0 : -1"
6+
[id]="_getStepLabelId(i)"
7+
[attr.aria-controls]="_getStepContentId(i)"
8+
[attr.aria-selected]="selectedIndex == i"
9+
[index]="i"
10+
[icon]="_getIndicatorType(i)"
11+
[label]="step.stepLabel ? step.stepLabel : step.label"
12+
[selected]="selectedIndex == i"
13+
[active]="step.completed || selectedIndex == i"
14+
[optional]="step.optional">
15+
</md-step-header>
1616

1717
<div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
1818
<div class="mat-vertical-stepper-content" role="tabpanel"

‎src/lib/stepper/stepper.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $mat-stepper-line-gap: 8px !default;
1111
display: block;
1212
}
1313

14-
.mat-stepper-header {
14+
.mat-step-header {
1515
overflow: hidden;
1616
outline: none;
1717
}

‎src/lib/stepper/stepper.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -449,7 +449,7 @@ function assertCorrectKeyboardInteraction(stepperComponent: MdStepper,
449449
function assertStepHeaderFocusNotCalled(stepperComponent: MdStepper,
450450
fixture: ComponentFixture<any>) {
451451
let stepHeaderEl = fixture.debugElement
452-
.queryAll(By.css('.mat-stepper-header'))[1].nativeElement;
452+
.queryAll(By.css('md-step-header'))[1].nativeElement;
453453
let nextButtonNativeEl = fixture.debugElement
454454
.queryAll(By.directive(MdStepperNext))[0].nativeElement;
455455
spyOn(stepHeaderEl, 'focus');
@@ -491,7 +491,7 @@ function assertLinearStepperValidity(stepHeaderEl: HTMLElement,
491491
/** Asserts that step header focus is blurred if the step cannot be selected upon header click. */
492492
function assertStepHeaderBlurred(fixture: ComponentFixture<any>) {
493493
let stepHeaderEl = fixture.debugElement
494-
.queryAll(By.css('.mat-stepper-header'))[1].nativeElement;
494+
.queryAll(By.css('md-step-header'))[1].nativeElement;
495495
spyOn(stepHeaderEl, 'blur');
496496
stepHeaderEl.click();
497497
fixture.detectChanges();

‎src/lib/stepper/stepper.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import {
1919
Optional,
2020
QueryList,
2121
SkipSelf,
22-
ViewChildren, ViewEncapsulation
22+
ViewChildren,
23+
ViewEncapsulation
2324
} from '@angular/core';
2425
import {MdStepLabel} from './step-label';
2526
import {
@@ -29,6 +30,7 @@ import {
2930
ErrorStateMatcher
3031
} from '../core/error/error-options';
3132
import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
33+
import {MdStepHeader} from './step-header';
3234

3335
@Component({
3436
moduleId: module.id,
@@ -67,7 +69,7 @@ export class MdStep extends CdkStep implements ErrorOptions {
6769

6870
export class MdStepper extends CdkStepper implements ErrorOptions {
6971
/** The list of step headers of the steps in the stepper. */
70-
@ViewChildren('stepperHeader') _stepHeader: QueryList<ElementRef>;
72+
@ViewChildren(MdStepHeader, {read: ElementRef}) _stepHeader: QueryList<ElementRef>;
7173

7274
/** Steps that the stepper holds. */
7375
@ContentChildren(MdStep) _steps: QueryList<MdStep>;

0 commit comments

Comments
 (0)