Skip to content

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