Discussion on widget for showing, clearing multi-select

[mlinnem]

Hey y'all. Got some random micro feedback for you.

Two questions/comments re: the indicator on the multi select dropdown on this page... (http://www.carbondesignsystem.com/components/dropdown/code)

1. What do you think about making the pill a separate reusable component? We're currently hoping to use it in a slightly different context around filtering...

(initial pass on the code, not final)

2. We're not sure the pill itself reads as an interactive component, and/or whether users will get that clicking it means clearing the filter. Maybe the hover state can somehow draw attention to the X in the pill, to indicate that clicking performs a 'clear' operation? Just a first idea. Alternatively, maybe only the internal 'X' is the interactive component, and the pill itself is read-only.

[asudoh]

Thanks @mlinnem for bringing this up! The 1st one makes sense to me technically, but reading the 2nd one - Wondering if this is more of a design question?

[mlinnem]

@asudoh Yeah, #2 is definitely a design question. Is there a better place to bring that up?

[asudoh]

@IBM/carbon-designers What do you think? Thanks!

[designertyler]

Thanks @mlinnem I agree this design could be a little more clear. Here's a quick idea.

The cloud dashboard's filter behaves like this:

When there is one filter is shows the value of the filter "AI"

When there are multiple options it Changes to "Categories 2"

What I like about that is that it's almost saying "Categories = 2" to make it clear what the number represents. But, the X, label, and number aren't really working together.

What are your thoughts on this? It's more obvious what the clear button does, how many filters are applied, and relieves the pill from trying to play two roles.

Another thing to consider if you have a lot of filter options is a summary at the top so you don't have to search for which ones are on and can quickly clear individual ones.

[aagonzales]

@mlinnem maybe sync up with Virginia. I think she's done a lot of work around interactive tags for the console dashboard. But I think to your original question it would be ok to make the tag its own thing so it can be re-used.

I wish Tayler was still here she's the one that did a bunch of research into the the mutli-select dropdowns... there's a lot of functionality in a small area.

[mlinnem]

Ok y'all. So after exploring this entirely too much, we are liking option E on this chart, which happens to be what you already have :) Only one we think might be slightly better is L, which is just E with a pixel or two more space between the number and the X. But really we're just splitting hairs at this point.

I'll go ahead and close this unless y'all want to chew on it more.