Expose custom property for mwc-tab min-width

[elalish]

I have 5 icon tabs running just fine using <mwc-tab> v0.18.0: https://modelviewer.dev/editor/

If I update to v0.21 or v0.22.1, I get only four, with a horizontal scroll to find the fifth, which is definitely not what I want. Tracking it down, there now appears to be a min-width: 90px set inside your shadow root where I can't get to it. I was hoping adding your minWidth attribute (described as "Shrinks tab as narrow as possible without causing text to wrap.") would do the trick, but alas no. You can find our tab code here: https://github.com/google/model-viewer/tree/master/packages/space-opera/src/components/shared/tabs

Is there any way around this breaking change that doesn't seem to be mentioned in the release notes?

[allan-chen]

Hey Emmett,

This change was added in this MDC pull request to align tabs to the material.io spec:

Is it possible to adjust the me-tabs min-width and max-width to 450px to accomodate this change?

[elalish]

I don't think that's a great solution. Take a look at my link above; the tabs don't have text, just icons, so they look pretty ridiculous at 48px high and 90px wide.

[allan-chen]

We'll look into possibly supporting customizing this min-width property. At the same time, we can clarify with the UX folks whether icon-only tabs should also adhere to the min-width. This screenshot indicates that might be the case:

For future visual reference re: the tabs in question, Before:

After:

[asyncLiz]

With M3 you can now set min-width directly on a <md-tab>