digdir
Visual inconsistencies between `Popover.Trigger` in Figma and code
Description: There are visual inconsistencies between how Popover.Trigger is designed in Figma and how it appears in the implemented code. This may lead to confusion for teams trying to align design and development.
Figma:
Code:
There are a few issues with this being blue:
We would need to use our info color, we don't know the consumers name on colors. Inherithing from data-color will result in this being neutral 99% of the time, since this is meant for inline text. There is no way around this, unless only the text inside this trigger should have a different text color.
Some other things to keep in mind:
- Since we need to use our info, it might not fit with the consumers design.
- No way of changing it unless you use CSS
I suggest going with how it is in code today, since this already supports multiple colors, depending on your text color.
What we can do, is add the background, but this would also need to be our info - or the users closest data-color.
Would it be an option to use main-border-strong? It might not be essential that the color is blue specifically—what matters more is that it aligns with the link color, which also uses main.
We could also use a background color based on main (main-surface-tinted), it doesn’t have to be specifically blue. The important thing is consistency with other elements. Would that approach work? :)
Would it be an option to use main-border-strong? It might not be essential that the color is blue specifically—what matters more is that it aligns with the link color, which also uses main.
We could also use a background color based on main (
main-surface-tinted), it doesn’t have to be specifically blue. The important thing is consistency with other elements. Would that approach work? :)
No. main is only a namespace in figma. In code we have no relationship with "main" or "support". In code we only know the names of the colors we supply. Neutral and severity colors.
We’ve decided that the context in which this is placed will determine the color. Unless something else is explicitly set, the default will be neutral.
- Figma will be updated with a variant using the neutral color (Fixed by @mrosvik)
- Code will be updated to include a background for the active state, with neutral-subtle as the default. (Fixed by @Barsnes)
Done in Figma:
Adding a background is not possible without javascript. The button does not know when it's popover is open.
If we do this with JS, it means that CSS only consumers won't get the same functionality.