MudTabs: add WrapHeaders (reverted)

[ZephyrZiggurat]

Description

Adds WrapHeaders parameter to MudTabs. If true, tab headers will wrap instead of scroll.

resolves #6758

How Has This Been Tested?

Visually in docs and added WrapHeaders test.

Type of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (fix or improvement to the website or code docs)

Checklist

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[codecov]

Codecov Report

Attention: Patch coverage is 89.18919% with 4 lines in your changes missing coverage. Please review.

Project coverage is 90.65%. Comparing base (28bc599) to head (57c30e3).
Report is 256 commits behind head on dev.

Files	Patch %	Lines
src/MudBlazor/Components/Tabs/MudTabs.razor.cs	89.18%	2 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #9108      +/-   ##
==========================================
+ Coverage   89.82%   90.65%   +0.82%     
==========================================
  Files         412      398      -14     
  Lines       11878    12420     +542     
  Branches     2364     2418      +54     
==========================================
+ Hits        10670    11259     +589     
+ Misses        681      623      -58     
- Partials      527      538      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ScarletKuro]

It might be a noob question, but @danielchalmers, do you happen to know if a pure CSS solution is possible? Is it really not possible to have a responsive grid without JavaScript for something as simple as an inline header on resize?

[ZephyrZiggurat]

It might be a noob question, but @danielchalmers, do you happen to know if a pure CSS solution is possible? Is it really not possible to have a responsive grid without JavaScript for something as simple as an inline header on resize?

If the slider could just be directly inside the tab header element it's possible, but then the slider animation won't function. That's my understanding at least, but I definitely could be wrong.

[danielchalmers]

Btw I tested it and the slider position breaks if you maximize the window.

For pure CSS, are you able to add a flex-wrap: wrap to .mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper and remove width: max-content, then change the way the transform is done?

[ZephyrZiggurat]

For pure CSS, are you able to add a flex-wrap: wrap to .mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper and remove width: max-content, then change the way the transform is done?

That's exactly what I did to make the headers inline. (I prevent the transform from updating so there's no scrolling.)
Do you have any ideas on a cleaner way to position the slider?

Btw I tested it and the slider position breaks if you maximize the window.

If there's no better ideas (see above)... i'll have to play with it some more. The resize events are tricky 🙁

[danielchalmers]

Yeah with the way the slider works JavaScript could make the most sense. I wonder if there's any appetite to change the animation to something more modern (no slider)

[ZephyrZiggurat]

(does it ping people when more commits are added?)

The slider is positioning correctly when the window gets resized now.

[henon]

We need a better parameter name. I suggest Wrap="true" instead.

[ZephyrZiggurat]

We need a better parameter name. I suggest Wrap="true" instead.

I was worried simply Wrap would be ambiguous. How about TabHeadersWrap or HeadersWrap? I think it should be something that doesn't imply the body might be affected too.

[Anu6is]

WrapHeader

[henon]

I think it should be something that doesn't imply the body might be affected too.

Fair enough, WrapHeaders then.

[henon]

This PR seems to cause a regression: #9167

[henon]

Regression fixed by #9205

[henon]

This has been reverted in #9234, the reasons are stated in that PR