Combobox: update CSS to use new tokens #3328
Conversation
|
|
Think I need some help later with scrollbar-gutter styling... 🤔 ... this could look better EDIT: done |
Storybook demo1c82e961b | 91 komponenter | 135 stories |
… fine), use tokens
|
from 441 lines of CSS to.... 🥁🥁🥁 452 womp womp 🎺 (I think the actual character count might be lower though 🙏 ) |
yupp, confirmed some CSS savings 💰 This is despite the fact that our new prefix is 1 character longer ( |
| .navds-combobox--error { | ||
| .navds-combobox__wrapper { | ||
| border-radius: var(--ax-border-radius-medium); | ||
| outline: 3px solid var(--ax-border-danger-strong); |
There was a problem hiding this comment.
Error "border" is 2px. We have solved this by setting border-color to danger and adding a 1px box-shadow with danger. This allows creation of a 2px "border" without changing border-width, and allowing regular focus with "outline" to remain --ax-border-focus.
There was a problem hiding this comment.
matching the border color with the outline / box shadow should work for this yeah. We still want to use outline > box-shadow right (in general)?
There was a problem hiding this comment.
The change from box-shadow -> outline is mainly for focus-handling. For other use-cases (like the error-border) box-shadow is fine i think 👍
There was a problem hiding this comment.
hmm, men er litt fan av å bare ha "one thing" her
må holde to ting in sync (kan skape en del slike visuelle bugs med 2 borders), og mer CSS å skrive (laste ned, parse) 🤔. Setter man bare fargen til outline på error == ganske KISS, og er vel ikke teknisk sett feil? 🤔 (jeg har også en distaste for box-shadow pga subtle floating point math som er litt forskjellig på tvers av browsere... er kanskje det samme for outline? 😳 )
There was a problem hiding this comment.
But how would focus be handled then, focus should always be --ax-border-focus-color where possible 🤔
There was a problem hiding this comment.
This would be fine right? (you can't have both error and focus outlines at the same time in this case, but that's usually fine, since when you're entering a value, it doesn't need to be red to draw our attention anymore 🤔 )
I think it could matter since change of color when you are in an error-state often indicates that the error is gone. Made a demo with the two version here, should probably sync this with the designers since this will be the case for textfield, textarea, select etc also
There was a problem hiding this comment.
did some exploratory changes to that demo https://play.tailwindcss.com/ax4OXSQvO6?file=css, here I set negative offsets to outline-offset to have it "fully cover" the border at rest. I made the original border green so you can see the changes, (in your demo the width of the leftmost one would "shrink" as half of it moved away.
There was a problem hiding this comment.
Might be missing something, but input[data-v="1"] uses a 2px border-width in the new example, something we can't do in code since it will cause shifts in layout. We can take this discussion in a huddle if that's faster 📞
There was a problem hiding this comment.
Ah, then i'll leave it the way it is (1px border that turns red when error, 1px box shadow red when error) + 2px outline blue with offset 2 due to focus. The same as v2 in the example. 👍
There was a problem hiding this comment.
Might need to be fixed before merge: https://www.figma.com/design/ND5PkXtAe80PZDZQaDsvjj?node-id=11-1299&m=dev#1022025089
|
JulianNymark
changed the title
|
|
| .navds-combobox--error { | ||
| .navds-combobox__wrapper { | ||
| border-radius: var(--ax-border-radius-medium); | ||
| outline: 3px solid var(--ax-border-danger-strong); |
There was a problem hiding this comment.
Might need to be fixed before merge: https://www.figma.com/design/ND5PkXtAe80PZDZQaDsvjj?node-id=11-1299&m=dev#1022025089
The figma links seems to not go to a specific element, but I reckon it's the new one with error message right? |
Yes was a link to the figma-comment 👍 Can see how its implemented in the TextField-PR for reference if that helps |
Description
closes https://github.com/navikt/team-aksel/issues/668
Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")