feat(stepper): Add animation to stepper #6361

g1shin · 2017-08-08T22:59:48Z

Animation is added to support smooth transition between steps upon step selection change.

kara · 2017-08-09T17:21:59Z

src/cdk/stepper/stepper.ts

@@ -131,6 +152,10 @@ export class CdkStepper {
    this._groupId = nextId++;
  }

+  ngAfterContentChecked(): void {


This is called every change detection run, which seems like it may be overkill. Can you clarify why this is necessary? Would ngAfterContentInit work here?

Now neither is needed with the new change :)

kara · 2017-08-09T17:24:07Z

src/lib/stepper/stepper-horizontal.ts

+      state('left', style({transform: 'translate3d(-100%, 0, 0)'})),
+      state('center', style({transform: 'translate3d(0%, 0, 0)'})),
+      state('right', style({transform: 'translate3d(100%, 0, 0)'})),
+      transition('* => left, * => right, left => center, right => center',


Could you do * => center as well, or will that not work?

jelbourn · 2017-08-09T17:22:27Z

src/cdk/stepper/stepper.ts

+ * Position state of the content of each step in horizontal stepper that is used for transitioning
+ * the content into correct position upon step selection change.
+ */
+export type CdkStepContentPositionState = 'left' | 'center' | 'right';


Does this need to take RTL into consideration?

Yes, it would need to once the Directionality related things are added to stepper, but I haven't added any code dealing with Directionality. I am thinking about addressing them all at once, since it will also influence other interactions such as _foucsIndex management for horizontal stepper.

jelbourn · 2017-08-09T17:26:47Z

src/cdk/stepper/stepper.ts

+  _position: CdkStepContentPositionState;
+
+  /** Sets the CdkStepContentPositionState of step. */
+  set position(position: number) {


position by itself doesn't seem specific enough. Maybe animationDirection?

jelbourn · 2017-08-09T17:28:16Z

src/cdk/stepper/stepper.ts

+ * Position state of the content of each step in horizontal stepper that is used for transitioning
+ * the content into correct position upon step selection change.
+ */
+export type CdkStepContentPositionState = 'left' | 'center' | 'right';


Can this be generalized such that it isn't only for horizontal steps? Maybe previous / current / next?

jelbourn · 2017-08-09T17:29:07Z

src/cdk/stepper/stepper.ts

+ * Position state of the content of each step in horizontal stepper that is used for transitioning
+ * the content into correct position upon step selection change.
+ */
+export type CdkStepContentPositionState = 'left' | 'center' | 'right';


Don't need to prefix this with Cdk; my stance is that only directives/components with cdk- selector should have that reflected in the identifier name

jelbourn · 2017-08-09T17:31:52Z

src/cdk/stepper/stepper.ts

+  _position: CdkStepContentPositionState;
+
+  /** Sets the CdkStepContentPositionState of step. */
+  set position(position: number) {


Rather than having a setter for this and reading the property, why not just always read a function like getAnimationDirection that's based off of the current index?

jelbourn · 2017-08-09T17:32:32Z

src/lib/stepper/stepper.scss

+  }
+}
+
+.horizontal-content-container {


Prefix all css classes with mat-

… the same function

g1shin · 2017-08-09T22:36:51Z

Changes have been made based on review. Ready for review again 👍

jelbourn

LGTM

mmalerba · 2017-08-10T17:04:23Z

src/lib/stepper/_stepper-theme.scss

    border-left-color: mat-color($foreground, divider);
  }

-  .connector-line {
+  .mat-connector-line {


before this gets merged into master you should go through and make sure the classes all start with mat-stepper- or mat-step-

* Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function

@input

…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

@input

…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

@input

…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

angular-automatic-lock-bot · 2019-09-06T21:01:37Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

jwshinjwshin added 4 commits August 8, 2017 09:03

Add animation

a43faac

Implement Angular animation

23ebe6f

Merge branch 'stepper' of github.com:angular/material2 into animation

15a04f4

Clean up unnecessary code

31e2197

g1shin assigned jelbourn, kara, g1shin and mmalerba Aug 8, 2017

g1shin requested review from jelbourn, kara and mmalerba August 8, 2017 22:59

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 8, 2017

g1shin changed the title ~~Add animation to stepper~~ feat(stepper): Add animation to stepper Aug 8, 2017

mmalerba requested a review from andrewseguin August 8, 2017 23:08

mmalerba assigned andrewseguin Aug 8, 2017

kara reviewed Aug 9, 2017

View reviewed changes

kara removed their assignment Aug 9, 2017

jelbourn reviewed Aug 9, 2017

View reviewed changes

Generalize animation so that vertical and horizontal steppers can use…

6346757

… the same function

jelbourn approved these changes Aug 10, 2017

View reviewed changes

mmalerba approved these changes Aug 10, 2017

View reviewed changes

g1shin merged commit 7cdbc40 into angular:stepper Aug 10, 2017

mmalerba added the pr: lgtm label Aug 10, 2017

g1shin pushed a commit that referenced this pull request Aug 14, 2017

feat(stepper): Add animation to stepper (#6361)

b3d8edd

* Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function

g1shin pushed a commit that referenced this pull request Aug 16, 2017

feat(stepper): Add animation to stepper (#6361)

2e660b4

* Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function

g1shin pushed a commit that referenced this pull request Aug 23, 2017

feat(stepper): Add animation to stepper (#6361)

880339f

* Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(stepper): Add animation to stepper #6361

feat(stepper): Add animation to stepper #6361

g1shin commented Aug 8, 2017

kara Aug 9, 2017

g1shin Aug 9, 2017

kara Aug 9, 2017

jelbourn Aug 9, 2017

g1shin Aug 9, 2017 •

edited

Loading

jelbourn Aug 9, 2017

jelbourn Aug 9, 2017

jelbourn Aug 9, 2017

jelbourn Aug 9, 2017

jelbourn Aug 9, 2017

g1shin commented Aug 9, 2017

jelbourn left a comment

mmalerba Aug 10, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

feat(stepper): Add animation to stepper #6361

feat(stepper): Add animation to stepper #6361

Conversation

g1shin commented Aug 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin Aug 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin commented Aug 9, 2017

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 6, 2019

g1shin Aug 9, 2017 •

edited

Loading