fix(dropdown,listbox,listbox-multi): fixing issues with clicking options and focus ring with mouse #11
Conversation
…ons and focus ring with mouse
|
Demo will be published at https://apps.inindca.com/common-ui-docs/genesys-webcomponents/feature/COMUI-2342 |
jordanstith15
changed the title
|
Having issues figuring out why using keyboard navigation adds an extra pixel on the four corners of the listbox only in Chrome. Any ideas would be appreciated |
Can you post a screenshot of what you are seeing |
A screenshot is here in the figma, second column under |
jordanstith15
changed the title
…eature/COMUI-2342
| &:focus-within:has(:focus-visible) { | ||
| @include focus.gux-focus-ring; | ||
| } |
There was a problem hiding this comment.
You wont be able to use the :has selector unfortunately as its not supported by firefox. There probably is some sort of workaround though :(
There was a problem hiding this comment.
Yeah I know. this is a case though that I don't think it's a super big deal unless it breaks the css entirely.. iirc all this one does is show the focus while you're typing after hitting enter during keyboard navigation or clicking on a filterable dropdown, which might be weird anyways
|
Is it possible to to make the |
that is a token issue with the padding. UX already knows and I think has a fix ready for whenever they can set up tokens on the new repo |
|
In the |
There is a token for gap (--gse-ui-tag-removable-gap), but it's set to 4px. Just using the flexbox gap wouldn't work due to that gap being only in specific situations (that is the only situation now but wanted to leave open for future), so I set it as margin-left on the remove icon. |
| <slot></slot> | ||
| </div> | ||
| ) as JSX.Element; | ||
| return (<slot slot="popup"></slot>) as JSX.Element; |
There was a problem hiding this comment.
do we need this one line of code in its own function or can we declare it inline from where this function is called?
There was a problem hiding this comment.
I prefer to keep it as a separate function, especially for any possible future changes. But no strong reasons otherwise
| @@ -28,6 +28,7 @@ | |||
| outline: var(--gse-ui-menu-option-focus-border-width) | |||
| var(--gse-ui-menu-option-focus-border-style) | |||
| var(--gse-ui-menu-option-focus-border-color); | |||
| outline-offset: -2px; | |||
There was a problem hiding this comment.
should we add a token for this or document it needs a token?
There was a problem hiding this comment.
I'm unsure if we should. This is kind of going against the design because the exact design doesn't work correctly. I think we will be discussing this with UX at some point
Closes COMUI-2342 and COMUI-2359