MudColorPicker: Make color field resizable. Closes: #8717

[digitaldirk]

Description

Added height/width public properties (that update private _maxX/_maxY) so the color field spectrum can be resized. Before this PR, changing the css for the color field would only visually update the color field, and it would not let you use the full range of colors (details in issue). Also changed color field css to have margin-left/right 50% so the color field is centered.

When going past the default 312px width the ui elements below the color field are aligned left, do we want a different behaviour? (see in demo gif below)

Closes #8717

How Has This Been Tested?

Visually tested in docs. Added example on docs page.

<MudStack>
  <MudColorPicker ColorFieldHeight="@height" ColorFieldWidth="@width" PickerVariant="PickerVariant.Static" />

  <MudSlider Min="0" Max="300" @bind-Value="height">Height: @height.ToString()</MudSlider>
  <MudSlider Min="0" Max="500" @bind-Value="width">Width: @width.ToString()</MudSlider>
</MudStack>

@code {
  double height { get; set; } = 125;
  double width { get; set; } = 156;
}

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

All modified and coverable lines are covered by tests ✅

Project coverage is 90.10%. Comparing base (28bc599) to head (5558990).
Report is 80 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #8744      +/-   ##
==========================================
+ Coverage   89.82%   90.10%   +0.27%     
==========================================
  Files         412      419       +7     
  Lines       11878    12192     +314     
  Branches     2364     2396      +32     
==========================================
+ Hits        10670    10986     +316     
+ Misses        681      668      -13     
- Partials      527      538      +11     

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

[danielchalmers]

Could you add tests to make sure it works the same across different sizes?

Controls should stay centered.

I think we should consider the ability to use relative scaling (ex: rem/em) units in addition to pixels.

Would it be possible as a user to style it entirely in CSS so you could have it stretch to the viewport without having to specify the dimensions?

Does it impact any other modes than Spectrum?

[digitaldirk]

Could you add tests to make sure it works the same across different sizes?

Yes I can add tests.

Controls should stay centered.

I will look into the css to do so.

I think we should consider the ability to use relative scaling (ex: rem/em) units in addition to pixels.

That sounds like a good addition, but I would probably need help/examples/more research.

Would it be possible as a user to style it entirely in CSS so you could have it stretch to the viewport without having to specify the dimensions?

The problem with only doing this with CSS is that visually it would work, but the range of colors is driven by the _maxX/_maxY variables. (See first image in #8717)

Does it impact any other modes than Spectrum?

Not that I can find. _maxX/_maxY is only used when doing things with the selector in the color field spectrum or when the color is set (but only to position the selector)
@danielchalmers

[digitaldirk]

I found it actually does affect other modes (grids and palette) looking into fixes that would either exclude those from being affected or find ways to make them resize properly.
@danielchalmers

[danielchalmers]

do you think it would be difficult to re-architecture it in a way that it is not dependent on pixels to calculate the colors?

then we could do things like have a size property or scale it by font size

also I think it could be worth having the entire controls along with the field scale together in that case

[ScarletKuro]

Such code is forbidden since v7 started and we slowly getting rid of logic in parameter setters and getters, because of this:
dotnet/aspnetcore#26230 (comment)
Read https://github.com/MudBlazor/MudBlazor/blob/dev/CONTRIBUTING.md on how to use ParameterState framework + use other components that already using it for the reference and real usage.

[digitaldirk]

Thank you I will read up on this and fix that code.

Got the other views semi working.

Might not get back to this until a few days.