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

@@ -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

+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

+
+
+### 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

+- <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

+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

+```
+
+### 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

+### 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

+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

+### 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

+
+#### 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

+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

ghost · 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:stepperAug 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

angular-automatic-lock-botBot 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.

Uh oh!

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!

ghost commented Sep 6, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

kara left a comment •
edited
Loading