[AppBar] Prominent variant

[jgoux]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Hello,

it would be great to have the prominent variant for the AppBar component. It's nice on desktop!

Examples 🌈

You can find an example in the official Material Components Web library : https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar/prominent

You can also look at the specs : https://material.io/design/components/app-bars-top.html#anatomy

[mbrookes]

At first glance it looks like it should be trivial to implement (i.e. no significant code bloat), so no objection per-se; but I'm curious since we've had no requests up to now - do you have a use for this, or are you pointing out a gap vs the spec?

(If it's the latter, we should certainly add it to the "supported components" page as an unsupported variant, but I wouldn't rush to implement it, just because.)

[jgoux]

I think it's a gap vs the spec as the prominent variant is visible and presented multiple times in them.

Also I like this variant better for desktop screens, it gives more emphasis for the page title and action items.

[wojtczal]

@mbrookes a use case I've encountered recently is having an app bar with quite long page title and icons/buttons on it, on a small mobile device (thinking about 320px wide). The material guidelines suggest to go for prominent app bar in such case. This is often language-specific as some language have quite long words (German or Spanish). Would it be something you could target soonish? Thanks!

[mbrookes]

@wojtczal Would you like to work on it? The contributing guide will show you how to get started. It isn't as onerous as it looks.

[burtyish]

@mbrookes, I'd like to take a stab at this one.
The spec lists these variants:

• Regular
• Prominent
• Dense (desktop only)
• Prominent dense (desktop only)

To add the enhancement described in this issue, adding a prop like variant: 'regular' | 'prominent' should suffice.

However, for extra pints I might try to match the spec.
Maybe variant: 'regular' | 'prominent' | 'dense' | 'prominent dense' would be ok? I'm not in love with 'prominent dense' though. Two words doesn't feel right.

[mbrookes]

for extra pints

You sure you aren't British? 🍻 😆

I'm not in love with 'prominent dense' though.

For other components we have the dense prop. (See; https://material-ui.com/customization/density/). That would avoid the need for compound variants such as "prominent dense".

[burtyish]

Haha, yeah I meant extra points, but pints works better! 🍻
Anyway, I like the dense prop idea. I'll start with the prominent variant and leave dense for another PR.

[burtyish]

@mbrookes, before making any changes, I tried to achieve the prominent layout in a codesandbox, based on one of the demos. (my changes are marked by comments)
https://codesandbox.io/s/material-demo-prominent-appbar-h602s

I found that supporting the prominent bar variant would require changes in the Toolbar component, not the AppBar.

1. Currently, Toolbar supports the prop

variant?: 'regular' | 'dense'

I would suggest changing the API to

dense?: boolean;
prominent?: boolean;

This follows your suggestion and will allow users to combine the two props as they like.
However, it is a breaking change.

2. Although the Toolbar component can support a prominent variant, users would still have to tweak the styling on its children. See the menu button and title in the sandbox above.

I'd like to get feedback before making any changes.
WDYT of this approach?
Any suggestions?

[mbrookes]

@burtyish Thanks for the CodeSandbox. That looks good.

Between the breaking change, and the need to style the children, I wonder if for now a demo in the docs based on your example would be the better option?

[burtyish]

Between the breaking change, and the need to style the children, I wonder if for now a demo in the docs based on your example would be the better option?

@mbrookes you got it.
See my PR for docs above.