MudTextField: Fix MudTextField label background

[charles7668]

Description

Close #6457
Close #9894

How Has This Been Tested?

Add a viewer page named OutlineLabelBackgroundTest

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)

before

after

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

All modified and coverable lines are covered by tests ✅

Project coverage is 91.50%. Comparing base (ff672a8) to head (ade6645).
Report is 25 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #10385      +/-   ##
==========================================
+ Coverage   91.43%   91.50%   +0.06%     
==========================================
  Files         418      418              
  Lines       13226    13227       +1     
  Branches     2538     2540       +2     
==========================================
+ Hits        12093    12103      +10     
+ Misses        554      549       -5     
+ Partials      579      575       -4     

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

[danielchalmers]

My concern is the lack of background contrast for Shrink Normal and Shrink Dense makes them hard to read.

Should probably keep the background color but take it from the field (or whatever's behind it)? I've tried to do that before though and don't have an answer.

[henon]

I think this PR makes the label better than it was before.

Clearly before was bad:

And I consider this case as a simple "don't do that":

Also, it didn't look good before either:

So we have a net win.

[Garderoben]

@charles7668 i found one bug. When Shrink Label is used or when the TextFields have a value they are always marked as focused even when they are not?

Left one is your branch, right one current mudblazor.

[charles7668]

@charles7668 i found one bug. When Shrink Label is used or when the TextFields have a value they are always marked as focused even when they are not?

Left one is your branch, right one current mudblazor.

Fixed

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Garderoben]

@charles7668 i found one bug. When Shrink Label is used or when the TextFields have a value they are always marked as focused even when they are not?
Left one is your branch, right one current mudblazor.

Fixed

Awesome thanks! I'm just gonna double check with @danielchalmers before i merge.

[danielchalmers]

I should be able to review on the weekend, thank you for the patience!

[danielchalmers]

My concern that the contrast is not enough is worked around by picking appropriate colors from the start (the test page shows how important it is)

I believe MUI works the same way

LGTM

[danielchalmers]

Thanks!

[timmac-qmc]

Not sure if I've missed something but this change looks awful on 8.0.0-rc.2

The label has a clear line through it as the background is now set to transparent:

[henon]

I wonder why it looks OK on our docs but not for you.

Can you reproduce this with try.mudblazor.com ?

[timmac-qmc]

I wonder why it looks OK on our docs but not for you.

Can you reproduce this with try.mudblazor.com ?

Assume the docs aren't using the pre-release which has the change. If you check the css it looks like the latest commit for the style isn't being used

https://github.com/MudBlazor/MudBlazor/blob/77720255c6dd7e94ebe5dea848a2a450c64d3fc7/src/MudBlazor/Styles/components/_inputlabel.scss

[henon]

You are right about the docs running a v7 version. But we also have dev.mudblazor.com which runs current development branch head and it seems ok there too:
https://dev.mudblazor.com/components/textfield#form-props-shrink-label

[timmac-qmc]

Found the cause, I had bootstrap.min.css included in my index.html in particular it was overwriting the <legend> properties
Removing it resolved the issue.