docs(stepper): Improves documentation for stepper component #10537

raygervais · 2018-03-23T00:42:29Z

Fixes #10381 by adding documentation examples for edit and option steps.
StackBlitz Demo: https://angular-material2-issue-gebvgu.stackblitz.io

googlebot · 2018-03-23T00:42:31Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

What to do if you already signed the CLA

Individual signers

It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the project maintainer to go/cla#troubleshoot.
The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
The email used to register you as an authorized contributor must also be attached to your GitHub account.

raygervais · 2018-03-23T00:48:15Z

I signed it! On Mar 22, 2018, at 8:42 PM, googlebot <notifications@github.com<mailto:notifications@github.com>> wrote: Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). 📝 Please visit https://cla.developers.google.com/ to sign. Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

…

________________________________ What to do if you already signed the CLA Individual signers * It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data<https://cla.developers.google.com/clas> and verify that your email is set on your git commits<https://help.github.com/articles/setting-your-email-in-git/>. Corporate signers * Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the project maintainer to go/cla#troubleshoot. * The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data<https://cla.developers.google.com/clas> and verify that your email is set on your git commits<https://help.github.com/articles/setting-your-email-in-git/>. * The email used to register you as an authorized contributor must also be attached to your GitHub account<https://github.com/settings/emails>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#10537 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ANmr-VIcf0JXAx3Zyo_WJn-EOiFJU201ks5thEUOgaJpZM4S4ARQ>.

googlebot · 2018-03-23T00:48:18Z

CLAs look good, thanks!

mmalerba · 2018-03-23T17:28:59Z

src/material-examples/stepper-overview/stepper-overview-example.html

-<button mat-raised-button (click)="isLinear = true" id="toggle-linear">Enable linear mode</button>
-
+<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
+  {{!isLinear?'Enable linear mode':'Disable linear mode' }}


nit: spaces around ?, spaces around :, no space before: }}

mmalerba · 2018-03-23T17:33:25Z

src/material-examples/stepper-overview/stepper-overview-example.html

@@ -1,5 +1,6 @@
-<button mat-raised-button (click)="isLinear = true" id="toggle-linear">Enable linear mode</button>
-
+<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">


I don't know why this had an ID in the first place, but we can remove it

mmalerba · 2018-03-23T17:33:40Z

src/material-examples/stepper-types-editable/stepper-type-editable-example.html

@@ -0,0 +1,37 @@
+<button mat-raised-button (click)="isEditable = !isEditable" id="toggle-linear">


mmalerba · 2018-03-23T17:33:54Z

src/material-examples/stepper-types-editable/stepper-type-editable-example.html

@@ -0,0 +1,37 @@
+<button mat-raised-button (click)="isEditable = !isEditable" id="toggle-linear">
+  {{!isEditable?'Enable edit mode':'Disable edit mode' }}


same spacing comment as above

mmalerba · 2018-03-23T17:34:23Z

src/material-examples/stepper-types-editable/stepper-type-editable-example.html

@@ -0,0 +1,37 @@
+<button mat-raised-button (click)="isEditable = !isEditable" id="toggle-linear">
+  {{!isEditable?'Enable edit mode':'Disable edit mode' }}
+  </button>


match indentation with open <button> tag

mmalerba · 2018-03-23T17:39:09Z

src/material-examples/stepper-types-editable/stepper-type-editable-example.ts

