UI issue with combobox

[kgoeltwilio]

Description

Hi Paste team,

We use comboboxes extensively throughout the Twilio Console, including in our API explorers where we use one for users to change their code language.

In the latest version of Paste, we've noticed that an additional span element has been introduced as a direct child of COMBOBOX_LIST_ITEM. This span has a white background-color, which is causing the list items to appear invisible and making it difficult for users to select them.

this is what is expected ( or was there earlier ) :

this is what is currently happening :

I've found this extra span element in the newer version of paste having white background as compared to the older version.
old version:

in new version:

You can check the code sandbox link ( I've replicated the same issue there )

Link to Reproduction

https://codesandbox.io/p/sandbox/clever-lamport-4k7w6v?file=%2Fsrc%2Findex.tsx%3A10%2C1

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Paste Core Version

21.3.0 ( latest )

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[dosubot]

Hi @kgoeltwilio! I'm Dosu and I’m helping the paste team.

This isn't caused by a new span being added—it's actually a result of a design token change. The span inside each combobox list item has always been there for layout, but its background color is set by a token that now resolves to pure white, making the items appear invisible on a white background. The relevant token is colorBackgroundWeaker, which now maps to {!palette-gray-0} (white) in the latest Paste version see source.

As a workaround, you can override the background color for the affected span using a custom style or by targeting the appropriate class in your CSS. For example:

[data-paste-element="COMBOBOX_LIST_ITEM"] > span {
  background-color: #f4f4f6; /* or another suitable color */
}

This will restore the visible background for list items until the underlying token mapping is updated. If you want to minimize future maintenance, consider wrapping this override in a theme or only applying it where the regression is visible. No official fix or workaround is documented upstream yet.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[serifluous]

Hey @kgoeltwilio ! Instead of using Customization Provider, which is only recommended for Twilio customers to use, you could use variant="inverse" on Combobox instead. See example here: https://codesandbox.io/p/sandbox/practical-jackson-hgphnv

[kgoeltwilio]

Hey @kgoeltwilio ! Instead of using Customization Provider, which is only recommended for Twilio customers to use, you could use variant="inverse" on Combobox instead. See example here: https://codesandbox.io/p/sandbox/practical-jackson-hgphnv

Hey @serifluous , using variant="inverse" only makes the input of the combobox in dark theme and not the list items. That's why we had to use CustomizationProvider to override some styles for the list items.
Hopefully with this change - #4348, we'll able to target the span element and achieve the desired styles. Please let me know when this would be released.