-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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): Add support for linear stepper #6116
Conversation
src/cdk/stepper/stepper-button.ts
Outdated
host: {'(click)': '_stepper.next()'} | ||
host: { | ||
'(click)': '_stepper.next()', | ||
'type': 'button' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure about this, depending on how they've set up their forms they might want this button to trigger submission
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we could add guidance to the docs instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I removed 'type': 'button'
. I'll add it to the docs instead as @kara suggested.
src/cdk/stepper/stepper.ts
Outdated
/** Whether the user has interacted with step or not. */ | ||
get interacted() { return this._interacted; } | ||
set interacted(value: any) { | ||
this._interacted = coerceBooleanProperty(value); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
since this isn't an @Input()
you don't have to worry about the coerceBooleanProperty
stuff
@@ -1,3 +1,52 @@ | |||
<h2>Linear Vertical Stepper Demo</h2> | |||
<form [formGroup]="formGroup" novalidate> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why novalidate
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, not necessary
@@ -1,3 +1,52 @@ | |||
<h2>Linear Vertical Stepper Demo</h2> | |||
<form [formGroup]="formGroup" novalidate> | |||
<div formArrayName="formArray"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do we need the div
? why not just put formArrayName
on the md-vertical-stepper
<div formArrayName="formArray"> | ||
<md-vertical-stepper> | ||
<md-step> | ||
<div [formGroupName]="0"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
formGroupName
on md-step
and get rid of extra div
</div> | ||
</md-step> | ||
|
||
<md-step [disabled]="!formGroup.controls.formArray.controls[1].valid"> |
There was a problem hiding this comment.
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 is quite right, you also need to make sure the previous step is enabled, otherwise you might end up in a situation like this:
- the 1st step is invalid
- the 2nd step is disabled, but has no controls with validation so it's considered valid
- the 3rd step would be set to enabled since it's enabledness is based solely off the previous step's validity
(It would be nice if there was some way we could make this easier for users. I don't have any ideas off the top of my head though...)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about creating a custom validator function for the group or array? It seems like you need to consider more than one form control here, which is the classic situation where that is needed. A higher-level validator would allow you to surface more information in a custom error message, like all step validity or the latest step where all steps before it are valid.
src/cdk/stepper/stepper-button.ts
Outdated
host: {'(click)': '_stepper.next()'} | ||
host: { | ||
'(click)': '_stepper.next()', | ||
'type': 'button' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we could add guidance to the docs instead?
@@ -1,3 +1,52 @@ | |||
<h2>Linear Vertical Stepper Demo</h2> | |||
<form [formGroup]="formGroup" novalidate> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, not necessary
</div> | ||
</md-step> | ||
|
||
<md-step [disabled]="!formGroup.controls.formArray.controls[0].valid"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Generally speaking, using the get()
method is preferred over the controls property. I'd also suggest creating a getter for the array so it's less painful:
<md-step [disabled]="formArray.get([0]).valid">
get formArray() { return this.formGroup.get('formArray'); }
But see comment below about strategy
</div> | ||
</md-step> | ||
|
||
<md-step [disabled]="!formGroup.controls.formArray.controls[1].valid"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about creating a custom validator function for the group or array? It seems like you need to consider more than one form control here, which is the classic situation where that is needed. A higher-level validator would allow you to surface more information in a custom error message, like all step validity or the latest step where all steps before it are valid.
src/cdk/stepper/stepper.ts
Outdated
set disabled(value: any) { | ||
this._disabled = coerceBooleanProperty(value); | ||
} | ||
private _disabled = false; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you add a TODO
to use the disabled mixin when it's moved to the cdk?
src/demo-app/stepper/stepper-demo.ts
Outdated
steps = [ | ||
{label: 'Confirm your name', content: 'Last name, First name.'}, | ||
{label: 'Confirm your contact information', content: '123-456-7890'}, | ||
{label: 'Confirm your address', content: '1600 Amphitheater Pkwy MTV'}, | ||
{label: 'You are now done', content: 'Finished!'} | ||
]; | ||
|
||
constructor(private _fb: FormBuilder) { } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
_fb
-> _formBuilder
} | ||
|
||
/** Custom error state matcher that additionally checks for validity of interacted form. */ | ||
errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The class should implement ErrorOptions
} | ||
|
||
/** Custom error state matcher that additionally checks for validity of interacted form. */ | ||
errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does it work if this is a prototype method rather than a property?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No because the ErrorOptions
stuff is implemented kind of strangely and the context would be lost if we did it as a prototype method. I would like to refactor it, probably not as part of this PR though
src/cdk/stepper/stepper.ts
Outdated
} | ||
private _disabled = false; | ||
|
||
/** Whether the user has interacted with step or not. */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you expand this comment to describe what "interacted with" means?
|
||
/** Custom error state matcher that additionally checks for validity of interacted form. */ | ||
errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => { | ||
let originalErrorState = this._originalErrorStateMatcher(control, form); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you add a comment that explains the background for why we are doing this custom error matcher stuff? (i.e., everything we talked about in the meeting)
Changes have been made; ready for review. 👍 |
src/cdk/stepper/stepper.ts
Outdated
|
||
/** Whether user has seen the expanded step content or not . */ | ||
get interacted() { return this._interacted; } | ||
set interacted(value: boolean) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
setter/getter isn't doing anything can switch to
interacted = false;
src/demo-app/stepper/stepper-demo.ts
Outdated
* Form array validator to check if all form groups in form array are valid. | ||
* If not, it will return the index of the first invalid form group. | ||
*/ | ||
private _stepValidator: ValidatorFn = (formArray: FormArray): ValidationErrors | null => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was imagining this more as something that we define in our code and users can just import and use.
</md-step> | ||
|
||
<md-step | ||
[disabled]="formArray.hasError('invalid step') ? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't really seem to have made the disabled logic much easier... is that what you had in mind @kara or is there a better way to organize the custom validator?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mmalerba wouldn't it be better to not direct;y use the previous step form validity on the disabled input and instead use a @Input() valid
which you would pass the current step validity and internally check the validation so you would have <md-step [valid]="formGroup.controls.formArray.controls[0].valid">
.
It's going to be more complex than just checking if the previous is valid because it's going to need to validate against disabled, editable, optional and completed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@joejordanbrown The changed code no longer only checks for the previous step's validity. Now it uses the custom step validation function stepValidator
to check for the validity of all the previous steps. If there's a step that is invalid, it will return the smallest index of the step that is invalid to compare with the index of the step that is being triggered.
@mmalerba : Waiting for @kara 's response on additional suggestions regarding this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@g1shin I see that, but I think it's too complex for the end user to have to add that to each step. It's going to get confusing for people when you use that with *ngFor
and people will make mistakes. Especially when it's going to have a lot more options added in future for [editable]
and [optionial]
.
You should be using less than operator <
instead of less than or equal operator <=
for your disabled logic. The second step should be [disabled]="formArray.hasError('invalid step') ? formArray.getError('invalid step').index < 1 : false"
you are also missing the required validation on your second step to be able to test this.
phoneFormCtrl: ['', Validators.required],
Do you have the design document for the stepper? I don't see it on the wiki.
Changes have been made based on review. |
src/cdk/stepper/stepper.ts
Outdated
@@ -84,7 +97,8 @@ export class CdkStepper { | |||
@Input() | |||
get selectedIndex() { return this._selectedIndex; } | |||
set selectedIndex(index: number) { | |||
if (this._selectedIndex != index) { | |||
this._steps.toArray()[this._selectedIndex].interacted = true; | |||
if (this._selectedIndex != index && !this._steps.toArray()[index].disabled) { | |||
this._emitStepperSelectionEvent(index); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we only want to emit a change event if the selected index changes due to user interaction, therefore this should be moved to one of the user event handlers
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought this is commonly called by all user interactions and that's why we decided to delegate emitting a change event here. Is this not what you meant?
src/lib/stepper/stepper.ts
Outdated
* Form array validator to check if all form groups in form array are valid. | ||
* If not, it will return the index of the first invalid form group. | ||
*/ | ||
export const stepValidator: ValidatorFn = (formArray: FormArray): ValidationErrors | null => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should probably be called stepperValidator
since it's attached to the FormArray
representing the whole stepper, not the FormGroup
s representing the steps.
super(mdStepper); | ||
this._originalErrorStateMatcher = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FYI, #6147 should make this easier
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I saw the PR, but should this change be made after that PR is merged into master and 'stepper' branch has synced to upstream master?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yep, just an fyi
@kara @mmalerba I tried implementing Also, Miles, I'll make address your other comments later after first settling on an approach for Form related things. |
This looks like the right idea to me. I'll let @kara comment on whether this covers all of the cases she mentioned. I think we should also add a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, nits
src/lib/stepper/stepper.ts
Outdated
/** | ||
* Form array validator to check if all form groups in form array are valid. | ||
* If not, it will return the index of the first invalid form group. | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this comment left over from a previous implementation? Doesn't seem to go with MdStep
.
src/cdk/stepper/stepper.ts
Outdated
@@ -84,6 +97,10 @@ export class CdkStepper { | |||
@Input() | |||
get selectedIndex() { return this._selectedIndex; } | |||
set selectedIndex(index: number) { | |||
this._steps.toArray()[this._selectedIndex].interacted = true; | |||
for (let i = 0; i < index; i++) { | |||
if (!this._steps.toArray()[i].stepControl.valid) { return; } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Here you're calling toArray()
every index of the loop. Perhaps save it at the top instead?
const steps = this._steps.toArray();
steps[this._selectedIndex].interacted = true;
for (let i =0; i < index; i++) {
if (!steps[i].stepControl.valid) { return; }
}
I'd also consider maybe breaking this loop out into its own mini-method, like _anyControlsInvalid
.
Form control approach implemented and |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Almost there, couple more things
src/cdk/stepper/stepper.ts
Outdated
@@ -71,6 +84,7 @@ export class CdkStep { | |||
host: { | |||
'(focus)': '_focusStep()', | |||
'(keydown)': '_onKeydown($event)', | |||
'[linear]': 'linear', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
don't need this
src/cdk/stepper/stepper.ts
Outdated
@Input() | ||
get linear() { return this._linear; } | ||
set linear(value: any) { | ||
this._linear = coerceBooleanProperty(value); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: can 1-line the setter as well
@@ -1,3 +1,46 @@ | |||
<h2>Linear Vertical Stepper Demo</h2> | |||
<form [formGroup]="formGroup"> | |||
<md-vertical-stepper formArrayName="formArray" linear> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we do [linear]="isLinear"
and add a checkbox to toggle it, that way its easy to test
super(mdStepper); | ||
this._originalErrorStateMatcher = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yep, just an fyi
Changes made based on review 😄 |
@@ -4,7 +4,8 @@ | |||
"outDir": "../../../dist/packages/cdk", | |||
"baseUrl": ".", | |||
"paths": { | |||
"@angular/cdk/keyboard": ["../../../dist/packages/cdk/keyboard/public_api"] | |||
"@angular/cdk/keyboard": ["../../../dist/packages/cdk/keyboard/public_api"], | |||
"@angular/cdk/coercion": ["../../../dist/packages/cdk/coercion/public_api"] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should be able to delete the entire paths
property in this tsconfig now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
possibly... depends where her stepper branch is synced to
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/lib/stepper/stepper.ts
Outdated
* Custom error state checks for the validity of form that is not submitted or touched | ||
* since user can trigger a form change by calling for another step without directly | ||
* interacting with the current form. | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use inline-style (//
) comments for local variables
* Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo
* Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo
* Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo
* Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo
* Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo
* Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo
…tepper branch. (#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (#6242) * Add initial styles to stepper based on Material guidelines * Fix flex-shrink and min-width * Changes made based on review * Fix alignment * Margin modifications feat(stepper): Add support for linear stepper (#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper #2 - each step as its own form. (#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (#6507) feat(stepper): Add documentation for stepper (#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs
…tepper branch. (angular#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (angular#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (angular#6242) * Add initial styles to stepper based on Material guidelines * Fix flex-shrink and min-width * Changes made based on review * Fix alignment * Margin modifications feat(stepper): Add support for linear stepper (angular#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (angular#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (angular#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper angular#2 - each step as its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (angular#6507) feat(stepper): Add documentation for stepper (angular#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (angular#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (angular#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs
…tepper branch. (angular#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (angular#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (angular#6242) * Add initial styles to stepper based on Material guidelines * Fix flex-shrink and min-width * Changes made based on review * Fix alignment * Margin modifications feat(stepper): Add support for linear stepper (angular#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (angular#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (angular#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper angular#2 - each step as its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (angular#6507) feat(stepper): Add documentation for stepper (angular#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (angular#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (angular#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This is the PR for adding support for linear stepper using an array of
FormGroup
s.Custom
errorStateMatcher
has been added to be able to show errors for inputs that are not submitted.(cell.ts and row.ts files were changed because there were lint errors regarding long lines.)