Add SubHeader components for lists

[ThomasBurleson]

Specifcation: SubHeaders

[rschmukler]

Looking forward to implementing this, as I was doing some research on lists, I noticed this screenshot on the list page, which features a grey color instead of the blue one:

Which color should we be using?

[rschmukler]

@ThomasBurleson I have finished the first implementation of this component. A few questions:

1) material-list should include a 8dp padding on the top/bottom, but currently does not. I'll fix this unless I'm missing something? spec here

2) material-list should not include a 8dp padding on the top if there is a header. Should I add a class to material-list's styling to add a class of with-subheader to eliminate this padding?

[ThomasBurleson]

I think if we can reproduce [with Angular Material] the demo as shown above (with colors, layout, etc) then we will have a successful demo (that uses Lists, Icons and SubHeaders). As I infer from the snapshot, we have:

• 2 Lists,
• with 2 preceding Subheaders. (where Subheader #2 seems to have a top line )

BTW, I am not sure if we have implemented all the components needed to fully implement the demo shown above.

[ThomasBurleson]

I just reviewed the spec and it appears that the SubHeaders have a stickiness factor:

Upon scrolling, subheaders remain pinned to the top of the screen and remain pinned until pushed on or off screen by the next subheader

[ThomasBurleson]

And, I would say yes to both your (1) and (2) questions above.

[rschmukler]

@ThomasBurleson, awesome thank you for all of the feedback. A few questions:

1) For the top line mentioned on one of the headers, perhaps that is just a material-divider in the dom? ie.

...
</material-list>
<material-divider class="inset">
<material-header>

Otherwise, we could do

</material-list>
<material-header class="divide-top">

Which would you prefer?

2) angular-polymer also implements this "sticky" behavior for the Toolbar (see the waterfall demo). Is this something that we will want for our Toolbars? If so, should I perhaps build out an internal material directive for this? (eg. _material-sticky)

[rschmukler]

Also, to expand on number 1 above, I think the divider is the better approach, as we will likely want to use padding-left to control the indent of text on the material-subheader, but that would mean that border-top couldn't be able to be used, as it would apply to the full width of the element.

[mlynch]

Ryan, have you seen the sticky scroll header in material? It's maybe what you are looking at?

On Sun, Sep 7, 2014 at 10:04 AM, Ryan Schmukler notifications@github.com wrote:

@ThomasBurleson https://github.com/ThomasBurleson, awesome thank you for all of the feedback. A few questions:

1) For the top line mentioned on one of the headers, perhaps that is just a material-divider in the dom? ie.

...

Otherwise, we could do

Which would you prefer?

2) angular-polymer http://www.polymer-project.org/components/core-header-panel/demo.html also implements this "sticky" behavior for the Toolbar (see the waterfall demo). Is this something that we will want for our Toolbars? If so, should I perhaps build out an internal material directive for this? (eg. _material-sticky)

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/216#issuecomment-54749234.

Max Lynch CEO and Co-founder http://ionicframework.com/

[ThomasBurleson]

@mlynch Is that in the ngMaterial Toolbar component: setupScrollShrink() ? Can you clarify?

[ThomasBurleson]

@rschmukler As I think of a <material-subheader>, I think it has:

• Label
• <material-divider> [optional],
• Indentation [optional]
• Sticky scrolling

[ThomasBurleson]

@mlynch, @rschmukler Should we refactor the scroll-shrink attribute to be a scroll-shrink attribute directive so it is reusable within ToolBar and SubHeader ?

[rschmukler]

@ThomasBurleson what are your thoughts on the padding issue I described above? We could use css-psuedo elements to handle the divider line, but does that feel dirty to you?

Also, I think the scroll-shrink isn't quite the behavior described for the header? It will need to remain full height, until it gets "pushed" away by another header

[mlynch]

Not sure, this one was modeled off the polymer one and is pretty tied to the toolbar header style.

On Sun, Sep 7, 2014 at 10:20 AM, Thomas Burleson notifications@github.com wrote:

@mlynch https://github.com/mlynch, @rschmukler https://github.com/rschmukler Should we refactor the scroll-shrink attribute to be a scroll-shrink directive so it is reusable within ToolBar and SubHeader ?

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/216#issuecomment-54749761.

Max Lynch CEO and Co-founder http://ionicframework.com/

[ThomasBurleson]

@rschmukler Regarding the padding question:

I think the divider is the better approach, as we will likely want to use padding-left to control the indent of text on the material-subheader, but that would mean that border-top couldn't be able to be used, as it would apply to the full width of the element.

I will defer to your considered best approach, then we can ask @Max, @Adam, @ajoslin to provide feedback... psuedo-elements are cool.

Regarding the scroll-shrink You are right. The UX is different for toolbars vs subHeaders. Perhaps, however, the setupScrollShrink () code will provide a jumpstart to the subHeader UX

[rschmukler]

As per flowdock discussion, we will need to update replace the element with an h2 and subsequently increase the header levels for list items to h3 and h4.

[ThomasBurleson]

@rschmukler - Is this issue closed and feature present in 0.0.3 or is moving it to 0.0.4 correct ?