Skip to content

feat(stepper): Support additional properties for step #6509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Aug 22, 2017
Merged

feat(stepper): Support additional properties for step #6509

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
af7d725
Additional properties for step
jwshinjwshin Aug 16, 2017
1bd2486
Unit tests
jwshinjwshin Aug 16, 2017
81eee36
Merge branch 'stepper' of github.com:angular/material2 into steps1
jwshinjwshin Aug 16, 2017
edd0a03
Code changes based on review + test name changes
jwshinjwshin Aug 17, 2017
b214f70
Refactor code for shared functionality between vertical and horizonta…
jwshinjwshin Aug 18, 2017
a1f1977
Refactor md-step-header and md-step-content + optional step change
jwshinjwshin Aug 21, 2017
ec3993a
Simplify code based on review
jwshinjwshin Aug 22, 2017
c8a71f4
Changes to step-header based on review
jwshinjwshin Aug 22, 2017
1a5af09
Minor changes
jwshinjwshin Aug 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion src/cdk/stepper/stepper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,26 @@ export class CdkStep {
@Input()
label: string;

@Input()
get editable() { return this._editable; }
set editable(value: any) {
this._editable = coerceBooleanProperty(value);
}
private _editable = true;

/** Whether the completion of step is optional or not. */
@Input()
get optional() { return this._optional; }
set optional(value: any) {
this._optional = coerceBooleanProperty(value);
}
private _optional = false;

/** Return whether step is completed or not. */
get completed() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I wonder if this is something we want to give the user control of by making it an @Input()?

@jelbourn WDYT of something like this:

@Input()
get completed() {
  return this._customCompleted == null ? this._defaultCompleted : this._customCompleted;
}
set completed(value) {
  this._customCompleted = value == null ? null : coerceBooleanProperty(value);
}
private _customCompleted: boolean | null = null;

private get _defaultCompleted() {
  return this._stepControl ? this._stepControl.valid && this.interacted : this.interacted;
}

This way most users could use the default completeness behavior, but they could still override if they want

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems reasonable, though _defaultCompleted would be a function

return this._stepControl ? this._stepControl.valid && this.interacted : this.interacted;
}

constructor(private _stepper: CdkStepper) { }

