Problem/Motivation
There is currently no form validation for the validity of the input on the custom accent color input field on admin/appearance/settings/default_admin. The field only allows hex colors. If you are entering an invalid hex value by accident (either omitting the # or entering a none existing value) or even try entering another color format the preview color next to the input field on the left shows black square. but in light mode state and ui elements like the save button turns invisible, while in dark mode also state and ui elements turn invisible but their label remain barely visible in black against the dark background. See invalid_hex_value.mp4

The interesting detail also is that the appearance setting state and label are affected and hidden in light mode, same as the choice for layout density, active toggle switches and the button, while the choice for the accent color, the circle for the custom accent color gets shrinked and the border gets thicker on the main branch. while in the video and screenshot i have attached i still had the MR for #3636028: The active accent color is not communicated applied, that way the circle is not getting shrinked and the border remains with a normal width.
Steps to reproduce
- Go to
admin/appearance/settings/default_admin - choose the checkered accent color icon al the way to the right called custom accent color
- either omit the # or enter a none existent hex value
Proposed resolution
- Add a form validation for the custom accent color field that ensures that a valid hex value is in place so the interface is not breaking. The problem here is that the value is not getting applied on save but as soon as the field is loosing the focus. So the usual pattern to run a form validation on save is not applicable here.
- Extend the description for the custom accent color field and explicitly denote that a hex value should be entered, at the moment that is only communicated by the placeholder text as the default but it is not clear if other formats are allowed or not without try and error.
Remaining tasks
User interface changes
Introduced terminology
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | light_mode.jpg | 140.5 KB | rkoller |
| invalid_hex_value.mp4 | 367.03 KB | rkoller |
Comments
Comment #2
rkollerComment #3
rkollerComment #4
rkollerComment #5
rkollerComment #6
rkoller