[Combobox] Improve placeholder display / add support for placeholder icon

[macandcheese]

Description

The current implementation of the placeholder text leads to a weird space when there are icons present in the combobox items.

Current functionality:

Acceptance Criteria

We should:

• Accept a new placeholder-icon property to set a default icon.
• If placeholder-icon is not provided, left-align the placeholder text to remove the awkward space.

Relevant Info

Breakout from #3074.

Which Component

Combobox

Example Use Case

There are often times when having a prompt icon adjacent to the placeholder text could be useful. If a placeholder icon is not desired, the current empty space between the edge of the input and the placeholder text is not desirable.

[MonikaKanduri4525]

I would need the icon placeholder for the VTSE product. I'm using Combobox for folders and tags search (this is part of a new screen in VTSE). Could you please prioritize this issue?

[macandcheese]

@benelan could we bump priority of this? Should be a reasonably easy add.

[MonikaKanduri4525]

Also, It's very confusing to clear the input, it's not a straightforward way. Can we add a "clear button" on input for single-mode?

[macandcheese]

Also, It's very confusing to clear the input, it's not a straightforward way. Can we add a "clear button" on input for single-mode?

Yep, that is proposed as default here: #4738 (comment)

[github-actions]

Installed and assigned for verification.

[benelan]

@macandcheese can you help verify that this is the intended spacing when there is no placeholder-icon?

https://codepen.io/benesri/pen/VwXrMwR

[macandcheese]

Two pieces of feedback on that: It seems the example shown should use the same spacing as input :

It seems like there is extra padding on the left - and you can see there is a cursor change at the left side that coincides with that extra space.

I would also imagine the alignment between the value / placeholder with icon, and the spacing of the combobox items (when not nested), would align:

cc @ashetland for visibility.

[benelan]

Yeah I agree with that feedback. Assigning back to dev for some adjustments. Thanks Adam!

[macandcheese]

Ideally the spacing is the same, in that example the bullet dot is visually misaligned. IMO it would make sense to push it out to match the item with icon. When there is an icon and item is selected, I do find it weird the dot isn’t present, even if it pushes the icon over, it could still be aligned to the gutter of icon / bullet. We could also the icon the color of the dot to make it easier to tell when it’s selected.

[geospatialem]

Given the context of alignment to accommodate combobox with and without icons (info below)...

@jcfranco Should we proceed with closing and creating a new issue with this context or re-assigning this issue to the current or next sprint to tackle? Fairly low in prioritization, but seems pertinent for the 1.0.0 release.

Ideally the spacing is the same, in that example the bullet dot is visually misaligned. IMO it would make sense to push it out to match the item with icon. When there is an icon and item is selected, I do find it weird the dot isn’t present, even if it pushes the icon over, it could still be aligned to the gutter of icon / bullet. We could also the icon the color of the dot to make it easier to tell when it’s selected.

The recommended fix would include:

• Spacing the selection indicator in alignment with the icon (when present)
• Spacing the text in alignment regardless of icon presenc

[geospatialem]

Recirculating to a future sprint to meet the additional items in the comment above.

cc @jcfranco

[anveshmekala]

The recommended fix would include:

• Spacing the selection indicator in alignment with the icon (when present)
• Spacing the text in alignment regardless of icon present

Added fix for aligning selector indicator with the icon when present and text aligns regardless of icon. Do we need to add selector indicator for items with icons or would that be a separate discussion ?

cc @macandcheese

[macandcheese]

I think I'd expect it to also have in indicator, like dropdown, but cc @ashetland @SkyeSeitz for final design.

[SkyeSeitz]

I think I'd expect it to also have in indicator, like dropdown, but cc @ashetland @SkyeSeitz for final design.

Yup. 100% agree here.

[anveshmekala]

I think I'd expect it to also have in indicator, like dropdown, but cc @ashetland @SkyeSeitz for final design.

Yup. 100% agree here.

Can i get a Figma design for this one as matching with dropdown is bit of an issue with difference in padding for dropdown-item compared to combobox-item .

[geospatialem]

The original issue has been addressed above in the following Codepen. A new issue, 6287 was created to address the component's indicator icon when children have accompanying icons.

placeholder image:

no placeholder image (left-align):