Skip to content

Color Picker: Validate uniqueness of selected colors #20431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndyButland merged 8 commits into from
Oct 9, 2025
Merged

Color Picker: Validate uniqueness of selected colors #20431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
38fc391
Added unique color checker to color picker.
Programeerik Oct 9, 2025
bbd1b68
Added Unittest for duplicates
Programeerik Oct 9, 2025
bb0e1b7
optimized for codescene
Programeerik Oct 9, 2025
ca73be9
removed the bump and simplified the function
Programeerik Oct 9, 2025
9e5e44b
Merge branch 'main' into v16/bugfix/20359-color-picker-validate-unique
AndyButland Oct 9, 2025
5183864
Fixed behaviour for duplicate checks so unit test passes.
AndyButland Oct 9, 2025
e743e74
Adds continue so invalid colors aren't checked for duplicates.
AndyButland Oct 9, 2025
fdeb1d0
Merge branch 'main' into v16/bugfix/20359-color-picker-validate-unique
Programeerik Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 48 additions & 5 deletions src/Umbraco.Infrastructure/PropertyEditors/ColorPickerConfigurationEditor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,29 @@

namespace Umbraco.Cms.Core.PropertyEditors;

internal sealed class ColorPickerConfigurationEditor : ConfigurationEditor<ColorPickerConfiguration>
internal sealed partial class ColorPickerConfigurationEditor : ConfigurationEditor<ColorPickerConfiguration>
{
/// <summary>
/// Initializes a new instance of the <see cref="ColorPickerConfigurationEditor"/> class.
/// </summary>
public ColorPickerConfigurationEditor(IIOHelper ioHelper, IConfigurationEditorJsonSerializer configurationEditorJsonSerializer)
: base(ioHelper)
{
ConfigurationField items = Fields.First(x => x.Key == "items");
items.Validators.Add(new ColorListValidator(configurationEditorJsonSerializer));
}

internal sealed class ColorListValidator : IValueValidator
internal sealed partial class ColorListValidator : IValueValidator
{
private readonly IConfigurationEditorJsonSerializer _configurationEditorJsonSerializer;

/// <summary>
/// Initializes a new instance of the <see cref="ColorListValidator"/> class.
/// </summary>
public ColorListValidator(IConfigurationEditorJsonSerializer configurationEditorJsonSerializer)
=> _configurationEditorJsonSerializer = configurationEditorJsonSerializer;

/// <inheritdoc/>
public IEnumerable<ValidationResult> Validate(object? value, string? valueType, object? dataTypeConfiguration, PropertyValidationContext validationContext)
{
var stringValue = value?.ToString();
Expand All @@ -46,17 +53,53 @@ public IEnumerable<ValidationResult> Validate(object? value, string? valueType,

if (items is null)
{
yield return new ValidationResult($"The configuration value {stringValue} is not a valid color picker configuration", new[] { "items" });
yield return new ValidationResult($"The configuration value {stringValue} is not a valid color picker configuration", ["items"]);
yield break;
}

var seen = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
var duplicates = new List<string>();
foreach (ColorPickerConfiguration.ColorPickerItem item in items)
{
if (Regex.IsMatch(item.Value, "^([0-9a-f]{3}|[0-9a-f]{6})$", RegexOptions.IgnoreCase) == false)
if (ColorPattern().IsMatch(item.Value) == false)
{
yield return new ValidationResult($"The value {item.Value} is not a valid hex color", new[] { "items" });
yield return new ValidationResult($"The value {item.Value} is not a valid hex color", ["items"]);
continue;
}

var normalized = Normalize(item.Value);
if (seen.Add(normalized) is false)
{
duplicates.Add(normalized);
}
}

if (duplicates.Count > 0)
{
yield return new ValidationResult(
$"Duplicate color values are not allowed: {string.Join(", ", duplicates)}",
["items"]);
}
}

private static string Normalize(string? value)
{
if (string.IsNullOrWhiteSpace(value))
{
return string.Empty;
}

var normalizedValue = value.Trim().ToLowerInvariant();

if (normalizedValue.Length == 3)
{
normalizedValue = $"{normalizedValue[0]}{normalizedValue[0]}{normalizedValue[1]}{normalizedValue[1]}{normalizedValue[2]}{normalizedValue[2]}";
}

return normalizedValue;
}

[GeneratedRegex("^([0-9a-f]{3}|[0-9a-f]{6})$", RegexOptions.IgnoreCase, "en-GB")]
private static partial Regex ColorPattern();
}
}
20 changes: 20 additions & 0 deletions tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/ColorListValidatorTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,24 @@ public void Validates_Color_Vals()
PropertyValidationContext.Empty());
Assert.AreEqual(2, result.Count());
}

[Test]
public void Validates_Color_Vals_Are_Unique()
{
var validator = new ColorPickerConfigurationEditor.ColorListValidator(ConfigurationEditorJsonSerializer());
var result =
validator.Validate(
new JsonArray(
JsonNode.Parse("""{"value": "FFFFFF", "label": "One"}"""),
JsonNode.Parse("""{"value": "000000", "label": "Two"}"""),
JsonNode.Parse("""{"value": "FF00AA", "label": "Three"}"""),
JsonNode.Parse("""{"value": "fff", "label": "Four"}"""),
JsonNode.Parse("""{"value": "000000", "label": "Five"}"""),
JsonNode.Parse("""{"value": "F0A", "label": "Six"}""")),
null,
null,
PropertyValidationContext.Empty());
Assert.AreEqual(1, result.Count());
Assert.IsTrue(result.First().ErrorMessage.Contains("ffffff, 000000, ff00aa"));
}
}