/** Selects this step component. */
Expand Down Expand Up @@ -109,6 +129,7 @@ export class CdkStepper {
@Input()
get selectedIndex() { return this._selectedIndex; }
set selectedIndex(index: number) {
if (index < this._selectedIndex && !this._steps.toArray()[index].editable) { return; }
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();
Expand Down Expand Up @@ -211,7 +232,7 @@ export class CdkStepper {
const stepsArray = this._steps.toArray();
stepsArray[this._selectedIndex].interacted = true;
if (this._linear) {
return stepsArray.slice(0, index).some(step => step.stepControl.invalid);
return stepsArray.slice(0, index).some(step => step.stepControl.invalid && !step.optional);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense if you're thinking about the step being invalid due to a required field not being filled out, but it makes less sense if you consider invalid for other reasons (e.g. entering "1234" as your email).

Need to think more about what the right behavior for optional is...

Copy link
Author

@g1shin g1shin Aug 17, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mmalerba Do you mean that if the step is optional but the field is invalid due to some other reason, the user shouldn't be able to move on? If it is optional, shouldn't the user be able to move on even if the input is not valid? The field will still fire an error, so the user will still be aware that the input is invalid as they move on.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if its optional they should be able to skip it, not enter invalid input

}
return false;
}
Expand Down
19 changes: 6 additions & 13 deletions src/demo-app/stepper/stepper-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
</div>
</md-step>

<md-step formGroupName="1" [stepControl]="formArray.get([1])">
<md-step formGroupName="1" [stepControl]="formArray.get([1])" [optional]="true">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can just do optional="true"

also, can you add a optional horizontal step

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or just optional with no expression

<ng-template mdStepLabel>
<div>Fill out your phone number</div>
</ng-template>
<md-input-container>
<input mdInput placeholder="Phone number" formControlName="phoneFormCtrl">
<input mdInput placeholder="Phone number" formControlName="phoneFormCtrl" required>
<md-error>This field is required</md-error>
</md-input-container>
<div>
Expand Down Expand Up @@ -88,44 +88,41 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
</md-horizontal-stepper>

<h3>Vertical Stepper Demo</h3>
<md-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</md-checkbox>
<md-vertical-stepper>
<md-step>
<md-step [editable]="!isNonEditable">
<ng-template mdStepLabel>Fill out your name</ng-template>
<md-form-field>
<input mdInput placeholder="First Name">
<md-error>This field is required</md-error>
</md-form-field>

<md-form-field>
<input mdInput placeholder="Last Name">
<md-error>This field is required</md-error>
</md-form-field>
<div>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<md-step [editable]="!isNonEditable">
<ng-template mdStepLabel>
<div>Fill out your phone number</div>
</ng-template>
<md-form-field>
<input mdInput placeholder="Phone number">
<md-error>This field is required</md-error>
</md-form-field>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<md-step [editable]="!isNonEditable">
<ng-template mdStepLabel>
<div>Fill out your address</div>
</ng-template>
<md-form-field>
<input mdInput placeholder="Address">
<md-error>This field is required</md-error>
</md-form-field>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
Expand All @@ -148,12 +145,10 @@ <h3>Horizontal Stepper Demo</h3>
<ng-template mdStepLabel>Fill out your name</ng-template>
<md-form-field>
<input mdInput placeholder="First Name">
<md-error>This field is required</md-error>
</md-form-field>

<md-form-field>
<input mdInput placeholder="Last Name">
<md-error>This field is required</md-error>
</md-form-field>
<div>
<button md-button mdStepperNext type="button">Next</button>
Expand All @@ -166,7 +161,6 @@ <h3>Horizontal Stepper Demo</h3>
</ng-template>
<md-form-field>
<input mdInput placeholder="Phone number">
<md-error>This field is required</md-error>
</md-form-field>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
Expand All @@ -180,7 +174,6 @@ <h3>Horizontal Stepper Demo</h3>
</ng-template>
<md-form-field>
<input mdInput placeholder="Address">
<md-error>This field is required</md-error>
</md-form-field>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
Expand Down
3 changes: 2 additions & 1 deletion src/demo-app/stepper/stepper-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
export class StepperDemo {
formGroup: FormGroup;
isNonLinear = false;
isNonEditable = false;

nameFormGroup: FormGroup;
phoneFormGroup: FormGroup;
Expand All @@ -34,7 +35,7 @@ export class StepperDemo {
lastNameFormCtrl: ['', Validators.required],
}),
this._formBuilder.group({
phoneFormCtrl: [''],
phoneFormCtrl: ['', Validators.required],
})
])
});
Expand Down
12 changes: 9 additions & 3 deletions src/lib/stepper/_stepper-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,17 @@
background-color: mat-color($background, hover);
}

