TextField color editor should accept default value with #RRGGBB format

[hishamco]

Fixes #18120

Now we are not accepting color in #XXX format to prevent displaying black color all the time

[Skrypt]

@hishamco This will add a model state error when someone tries to set it to #000.
Meaning that the form will simply not POST and allow to save the content item if the value is not appropriate.
It is also missing the default value from the field settings applied to the color picker on "create".

Here:

OrchardCore/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-Color.Edit.cshtml

Line 10 in e8d239b

<input asp-for="Text" class="form-control content-preview-text" type="color" style="min-height: 2.25rem" />

[hishamco]

@hishamco This will add a model state error when someone tries to set it to #000.

Yes, because that's the mean reason when you set any value with such format it shows black all the time

It is also missing the default value from the field settings applied to the color picker on "create".

I will double check, I am afraid that I did it in other PR ;)

[Skrypt]

hmm, I maybe made a mistake because the default value is maybe affected in the driver. I will pull your PR and test it.

[Skrypt]

Ok nevermind, it works in dev branch. The default color gets applied.
See:

But your PR makes sense too.

[Skrypt]

Actually, the string format should be #XXX to a minimum and #XXXXXXXX to a maximum.

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

[Skrypt]

So, I'm not sure if the modelstate error makes sense because it should validate only when the value is required. Else an empty string should be allowed. But here is my point, this color editor doesn't allow to return a string empty which is why I was looking to "negate" that color with a color picker that allows to set also opacity. That's kind of a hack but that would have worked. Else, we need a checkbox to display the color picker to pick a color or not.

if field is required = show checkbox before color picker
if field is not required = show only color picker

if we want opacity picker = maybe use a javascript component that allows it. Or set a third textbox to enter the value as text.

[hishamco]

Actually, the string format should be #XXX to a minimum and #XXXXXXXX to a maximum.

I agree but due the limitation of the input type color, we can't do that unless we do the conversion behind the scene

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color

[Skrypt]

Yeah, I think we need a javascript component because using a separate component for the opacity will look bad. Not to mention that it needs to support single char opacity for a 4 chars color hex and also 2 chars for the 8 char hex. I think the input type="color" is simply not enough.

And the reason why the input type="color" return #000 by default is that it is not even set by default to hex but to RGB.

[hishamco]

I could tweak this PR to support both RGB & RRGGBB. If we agreed with the Alpha that's in another PR we could support RGBA and RRGGBBA too

[hishamco]

@Skrypt I added the support for #RGB format as well

[Skrypt]

Normally we should do a check if (model.Required == true) too here. But only if we add a checkbox on the view to allow returning a null value "or empty string".

[hishamco]

Allow returning null might break the input color

[Skrypt]

Ok, if we have opacity it is fine enough for now. We can take a look at adding an option to the "coloris" js component later on. Need to see if community would agree too.

At the same time, these HTML input types are really ugly and too simple. I would rather use that "coloris" component right away, but that's me. 😉

[Skrypt]

I did a quick research and I think this component would work:

https://github.com/melloware/coloris-npm

Different pull request though.

I tested this color picker and it allows to set it to an empty string value.

[github-actions]

It seems that this pull request didn't really move for quite a while. Is this something you'd like to revisit any time soon or should we close? Please comment if you'd like to pick it up.

[github-actions]

This pull request has merge conflicts. Please resolve those before requesting a review.

[gvkries]

If we also want this validation of the default value in the text field driver, it must be slightly updated because of PR #18361.

The default value for the color picker now supports all formats, including the alpha channel:

#RGB // The three-value syntax
#RGBA // The four-value syntax
#RRGGBB // The six-value syntax
#RRGGBBAA // The eight-value syntax

Also, a default value is required for the input tag, but the color editor takes care of that. So in the settings, a default value is not required anymore.

[hishamco]

@gvkries because I didn't follow up with you related PR, is there a need for this PR or should I react to your change then we could merge this?

[gvkries]

It's not required, but I think this is still nice to have.

[gvkries]

It is not necessary to convert the default value to the format #RRGGBB, this is now handled by the editor. In addition, the default value should allow all possible formats, including those with an alpha channel.