Skip to content
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.

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

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

Merged
merged 9 commits into from
Aug 22, 2017
10 changes: 8 additions & 2 deletions src/cdk/stepper/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,20 @@ import {CdkStepper, CdkStep} from './stepper';
import {CommonModule} from '@angular/common';
import {CdkStepLabel} from './step-label';
import {CdkStepperNext, CdkStepperPrevious} from './stepper-button';
import {CdkStepIcon} from './step-icon';
import {CdkStepLabelContainer} from './step-label-container';

@NgModule({
imports: [CommonModule],
exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious, CdkStepIcon,
CdkStepLabelContainer],
declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious, CdkStepIcon,
CdkStepLabelContainer]
})
export class CdkStepperModule {}

export * from './stepper';
export * from './step-label';
export * from './stepper-button';
export * from './step-icon';
export * from './step-label-container';
41 changes: 41 additions & 0 deletions src/cdk/stepper/step-icon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

import {Directive, Input} from '@angular/core';
import {CdkStep} from './stepper';

@Directive({
selector: 'cdkStepIcon'
})
export class CdkStepIcon {
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think this needs a cdk version, the icon is a material design specific piece of UI

/** Step of the icon to be displayed. */
@Input()
step: CdkStep;

/** Whether the step of the icon to be displayed is active. */
@Input()
selected: boolean;

/** Index of the step. */
@Input()
index: number;

/** Whether the user has touched the step that is not selected. */
get notTouched() {
return this._getIndicatorType() == 'number' && !this.selected;
}

/** Returns the type of icon to be displayed. */
_getIndicatorType(): 'number' | 'edit' | 'done' {
if (!this.step.completed || this.selected) {
return 'number';
} else {
return this.step.editable ? 'edit' : 'done';
}
}
}
28 changes: 28 additions & 0 deletions src/cdk/stepper/step-label-container.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

import {Directive, Input} from '@angular/core';
import {CdkStep} from './stepper';

@Directive({
selector: 'cdkStepLabelContainer'
})
export class CdkStepLabelContainer {
Copy link
Contributor

Choose a reason for hiding this comment

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

also don't see a need for a cdk version of this

/** Step of the label to be displayed. */
@Input()
step: CdkStep;

/** Whether the step of label to be displayed is selected. */
@Input()
selected: boolean;

/** Whether the label to be displayed is active. */
get active() {
return this.step.completed || this.selected;
}
}
32 changes: 31 additions & 1 deletion src/cdk/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,35 @@ 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. */
@Input()
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._customCompleted == null ? this._defaultCompleted : this._customCompleted;
}
set completed(value: any) {
this._customCompleted = coerceBooleanProperty(value);
}
private _customCompleted: boolean | null = null;

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

constructor(private _stepper: CdkStepper) { }

/** Selects this step component. */
Expand Down Expand Up @@ -109,6 +138,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 +241,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

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
21 changes: 7 additions & 14 deletions src/demo-app/stepper/stepper-demo.html
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>
<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 @@ -62,7 +62,7 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
</form>
</md-step>

<md-step [stepControl]="phoneFormGroup">
<md-step [stepControl]="phoneFormGroup" optional>
<form [formGroup]="phoneFormGroup">
<ng-template mdStepLabel>Fill out your phone number</ng-template>
<md-form-field>
Expand All @@ -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
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
11 changes: 8 additions & 3 deletions src/lib/stepper/_stepper-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,16 @@
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-step-icon {
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
}
Expand All @@ -28,7 +33,7 @@
color: mat-color($foreground, disabled-text);
}

.mat-stepper-index {
.mat-step-icon-not-touched {
background-color: mat-color($foreground, disabled-text);
}
}
Expand Down
18 changes: 15 additions & 3 deletions src/lib/stepper/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,23 @@ 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';
import {MdStepIcon} from './step-icon';
import {MdStepLabelContainer} from './step-label-container';

@NgModule({
imports: [MdCommonModule, CommonModule, PortalModule, MdButtonModule, CdkStepperModule],
imports: [
MdCommonModule,
CommonModule,
PortalModule,
MdButtonModule,
CdkStepperModule,
MdIconModule
],
exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
MdStepperNext, MdStepperPrevious],
MdStepperNext, MdStepperPrevious, MdStepIcon, MdStepLabelContainer],
declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
MdStepperNext, MdStepperPrevious],
MdStepperNext, MdStepperPrevious, MdStepIcon, MdStepLabelContainer],
})
export class MdStepperModule {}

Expand All @@ -32,3 +42,5 @@ export * from './stepper-vertical';
export * from './step-label';
export * from './stepper';
export * from './stepper-button';
export * from './step-icon';
export * from './step-label-container';
5 changes: 5 additions & 0 deletions src/lib/stepper/step-icon.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div [ngSwitch]="_getIndicatorType()">
<span *ngSwitchCase="'number'">{{index + 1}}</span>
<md-icon *ngSwitchCase="'edit'">create</md-icon>
<md-icon *ngSwitchCase="'done'">done</md-icon>
</div>
Loading