.mat-stepper-label {
.mat-stepper-label-active {
color: mat-color($foreground, text);
}

.mat-stepper-index {
.mat-stepper-label-inactive,
.mat-step-optional {
color: mat-color($foreground, disabled-text);
}

.mat-stepper-index-interacted,
.mat-stepper-index-new {
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
}
Expand All @@ -28,7 +34,7 @@
color: mat-color($foreground, disabled-text);
}

.mat-stepper-index {
.mat-stepper-index-new {
background-color: mat-color($foreground, disabled-text);
}
}
Expand Down
10 changes: 9 additions & 1 deletion src/lib/stepper/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,17 @@ import {CdkStepperModule} from '@angular/cdk/stepper';
import {MdCommonModule} from '../core';
import {MdStepLabel} from './step-label';
import {MdStepperNext, MdStepperPrevious} from './stepper-button';
import {MdIconModule} from '../icon/index';

@NgModule({
imports: [MdCommonModule, CommonModule, PortalModule, MdButtonModule, CdkStepperModule],
imports: [
MdCommonModule,
CommonModule,
PortalModule,
MdButtonModule,
CdkStepperModule,
MdIconModule
],
exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
MdStepperNext, MdStepperPrevious],
declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
Expand Down
13 changes: 11 additions & 2 deletions src/lib/stepper/stepper-horizontal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,25 @@
[tabIndex]="_focusIndex == i ? 0 : -1"
(click)="step.select()"
(keydown)="_onKeydown($event)">
<div class="mat-stepper-index">
<div class="mat-stepper-index-new" *ngIf="!step.completed || selectedIndex == i">
{{i + 1}}
</div>
<div class="mat-stepper-index-interacted" *ngIf="step.completed && selectedIndex != i">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can simplify this a bit:

get _indicatorType(): 'number' | 'check' | 'edit' {...}
<div class="mat-step-indicator" [ngSwitch]="_indicatorType">
  <span *ngSwitchCase="number">{{i + 1}}</span>
  <md-icon *ngSwitchCase="check">done</md-icon>
  <md-icon *ngSwitchCase="edit">create</md-icon>
</div>

<md-icon *ngIf="!step.editable">done</md-icon>
<md-icon *ngIf="step.editable">create</md-icon>
</div>

<div class="mat-stepper-label">
<div [ngClass]="{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do these as separate [class.xxx] bindings

'mat-stepper-label-active': step.completed || selectedIndex == i,
'mat-stepper-label-inactive': !step.completed && selectedIndex != i
}">
<!-- If there is a label template, use it. -->
<ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
</ng-container>
<!-- It there is no label template, fall back to the text label. -->
<div *ngIf="!step.stepLabel">{{step.label}}</div>

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

Expand Down
15 changes: 12 additions & 3 deletions src/lib/stepper/stepper-vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,28 @@
[tabIndex]="_focusIndex == i ? 0 : -1"
(click)="step.select()"
(keydown)="_onKeydown($event)">
<div class="mat-stepper-index">
<div class="mat-stepper-index-new" *ngIf="!step.completed || selectedIndex == i">
{{i + 1}}
</div>
<div class="mat-stepper-index-interacted" *ngIf="step.completed && selectedIndex != i">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we share this icon group between stepper vertical and stepper horizontal?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kara Sorry, what do you mean by sharing the icon group? Do you mean like creating a separate icon group component with the template?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I meant an internal directive for the shared functionality. If they have a lot in common, would be easier to update together.

<md-icon *ngIf="!step.editable">done</md-icon>
<md-icon *ngIf="step.editable">create</md-icon>
</div>

<div class="mat-stepper-label">
<div [ngClass]="{
'mat-stepper-label-active': step.completed || selectedIndex == i,
'mat-stepper-label-inactive': !step.completed && selectedIndex != i
}">
<!-- If there is a label template, use it. -->
<ng-container *ngIf="step.stepLabel"[ngTemplateOutlet]="step.stepLabel.template">
</ng-container>
<!-- It there is no label template, fall back to the text label. -->
<div *ngIf="!step.stepLabel">{{step.label}}</div>
</div>

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

<div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
<div class="mat-vertical-stepper-content" role="tabpanel"
[@stepTransition]="_getAnimationDirection(i)"
Expand Down
27 changes: 19 additions & 8 deletions src/lib/stepper/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,31 @@ $mat-stepper-side-gap: 24px !default;
$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;
}

.mat-stepper-label {
display: inline-flex;
.mat-stepper-label-active,
.mat-stepper-label-inactive {
display: inline-block;
white-space: nowrap;
overflow: hidden;
// TODO(jwshin): text-overflow does not work as expected.
text-overflow: ellipsis;
min-width: $mat-stepper-label-min-width;
vertical-align: middle;
}

.mat-stepper-index {
.mat-stepper-index-new ,
.mat-stepper-index-interacted {
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;
}

.mat-horizontal-stepper-header-container {
Expand All @@ -36,16 +41,16 @@ $mat-stepper-line-gap: 8px !default;
}

.mat-horizontal-stepper-header {
display: inline-flex;
line-height: $mat-horizontal-stepper-header-height;
display: flex;
height: $mat-horizontal-stepper-header-height;
overflow: hidden;
align-items: center;
outline: none;
padding: 0 $mat-stepper-side-gap;

.mat-stepper-index {
.mat-stepper-index-new ,
.mat-stepper-index-interacted {
margin-right: $mat-stepper-line-gap;
display: inline-block;
flex: none;
}
}
Expand All @@ -55,12 +60,18 @@ $mat-stepper-line-gap: 8px !default;
align-items: center;
padding: $mat-stepper-side-gap;
outline: none;
max-height: $mat-stepper-label-header-height;

.mat-stepper-index {
.mat-stepper-index-new ,
.mat-stepper-index-interacted {
margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
}
}

.mat-step-optional {
font-size: $mat-step-optional-font-size;
}

.mat-stepper-horizontal-line {
border-top-width: $mat-stepper-line-width;
border-top-style: solid;
Expand Down
Loading