+ * @title Stepper type - editable
+ */
+@Component({
+  selector: 'stepper-overview-example',


Update selector, templateUrl, and styleUrls

mmalerba · 2018-03-23T17:39:43Z

src/material-examples/stepper-types-optional/stepper-type-optional-example.html

@@ -0,0 +1,37 @@
+<button mat-raised-button (click)="isOptional = !isOptional" id="toggle-linear">


same nit comments as previous files

mmalerba · 2018-03-23T17:40:17Z

src/material-examples/stepper-types-optional/stepper-type-optional-example.ts

+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+/**
+ * @title Stepper type - optional


@title Stepper with optional steps

mmalerba · 2018-03-23T17:41:05Z

src/material-examples/stepper-types-optional/stepper-type-optional-example.ts

+      firstCtrl: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['',]


can just do ''

mmalerba · 2018-03-23T17:42:07Z

src/material-examples/stepper-types-optional/stepper-type-optional-example.ts

+  templateUrl: 'stepper-type-optional-example.html',
+  styleUrls: ['stepper-type-optional-example.css']
+})
+export class StepperTypeOptionalExample {


stepper-optional/, stepper-optional-example.*, and StepperOptionalExample

raygervais · 2018-03-24T17:04:11Z

I fixed the issues which you had found @mmalerba, and also thought of another two example which perhaps we'd want documented: Horizontal vs Vertical Steppers, Keyboard interactions. Thoughts? I'd be happy to add these to the current PR if you think they are useful in the documentation.

mmalerba · 2018-03-25T17:30:52Z

@raygervais Yep those sound like good things to add. The current batch of examples looks good to me, so I can either approve this one and you do the other examples in a separate PR or you can just add them to this PR and I'll wait until you're done. Let me know, thanks for your work on this!

raygervais · 2018-03-25T17:34:22Z

I'll do an add-on PR after this one is merged since I won't be able to do any work today. I can have it for you by tomorrow estimating. Glad to hear you're in agreement with the extra examples I thought of 😄

mmalerba · 2018-03-26T16:02:17Z

@raygervais One thing I realized we forgot, can you replace the inline examples in the markdown file with comments that embed these? The overview example shows how to do this: https://github.com/angular/material2/blame/master/src/lib/stepper/stepper.md#L3

raygervais · 2018-03-26T18:39:20Z

Doing so now @mmalerba :)

mmalerba · 2018-03-27T23:06:51Z

src/lib/stepper/stepper.md

@@ -112,10 +112,52 @@ are completed.
 If completion of a step in linear stepper is not required, then the `optional` attribute can be set
 on `mat-step`.

+```html


Actually you can remove these and put magic comments like for the overview example above:



Just replace stepper-overview with the name of the example folder and we have a script to embed it when we suck the markdown files into the docs site. (It comes out looking like this: https://material.angular.io/components/stepper/overview)

raygervais · 2018-03-29T02:22:02Z

Corrected @mmalerba, glad to know there is magic syntax which makes importing example components a breeze! 👍

josephperrott · 2018-03-30T21:15:11Z

@raygervais can you rebase and push your PR again?

raygervais · 2018-03-30T21:39:19Z

Corrected @josephperrott, I hope the commit message style is as expected, I was unsure if footer was necessary in this case. Either or, happy to fix if need be 👍

josephperrott · 2018-04-02T16:02:53Z

The commit message looks fine, thanks!

It looks like however there are lint and e2e failures, can you take look at those?

raygervais · 2018-04-03T12:21:20Z

Tackled the lint issues, will tackle the E2E tests today 💯

Glad to know commit message is appropriate, was a major concern based on the expected format in the CONTRIBUTORS.md file.

Updates button logic setting button from true to !isLinear, including text indicator of current state. Creates editable and optional documentation examples Imports into .MD file using special syntax docs(stepper): Created stepper edit example docs(stepper): Created stepper optional example docs(stepper): Fixed button toggle docs(stepper): Updated editable example docs(stepper): Updated optional example docs(stepper): Fixed overview example docs(stepper): Updated Stepper Markdown docs(stepper): Fixes stepper documentation

raygervais · 2018-04-03T23:49:15Z

Corrected E2E issues, should I add tests for the new examples?

mmalerba · 2018-04-03T23:52:19Z

@raygervais Our e2e coverage for most components is pretty lacking, but that's a separate issue. Not required for this PR.

) Updates button logic setting button from true to !isLinear, including text indicator of current state. Creates editable and optional documentation examples Imports into .MD file using special syntax

angular-automatic-lock-bot · 2019-09-08T17:02:09Z

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

raygervais requested review from amcdnl and jelbourn as code owners March 23, 2018 00:42

googlebot added the cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla label Mar 23, 2018

googlebot added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Mar 23, 2018

jelbourn requested a review from mmalerba March 23, 2018 16:11

mmalerba reviewed Mar 23, 2018

View reviewed changes

josephperrott added pr: needs review and removed pr: needs review labels Mar 23, 2018

raygervais changed the title ~~[WIP] docs(stepper): Improves documentation for stepper component~~ docs(stepper): Improves documentation for stepper component Mar 24, 2018

mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Mar 25, 2018

mmalerba approved these changes Mar 25, 2018

View reviewed changes

mmalerba added docs This issue is related to documentation target: patch This PR is targeted for the next patch release labels Mar 25, 2018

mmalerba removed the action: merge The PR is ready for merge by the caretaker label Mar 26, 2018

mmalerba reviewed Mar 27, 2018

View reviewed changes

mmalerba added the action: merge The PR is ready for merge by the caretaker label Mar 29, 2018

raygervais force-pushed the stepper-documentation-update branch from 6d12402 to aad9b12 Compare March 30, 2018 21:35

raygervais force-pushed the stepper-documentation-update branch 2 times, most recently from 58cb56f to b0c7a2a Compare April 2, 2018 17:21

raygervais force-pushed the stepper-documentation-update branch from b0c7a2a to 1bd9938 Compare April 3, 2018 23:25

jelbourn merged commit 6857426 into angular:master Apr 6, 2018

raygervais mentioned this pull request Apr 20, 2018

update(stepper): Adds Vertical Stepper example #10942

Merged

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

		@@ -1,5 +1,6 @@
		<button mat-raised-button (click)="isLinear = true" id="toggle-linear">Enable linear mode</button>

		<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">

		@@ -0,0 +1,37 @@
		<button mat-raised-button (click)="isEditable = !isEditable" id="toggle-linear">

		@@ -0,0 +1,37 @@
		<button mat-raised-button (click)="isEditable = !isEditable" id="toggle-linear">
		{{!isEditable?'Enable edit mode':'Disable edit mode' }}

		@@ -0,0 +1,37 @@
		<button mat-raised-button (click)="isOptional = !isOptional" id="toggle-linear">

docs(stepper): Improves documentation for stepper component #10537

docs(stepper): Improves documentation for stepper component #10537

Uh oh!

Conversation

raygervais commented Mar 23, 2018

Uh oh!

googlebot commented Mar 23, 2018

What to do if you already signed the CLA

Individual signers

Corporate signers

Uh oh!

raygervais commented Mar 23, 2018 via email

Uh oh!

googlebot commented Mar 23, 2018

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!

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!

raygervais commented Mar 24, 2018

Uh oh!

mmalerba commented Mar 25, 2018

Uh oh!

raygervais commented Mar 25, 2018

Uh oh!

mmalerba commented Mar 26, 2018

Uh oh!

raygervais commented Mar 26, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raygervais commented Mar 29, 2018

Uh oh!

josephperrott commented Mar 30, 2018

Uh oh!

raygervais commented Mar 30, 2018

Uh oh!

josephperrott commented Apr 2, 2018

Uh oh!

raygervais commented Apr 3, 2018

Uh oh!

raygervais commented Apr 3, 2018

Uh oh!

mmalerba commented Apr 3, 2018

Uh oh!

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

Uh oh!

Uh oh!