eui
eui copied to clipboard
Change token `borderBaseFormsControl` to a more generic one and use it for Files uploader and Dashboards
Problem Statement
- While working on the Borealis update, we introduced a token named
borderBaseFormsControl, intended specifically for selection controls — such as the borders of checkboxes or radio buttons. The regularborderBasePlaintoken appeared too light for these smaller elements, and when placed alongside regular input fields, it looked visually unbalanced. - Later when we started working on inputs (specifically, file uploaders), we realized that the same problem exists with the borders that are dashed: either you have to make a border of such a dashed element thicker (which we do now, and which looks a little clumsy), or you have to make it darker to be nicely balanced with elements around
- Note: the same issue exists in Dashboards — they used a darker grey color for the 'edit dashboard' state to address this, but that color is not currently tokenized, which adds more inconsistency to our color system.
Proposed Solution
-
Instead of using
borderBaseFormsControltoken, introduce a new more generic token (name TBD, e.g.borderBaseProminent), which will be used for the cases there simple plain border doesn't look dark enough visually — e.g. dashed outline, or small elements like checkboxes/radio etc. Map it toshades-50/shades-80 -
Consider a hover token for it, that will be used the same way as plain border is used for inputs (become slightly darker on hover),
shades-70/shades-60: -
Apply it to the EuiFilePicker border and make it 1px width to look more elegant.
-
Create a follow-up issue to map the Dashboards use case to this token in Kibana (if there are some other places we might have the same problem, would be great if we spot those and create follow-up issues as well; we might also announce it it eui channel, that it's available now, and ask teams if they have such places from the top of their head).
Expected outcome
- When all that done, it should result in the following look for file pickers:
- For the dashboards, it shouldn't really change anything. visually (current color is just very slightly different from wha't s proposed)
- As for the radio / checkboxes, it won't have an immediate effect (because we haven't introduced hover effect for them yet), but the border will be just mapped to the right token, and in the future we'll have this.