MDC Tab / MDC Top App Bar: Add mixins to support combined use

[abhiomkar]

trafficstars

MDC Tab requires a new mixins to allow additional style customizations including:

• mdc-tab-accessible-fill-color
• mdc-tab-bar-elevation for MDC Tab Bar

See #3589 for example mockup.

[kfranqueiro]

Andy and I talked with design about use cases regarding tabs in combination with top app bar today. It came out that perhaps the most common case to support should be having the tabs auto-hide or stay fixed consistent with the top app bar, in which case we could potentially get away with nesting the tabs inside the top app bar.

I messed around a bit and it looks like this: https://codepen.io/kfranqueiro/pen/ePRrXR

mdc-tab-accessible-fill-color would still be highly useful for this, but we wouldn't need to mess with elevation. One thing we would need to do, though, is either figure out a way to make the --fixed-adjust modifier aware of this, or maybe expose a mixin to increase the adjustment. (Unless we want to do it in JS, but that'd easily risk FOUC.)

Our designer also ventured that other use cases involving one component auto-hiding and the other remaining fixed may be too complex to warrant implementing OOTB.

[monstasat]

Maybe some additional element should be added to mdc-top-app-bar as it is implemented in Flutter?

E.g. mdc-top-app-bar__bottom or similar? First I supposed that mdc-tab-bar can be wrapped in a second mdc-top-app-bar__row to achieve similar functionality, but it seems that it is a bad idea as mdc-tab-bar with stacked icons can be 72px tall and mdc-top-app-bar__row height is set to 64px on desktop.

As I can see, updating --fixed-adjust modifier is the major problem here as bottom top-app-bar widgets can have variable height.

[dpeter99]

Any progress on this issue? I mean the material.io website uses that exact layout. A top app bar with the tab layout for the Design, Components, Develop Resource tabs. I feel like the design system should at least support it's own website :)