docs(expansion): create overview and examples #5823

julianobrasil · 2017-07-17T18:01:31Z

amcdnl · 2017-07-20T14:48:59Z

src/material-examples/expansion-steps/expansion-steps-example.ts

+  templateUrl: 'expansion-overview-example.html',
+})
+export class ExpansionStepsExample {
+  public step = 0;


@jelbourn - Do you prefer explicit public? I haven't seen this in other places.

Nope, in fact our coding standards specifically say to omit it.

Updated it.

julianobrasil

Updated the code ommiting 'public' keyword.

julianobrasil · 2017-07-20T16:51:42Z

src/material-examples/expansion-steps/expansion-steps-example.ts

+  templateUrl: 'expansion-overview-example.html',
+})
+export class ExpansionStepsExample {
+  public step = 0;


Updated it.

jelbourn · 2017-07-20T16:41:34Z

src/lib/expansion/expansion.md

+
+Each expansion has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state
+
+When grouped by an `<md-accordion>` element, the expansions can be used for the creation of flows, as it brings up the possibility to expand one view at a time.


The doc structure should be

Short, one-sentence summary of the component

Overview example

Expanded description of the component

Other component specific sections

Accessibility section

jelbourn · 2017-07-20T16:42:29Z

src/lib/expansion/expansion.md

+
+### Accordion
+
+It's possible to group expansions in a fancy way. The `multi="true"` input allows the expansions state to be set independently of each other. When `multi="false"` (default) just one expansion can be expanded at a given time:


It's possible to group expansions in a fancy way.

This isn't really a helpful sentence. Instead I would say something like "Multiple expansion panels can be combined into an accordion"

julianobrasil · 2017-07-20T17:50:33Z

I've changed it.

jelbourn · 2017-07-20T18:30:14Z

src/lib/expansion/expansion.md

@@ -0,0 +1,81 @@
+`<md-expansion-panel>` provides a way to show and hide lightweight content, by collapsing and expanding a view with a nice animation.


`<md-expansion-panel>` provides a expandable details-summary view.

Statements like "with a nice animation" are subjective. The docs should aim to be more "just the facts".

The word "lightweight" from the spec doesn't really have any bearing on the implementation. The designers used this word in the spec to communicate that people shouldn't dump an entire application inside an expansion panel.

jelbourn · 2017-07-20T18:32:20Z

src/lib/expansion/expansion.md

+
+The `expanded` input allows to choose among the collapsed or expanded state. 
+
+Each expansion panel has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state.


The header is required but the actions are optional

jelbourn · 2017-07-20T18:33:11Z

src/lib/expansion/expansion.md

+
+Each expansion panel has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state.
+
+When grouped by an `<md-accordion>` element the expansion panels can be used to create ordered views or flows, as it brings up the possibility to expand one view at a time.


I would eliminate this sentence since we talk about accordions in their own section.

jelbourn · 2017-07-20T18:33:55Z

src/lib/expansion/expansion.md

+
+When grouped by an `<md-accordion>` element the expansion panels can be used to create ordered views or flows, as it brings up the possibility to expand one view at a time.
+
+### Events


Don't need a section for events since this is captured in the API docs

jelbourn · 2017-07-20T18:34:36Z

src/lib/expansion/expansion.md

+
+<!-- example(expansion-overview) -->
+
+The `expanded` input allows to choose among the collapsed or expanded state. 


I would omit this bit about the expanded property because it will be captured via API docs and examples.

jelbourn · 2017-07-20T18:35:53Z

src/lib/expansion/expansion.md

+
+The `expanded` input allows to choose among the collapsed or expanded state. 
+
+Each expansion panel has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state.


I would start a new section here like

### Expansion panel content

And then talk about the header, actions, title, and description.

jelbourn · 2017-07-20T18:37:12Z

src/material-examples/expansion-steps/expansion-steps-example.css

+    width: 100%;
+    text-align: right;
+    margin-top: 5px;
+    color: blue;


Too much indent (should be +2, not +4)

@julianobrasil I think you're missing an eof newline here (see Travis).

Also, I'm not 100% sure, but I think all css classes under material-examples folder, should be prefixed with example-.

Done, @rafaelss95 .

You forgot to change headers-align.

Oops! Done.

julianobrasil · 2017-07-20T20:01:18Z

Changed.

willshowell

Also I think the general preference in this repo is to break markdown text lines at 100 characters

willshowell · 2017-07-20T21:38:54Z

src/lib/expansion/expansion.md

+
+The header section is always visible at the top of the component and contains a `<md-panel-title>` and a description `<md-panel-description>` subsections.
+
+The `<md-panel-title>` subsecion is shown in the begining of the header, followed by the `<md-panel-description>` subsection, which is supposed to contain a sumary of what's in the expansion content.


typos: subsecion -> subsection, begining -> beginning, sumary -> summary

willshowell · 2017-07-20T21:39:46Z

src/lib/expansion/expansion.md

+
+The `<md-panel-title>` subsecion is shown in the begining of the header, followed by the `<md-panel-description>` subsection, which is supposed to contain a sumary of what's in the expansion content.
+
+By default, the expansion panel header has a toogle sign at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the input property `toogleHide` to `true`. 


toogle -> toggle (multiple)
"toggle sign" -> "toggle icon"

willshowell · 2017-07-20T21:40:42Z

src/lib/expansion/expansion.md

+
+#### Actions
+
+The actions section is optional and fixed at the bottom, being visible only when the expansion is in its expanded state.


Can remove "being"

"...at the bottom, visible only when"

julianobrasil · 2017-07-20T21:53:31Z

@willshowell, manually (with simple <ENTER>)?

mackelito · 2017-07-20T22:08:51Z

just a FYI,
when using this code the title "jumps" when expanding/collapsing and the icon does not animate when rotating

<md-accordion>
  
  <md-expansion-panel multi="false">
    <md-expansion-panel-header>
      This is the expansion 1 title
    </md-expansion-panel-header>
    
    This the expansion 1 content
    
  </md-expansion-panel>
  
  <md-expansion-panel>
    <md-expansion-panel-header>
      This is the expansion 2 title
    </md-expansion-panel-header>
    
    This the expansion 2 content
    
  </md-expansion-panel>

</md-accordion>

julianobrasil · 2017-07-20T22:19:40Z

@mackelito, I noticed it. It wasn't like this. It's maybe something with the late build.

BTW I moved the multi="false" to md-accordion where it should be.

Edited: Apparently has the same root cause of #5623 and has a PR (#5650).

jelbourn · 2017-07-24T19:04:47Z

src/lib/expansion/expansion.md

@@ -0,0 +1,86 @@
+`<md-expansion-panel>` provides a way to show and hide content, by collapsing and expanding a 
+view with animation.


I'd prefer to phrase this as

`<md-expansion-panel>` provides a expandable details-summary view.

jelbourn · 2017-07-24T19:09:23Z

src/lib/expansion/expansion.md

+#### Header
+
+The header section is always visible at the top of the component and contains a `<md-panel-title>`
+ and a description `<md-panel-description>` subsections.


I would replace this paragraph and the next with

The `<md-expansion-panel-header>` shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally contain an `<md-panel-title>` and an `<md-panel-description>`, which format the content of the header to align with Material Design specifications.

jelbourn · 2017-07-24T19:10:53Z

src/lib/expansion/expansion.md

+
+By default, the expansion panel header has a toggle icon at the right edge, pointing up when 
+the panel is expanded and down when it's collapsed. The toggle icon can be hidden by setting the
+input property `hideToggle` to `true`. 


By default, the expansion-panel header includes a toggle icon at the end of the header to indicate the expansion state. This icon can be hidden via the `hideToggle` property.

jelbourn · 2017-07-24T19:11:39Z

src/lib/expansion/expansion.md

+
+<!-- example(expansion-overview) -->
+
+### Expansion panel content


Expansion-panel
(here and elsewhere)

jelbourn · 2017-07-24T19:13:12Z

src/lib/expansion/expansion.md

+
+### Expansion panel content
+
+Each expansion panel has a header section (mandatory) and an actions (optional) sections.


Each expansion panel must include a header and may optionally include an action bar.

jelbourn · 2017-07-24T19:14:19Z

src/lib/expansion/expansion.md

+    </md-panel-description>
+  </md-expansion-panel-header>
+
+  <p>...</p>


<p>This is the primary content of the panel.</p>

jelbourn · 2017-07-24T19:15:22Z

src/lib/expansion/expansion.md

+
+#### Actions
+
+The actions section is optional and fixed at the bottom, visible only when the expansion is in its


Actions may optionally be included at the bottom of the panel

julianobrasil · 2017-07-24T19:31:18Z

Done.

willshowell · 2017-07-24T19:30:11Z

src/material-examples/expansion-steps/expansion-steps-example.html

@@ -0,0 +1,70 @@
+<md-accordion class="example-headers-align">
+  <md-expansion-panel [expanded]="step === 0" (opened)="openEvent(0)" hideToggle="true">


Personally I think the toggles should be shown (instead of the icons) since this is the main example and you're trying to demo the features of the panel. If you insist on using icons,

The color: blue is pretty harsh and could probably be dropped

The icon-to-right thing cuts off the description text. Instead, unwrap the icons from their parent div, and make mat-expansion-panel-header-description justify-content with space-between and align-items center

The icons are there just to show a situation where the the default is hidden (and to show that is possible to use some html inside the description). They are not really necessary. I can drop them. But before I'll try your suggestions to see how they look like.

Your html point is good... maybe wait for a team member before dropping? But yeah, I think the styles can be cleaned up a little anyway 😁

willshowell · 2017-07-24T19:32:10Z

src/material-examples/expansion-steps/expansion-steps-example.ts

+export class ExpansionStepsExample {
+  step = 0;
+
+  openEvent(stepNumb: number) {


How about setStep(index: number)?

https://github.com/angular/material2/blob/master/CODING_STANDARDS.md#methods

willshowell · 2017-07-24T19:33:05Z

src/lib/expansion/expansion.md

@@ -0,0 +1,87 @@
+`<md-expansion-panel>` provides a expandable details-summary view.


...an expandable...

@willshowell, done. Take a look.

Also, the example plunk: https://plnkr.co/edit/5q98WJ?p=preview

willshowell · 2017-07-24T19:33:55Z

src/material-examples/expansion-steps/expansion-steps-example.html

+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Age">


type="number"?

jelbourn

LGTM, thanks!

willshowell · 2017-07-25T19:01:19Z

src/material-examples/expansion-steps/expansion-steps-example.ts

+@Component({
+  selector: 'expansion-overview-example',
+  templateUrl: 'expansion-overview-example.html',
+})


@Component({ selector: 'expansion-steps-example', templateUrl: 'expansion-steps-example.html', styleUrls: ['expansion-steps-example.css'], })

Added the missing styleUrls

The template and selector need to change too! Looks like copy/paste from the other example

The steps example was built over the overview one.

angular-automatic-lock-bot · 2019-09-07T10:01:38Z

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

docs(expansion): create overview and examples

8a1c7bf

julianobrasil requested review from amcdnl and jelbourn as code owners July 17, 2017 18:01

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

amcdnl reviewed Jul 20, 2017

View reviewed changes

ommit 'public' keyword

d647370

julianobrasil commented Jul 20, 2017

View reviewed changes

jelbourn reviewed Jul 20, 2017

View reviewed changes

change doc structure

94ace13

jelbourn reviewed Jul 20, 2017

View reviewed changes

review 2

f47066c

eliminate md-accordion mentioned in expansion panel content

adec4ac

willshowell reviewed Jul 20, 2017

View reviewed changes

will's reviews

b1dcc81

break lines at 100 chars

a6f26c7

typo

9d1b6ba

willshowell mentioned this pull request Jul 23, 2017

Expansion Panel hideToggle typo in docs #5975

Closed

julianobrasil added 4 commits July 23, 2017 06:36

toggleHide => hideToggle in overview

1758a93

Rafael's review (travis and prefix css class)

d618749

Rafael's review (prefix header-align css class)

774c53d

new line for expansion-overview-example.css

d916605

jelbourn reviewed Jul 24, 2017

View reviewed changes

overview jelbourn's reviews

18ae28a

willshowell reviewed Jul 24, 2017

View reviewed changes

julianobrasil added 4 commits July 24, 2017 17:19

expansion-steps-example (will's reviews)

a0186bd

new line in steps example

31f74ca

delete paragraph in header

7d65af8

expansion panel => expansion-panel

7b42a2e

jelbourn approved these changes Jul 25, 2017

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Jul 25, 2017

willshowell reviewed Jul 25, 2017

View reviewed changes

julianobrasil added 2 commits July 25, 2017 16:06

add styleUrls in steps example @component decorator

9c4912f

update steps example @component decorator

960158c

andrewseguin merged commit 63411dc into angular:master Jul 27, 2017

julianobrasil deleted the expansion-docs branch October 12, 2017 22:11

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


		Each expansion has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state

		When grouped by an `<md-accordion>` element, the expansions can be used for the creation of flows, as it brings up the possibility to expand one view at a time.


		### Accordion

		It's possible to group expansions in a fancy way. The `multi="true"` input allows the expansions state to be set independently of each other. When `multi="false"` (default) just one expansion can be expanded at a given time:

		@@ -0,0 +1,81 @@
		`<md-expansion-panel>` provides a way to show and hide lightweight content, by collapsing and expanding a view with a nice animation.


		The `expanded` input allows to choose among the collapsed or expanded state.

		Each expansion panel has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state.


		When grouped by an `<md-accordion>` element the expansion panels can be used to create ordered views or flows, as it brings up the possibility to expand one view at a time.

		### Events


		<!-- example(expansion-overview) -->

		The `expanded` input allows to choose among the collapsed or expanded state.


		The header section is always visible at the top of the component and contains a `<md-panel-title>` and a description `<md-panel-description>` subsections.

		The `<md-panel-title>` subsecion is shown in the begining of the header, followed by the `<md-panel-description>` subsection, which is supposed to contain a sumary of what's in the expansion content.


		The `<md-panel-title>` subsecion is shown in the begining of the header, followed by the `<md-panel-description>` subsection, which is supposed to contain a sumary of what's in the expansion content.

		By default, the expansion panel header has a toogle sign at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the input property `toogleHide` to `true`.


		#### Actions

		The actions section is optional and fixed at the bottom, being visible only when the expansion is in its expanded state.

		@@ -0,0 +1,86 @@
		`<md-expansion-panel>` provides a way to show and hide content, by collapsing and expanding a
		view with animation.


		<!-- example(expansion-overview) -->

		### Expansion panel content


		### Expansion panel content

		Each expansion panel has a header section (mandatory) and an actions (optional) sections.

		@@ -0,0 +1,70 @@
		<md-accordion class="example-headers-align">
		<md-expansion-panel [expanded]="step === 0" (opened)="openEvent(0)" hideToggle="true">

		@@ -0,0 +1,87 @@
		`<md-expansion-panel>` provides a expandable details-summary view.

docs(expansion): create overview and examples #5823

docs(expansion): create overview and examples #5823

Uh oh!

Conversation

julianobrasil commented Jul 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!

julianobrasil 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!

julianobrasil commented Jul 20, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rafaelss95 Jul 23, 2017 • 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!

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!

julianobrasil commented Jul 20, 2017

Uh oh!

willshowell 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!

julianobrasil commented Jul 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mackelito commented Jul 20, 2017

Uh oh!

julianobrasil commented Jul 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

rafaelss95 Jul 23, 2017 •

edited

Loading

julianobrasil commented Jul 20, 2017 •

edited

Loading

julianobrasil commented Jul 20, 2017 •

edited

Loading