feat(stepper): Add documentation for stepper by g1shin · Pull Request #6533 · angular/components

g1shin · 2017-08-17T21:23:33Z

No description provided.

jelbourn · 2017-08-17T21:50:50Z

src/lib/stepper/stepper.md

@@ -0,0 +1,128 @@
+Angular Material stepper walks users through multi-step processes by breaking them up


The docs pattern I've been trying to keep is something like

One-sentence summary of the component (tabs docs seem to be the exception)

Live overview example

Individual sections specific to the component

Accessibility section

The live example can go in a follow up PR

I'd make the first sentence tagline something like

Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.

jelbourn · 2017-08-17T21:56:21Z

src/lib/stepper/stepper.md

+that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design
+styling.
+
+There are two stepper components: `md-horizontal-stepper` and `md-vertical-stepper`. They 


I'd put this under a header like ### Stepper variants

jelbourn · 2017-08-17T21:57:16Z

src/lib/stepper/stepper.md

+
+
+### Event
+The `selectionChange` output event is emitted when the selected step changes.


I'd omit the events section since the information is covered in the generated API docs (we should remove this from the tabs docs as well)

jelbourn · 2017-08-17T22:00:39Z

src/lib/stepper/stepper.md

+- <kbd>RIGHT_ARROW</kbd>: Focuses the next step header
+- <kbd>ENTER</kbd>, <kbd>SPACE</kbd>: Selects the step that the focus is currently on
+- <kbd>TAB</kbd>: Focuses the next tabbable element
+- <kbd>TAB</kbd>+<kbd>SHIFT</kbd>: Focuses the previous tabbable element


Need an Accessibility section at the end that describes the a11y aspects of the component. In this case it should mention that the stepper is treated as a tabbed view for a11y purposes. Should also mention any required labels, etc.

kara

Nits / typos

kara · 2017-08-17T22:29:43Z

src/lib/stepper/stepper.md

+The `selectionChange` output event is emitted when the selected step changes.
+
+### Labels
+If a step's label is only text then `label` attribute can be used.


"If a step's label is only text, then the label attribute can be used."

kara · 2017-08-17T22:30:16Z

src/lib/stepper/stepper.md

+```
+
+### Linear stepper
+`linear` attribute can be set on `md-horizontal-stepper` and `md-vertical-stepper` to create


linear attribute -> The linear attribute

kara · 2017-08-17T22:30:37Z

src/lib/stepper/stepper.md

+### Linear stepper
+`linear` attribute can be set on `md-horizontal-stepper` and `md-vertical-stepper` to create
+a linear stepper that requires the user to complete previous steps before proceeding
+to following steps. For each `md-step`, `stepControl` attribute can be set to the top level


stepControl attribute -> the stepControl attribute

kara · 2017-08-17T22:31:00Z

src/lib/stepper/stepper.md

+using a different form for each step.
+
+#### Using a single form
+When using a single form for the stepper, `mdStepperPrevious` and `mdStepperNext` has to be


has to be -> have to be

kara · 2017-08-17T22:31:43Z

src/lib/stepper/stepper.md

+### Types of steps
+
+#### Optional step
+If completion of a step in linear stepper is not required, then `optional` attribute can be set


optional attribute -> the optional attribute

kara · 2017-08-17T22:32:03Z

src/lib/stepper/stepper.md

+
+#### Editable step
+By default, steps are editable, which means users can return to previously completed steps and
+edit their responses. `editable="true"` can be set on `md-step` to change the default 


Missing the period at the end

kara · 2017-08-17T22:32:40Z

src/lib/stepper/stepper.md

+edit their responses. `editable="true"` can be set on `md-step` to change the default 
+
+#### Completed step
+By default, `completed` attribute of a step returns `true` if the step is valid (in case of


completed attribute -> the completed attribute

g1shin · 2017-08-18T17:25:13Z

Revised based on review. Ready for review again 👍

jelbourn

LGTM

jelbourn · 2017-08-18T17:38:29Z

I'll leave it to @kara or @mmalerba for a final review

kara

LGTM. @mmalerba ?

mmalerba · 2017-08-21T22:37:51Z

lgtm

* Documentation for stepper * Revision based on review + add accessibility section

@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-06T22:02:43Z

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.}

Documentation for stepper

246f8b7

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

g1shin requested review from jelbourn, kara and mmalerba August 17, 2017 21:23

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

jelbourn reviewed Aug 17, 2017

View reviewed changes

kara reviewed Aug 17, 2017

View reviewed changes

Revision based on review + add accessibility section

db22cc2

jelbourn approved these changes Aug 18, 2017

View reviewed changes

kara approved these changes Aug 18, 2017

View reviewed changes

kara removed their assignment Aug 18, 2017

mmalerba added the pr: lgtm label Aug 21, 2017

g1shin merged commit bc8407e into angular:stepper Aug 21, 2017

g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 22, 2017

feat(stepper): Add documentation for stepper (angular#6533)

46f53ce

* Documentation for stepper * Revision based on review + add accessibility section

g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 22, 2017

feat(stepper): Add documentation for stepper (angular#6533)

d19d07b

* Documentation for stepper * Revision based on review + add accessibility section

g1shin pushed a commit to g1shin/material2 that referenced this pull request Aug 22, 2017

feat(stepper): Add documentation for stepper (angular#6533)

ca8301e

* Documentation for stepper * Revision based on review + add accessibility section

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

feat(stepper): Add documentation for stepper (#6533)

9c439e1

* Documentation for stepper * Revision based on review + add accessibility section

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

		@@ -0,0 +1,128 @@
		Angular Material stepper walks users through multi-step processes by breaking them up



		### Event
		The `selectionChange` output event is emitted when the selected step changes.

Conversation

g1shin commented Aug 17, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kara left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Aug 18, 2017

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

jelbourn commented Aug 18, 2017

Uh oh!

kara left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmalerba commented Aug 21, 2017

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

kara left a comment •

edited

Loading