fix(list-item): Make width of caret icon consistent with selection icon

[driskull]

Related Issue: None

Summary

• Currently, the hit area for the expand/collapse of a list item is a bit small. (18px)
• This adds padding consistent with the selection icon

Current

New

[jcfranco]

Code changes LGTM!

@SkyeSeitz @ashetland Could you give this a looksie? 🔍👁️‍🗨️👄👁️‍🗨️

[ashetland]

This seems to conflict a bit with what I put together for issue #7100 slated for December (Figma file).

[driskull]

This can wait for December if necessary.

Looking at the design, it would be nice if the design included the hit area for the caret, selection, etc. It looks like its just putting padding in-between the icons but not really showing each icon's hit area. Would the icon include 6px padding on each side?

[driskull]

I guess for this release I was hoping to improve the hit area of the caret without messing with the other paddings. Can we do that?

[ashetland]

It looks like its just putting padding in-between the icons but not really showing each icon's hit area.

Great catch! Yep, those designs will be revised to include hit areas. I actually started looking into that for #6700, but stopped because it wasn't relevant to the issue 🤦‍♂️. That Figma file also calls for changing the caret to a chevron for system consistency.

Due to all the related issues, it might be worth holding off for now? Merging this would up the space between the chevron and the next element to 2rems which is a lot and doesn't improve the visual hierarchy when nesting.

[ashetland]

Would the icon include 6px padding on each side?

That sounds right, but I recall some of the paddings getting tweaked depending on whether or not there was nesting.

[driskull]

Yeah lets just close this and wait for december.