[AppBar] Add AppBarContainer component providing padding and layout automatically

Let me know if this has been previously debated, I’d love to read the discussion!

Today I think creating a simple layout with an AppBar at the top of the page is unnecessarily complex, as developers need to manually set the AppBar to fixed position and add padding to whatever is under it with the same height as it will be (which turns out to be spacing.desktopKeylineIncrement).

Has it been discussed previously whether we should instead architect more around a composition model, so for example we could have an <AppBarContainer> (name subject to bikeshedding) component with which you would write:

<AppBarContainer>
  <ThePageContents />
</AppBarContainer>

as shorthand for

<AppBar style={{ position: fixed; top: 0 }} />
<ThePageContents style={{ paddingTop: spacing.desktopKeylineIncrement }} />

I feel like that would make things way easier for developers and would allow for higher-level effects to be implemented like hiding-on-scroll etc.

[newoga]

@owencm Here is a proof of concept that needs some cleaning up but is what we had in mind for next iteration of AppBar.

http://newoga.github.io/material-ui-scrolling-techniques/ https://github.com/newoga/material-ui-scrolling-techniques

The children of AppBar was going to be used to compose different parts of the AppBar rather than page content. That being said, it still automatically manages padding the dynamic size of the AppBar for you so that you can just provide your <PageContents /> beneath it without having to worry about positioning.

[newoga]

@devdlabs In my projects I use my own <AppBar /> implementation when the existing ones do not suffice. It’s a lot simpler and uses standard flex layout to organize the parts of the AppBar. If the only thing you care about is the Toolbar portion of the <AppBar />, then you also may have better luck using material-ui’s <Toolbar /> component.