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): Create stepper button directives to enable adding buttons to stepper #5951

Merged
merged 3 commits into from
Jul 26, 2017

Conversation

g1shin
Copy link

@g1shin g1shin commented Jul 21, 2017

Allow users to add buttons rather than steppers containing buttons.

@g1shin g1shin requested review from jelbourn, kara and mmalerba July 21, 2017 22:23
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jul 21, 2017
@g1shin g1shin changed the title Create stepper button directives to enable adding buttons to stepper feat(stepper): Create stepper button directives to enable adding buttons to stepper Jul 21, 2017
import {Directive} from '@angular/core';
import {CdkStepper} from './stepper';

@Directive({
Copy link
Member

Choose a reason for hiding this comment

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

Add simple class description for both directives? Can just be something like

/** Button that moves to the next step in a stepper workflow. */

@Directive({
selector: 'button[cdkStepperNext]',
host: {
'(click)': '_onClick()',
Copy link
Member

Choose a reason for hiding this comment

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

Instead of creating an _onClick handler, you can just do

host: {
  '(click)': '_stepper.next()',
}

(would have to make _stepper not private; just keep the underscore as it implies "internal"). Would condense the entire class down to

@Directive({
  selector: 'button[cdkStepperNext]',
  host: {'(click)': '_stepper.next()'}
})
export class CdkStepperNext {
  constructor(public _stepper: CdkStepper) { }
}

Copy link
Author

Choose a reason for hiding this comment

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

Since the click handler doesn't seem to be inherited, I think it would be necessary to create the _onClick handler that the child directive can access.

Copy link
Member

Choose a reason for hiding this comment

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

I don't quite follow what you mean; even without the click handler being inherited, you can still directly have host: {'(click)': '_stepper.next()'}

Copy link
Contributor

@mmalerba mmalerba Jul 25, 2017

Choose a reason for hiding this comment

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

_stepper is still a public member so you don't need _onClick

'(click)': '_onClick()',
}
})
export class MdStepperNext extends CdkStepperNext {
Copy link
Member

Choose a reason for hiding this comment

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

Does it work if you just do this?

@Directive({selector: 'button[mdStepperNext], button[matStepperNext]'})
export class  MdStepperNext extends CdkStepperNext { }

I thought the click handler would be inherited automatically and that the constructor wouldn't be necessary if MdStepper provides itself as CdkStepper

Copy link
Author

Choose a reason for hiding this comment

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

angular/angular#18331
The click handler does not seem to be inherited automatically.

@g1shin
Copy link
Author

g1shin commented Jul 25, 2017

Changes have been made based on review; ready for review again.

@g1shin
Copy link
Author

g1shin commented Jul 26, 2017

Ready for review 👍

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@g1shin g1shin merged commit 4b35f42 into angular:stepper Jul 26, 2017
g1shin pushed a commit that referenced this pull request Jul 26, 2017
…ons to stepper (#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers
g1shin pushed a commit that referenced this pull request Aug 14, 2017
…ons to stepper (#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers
g1shin pushed a commit that referenced this pull request Aug 16, 2017
…ons to stepper (#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers
g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 22, 2017
…ons to stepper (angular#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers
g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 22, 2017
…ons to stepper (angular#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers
g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 22, 2017
…ons to stepper (angular#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers
g1shin pushed a commit that referenced this pull request Aug 23, 2017
…ons to stepper (#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers
mmalerba pushed a commit that referenced this pull request Aug 23, 2017
…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
g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 31, 2017
…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
g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 31, 2017
…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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants