Inconsistent "remove" button markup between List and Chips

[danielwrobert]

Summary

The "Remove Item" button on the Active Filters block is implemented differently between the List and Chips views.

The Chips view uses the chip component, which renders an Icon component from for the remove button.

The List view renders an embedded SVG from the renderRemovableListItem util component.

This results in slightly different visual output (see below) and behavior (e.g., color adjustment application).

List view:

Chip view:

Proposed solution

Ideally both views would render the same element. This would result in visual consistency between views, as well as consistent behavior when applying settings from within the editor. Additionally, this would be easier to reason about and maintain in the code base.

[vivialice]

Oh I see what you were talking about in the other issue! So ignore my silly question there 😅

I went with this approach of two different layouts to have better visual alignment in the list option. Because positioning the delete icons to the left in the chips isn't consistent with a typical chip pattern, I don't want to change this.

[danielwrobert]

I went with this approach of two different layouts to have better visual alignment in the list option. Because positioning the delete icons to the left in the chips isn't consistent with a typical chip pattern, I don't want to change this.

Yeah, I agree! I'm specifically referring to the icons themselves here. They're essentially different icons - the list items use a raw, embedded SVG where the chips use the Icon component from the @wordpress/icons library.

FWIW, this is a relatively minor issue. I noticed it when I was applying selections from the editor and the remove buttons would take on the inherited styles a little differently from one another because one is a React component and the other is not.

That said, do you think it be better if those were consistent icons (keeping the same layout/positioning, as you noted)?

[vivialice]

Yeah, I agree! I'm specifically referring to the icons themselves here. They're essentially different icons - the list items use a raw, embedded SVG where the chips use the Icon component from the @wordpress/icons library.

Ahh thanks for this clarification! I get what you mean now. I think in that case, we should use the existing Wordpress icon component. Thanks for raising this :)