MudSelect: Add FitContent Parameter

[Anu6is]

Description

Currently, there is no way for a MudSelect to size itself based on its contents. Since the MudSelectItems aren't rendered until the MudSelect is opened, there actual items and their lengths are unknown to the DOM for sizing. This change introduces the following changes

• Adds a new FitContent Parameter
• Applies the mud-width-content class to the MudSelect when FitContent is true

Setting FitContent does the following

• Sets style=max-width: min-content
  • overrides FullWidth if set
  • maximum width will be the smallest possible width that allows the content to fit without overflowing
• Renders a hidden div the size of the longest registered MudSelectItem with the following considerations
  • Includes room for the Clearable icon
  • Includes room for the Placeholder text
  • Includes room for the AdornmentText or AdornmentIcon
  • Includes room for the string generated by the MultiSelectionTextFunc
  • Includes room for the label, if the label is used as a the placeholder

Resolves: #2420
Resolves: #10868

FitContent.mp4

Doc entry

How Has This Been Tested?

Visually - updated all test viewer cases to include a FitContent toggle. Also reviewed all doc examples with Fit Content set to false

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 76.92308% with 3 lines in your changes missing coverage. Please review.

Project coverage is 91.05%. Comparing base (68a2118) to head (28d4e5a).
Report is 1 commits behind head on dev.

Files with missing lines	Patch %	Lines
src/MudBlazor/Components/Select/MudSelect.razor.cs	76.92%	0 Missing and 3 partials ⚠️

❌ Your patch status has failed because the patch coverage (76.92%) is below the target coverage (100.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #10894      +/-   ##
==========================================
- Coverage   91.05%   91.05%   -0.01%     
==========================================
  Files         429      429              
  Lines       13965    13978      +13     
  Branches     2698     2703       +5     
==========================================
+ Hits        12716    12727      +11     
+ Misses        646      645       -1     
- Partials      603      606       +3     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[versile2]

So I like the thought behind this and I think we are close but there are two hurdles I see.

1. By setting the max-width to min-content it also means we can't increase the width. If we are unlocking the Fullwidth property we shouldn't constrain it.
2. As you can see in the below screenshot, missing something. The behavior shouldn't have changed, even with the precautions you took into account.

As a subset of both of these issues the issue might perhaps be in that the mud-width-content class is on the container, perhaps that's something that should be on your hidden element or at least below container? I didn't spend long enough in it to figure it out though. Also from working with MudInput tirelessly keep in mind the styling (particularly noticable in filled mode) is only ever tracked to the input (for some reason)

Previous Behavior

New Behavior

[Anu6is]

So I like the thought behind this and I think we are close but there are two hurdles I see.

1. By setting the max-width to min-content it also means we can't increase the width. If we are unlocking the Fullwidth property we shouldn't constrain it.
2. As you can see in the below screenshot, missing something. The behavior shouldn't have changed, even with the precautions you took into account.

I've decided to leave FullWidth as is and introduce FitContent. This should address both issues raised. While you still can't increase the width as you mentioned, I believe fit content conveys that intent. The screenshot is simply the behaviour of setting FullWidth to true, that exists currently. So I'll be leaving the current true/false behaviour of FullWidth intact

[versile2]

It does exactly what you say it does and doesn't have any negative impact on previous setups. I'm not sure I'm in love with it but it does solve two old issues. Wish we could have made the fullwidth work without negative impact.

[danielchalmers]

Hi, would you mind adding some screenshots - Not able to check out the branch and see for myself at the moment

[henon]

After fixing the xmldoc I think we are ready to merge.

[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

[henon]

Thanks @Anu6is !