Skip to content

feat(stepper): Create stepper button directives to enable adding buttons to stepper - #5951

Merged
g1shin merged 3 commits into
angular:stepperfrom
g1shin:buttons
Jul 26, 2017
Merged

feat(stepper): Create stepper button directives to enable adding buttons to stepper#5951
g1shin merged 3 commits into
angular:stepperfrom
g1shin:buttons

Conversation

@g1shin

Copy link
Copy Markdown

Allow users to add buttons rather than steppers containing buttons.

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

@Directive({

Copy link
Copy Markdown
Contributor

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. */

Comment threadsrc/cdk/stepper/stepper-button.ts Outdated
@Directive({
selector: 'button[cdkStepperNext]',
host: {
'(click)': '_onClick()',

Copy link
Copy Markdown
Contributor

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()'}})exportclassCdkStepperNext{constructor(public_stepper: CdkStepper){}}

Copy link
Copy Markdown
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
Copy Markdown
Contributor

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()'}

@mmalerbammalerbaJul 25, 2017

Copy link
Copy Markdown
Contributor

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

Comment threadsrc/lib/stepper/stepper-button.ts Outdated
'(click)': '_onClick()',
}
})
export class MdStepperNext extends CdkStepperNext {

Copy link
Copy Markdown
Contributor

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]'})exportclassMdStepperNextextendsCdkStepperNext{}

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
Copy Markdown
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
Copy Markdown
Author

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

@g1shin

Copy link
Copy Markdown
Author

Ready for review 👍

@jelbournjelbourn left a comment

Copy link
Copy Markdown
Contributor

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:stepperJul 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
Copy Markdown

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-botangular-automatic-lock-botBot locked and limited conversation to collaborators Sep 6, 2019
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

cla: yesPR author has agreed to Google's Contributor License Agreement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@g1shin@jelbourn@mmalerba@kara@googlebot@jwshinjwshin