Clarify Chip and Label use case

[marshmalien]

Describe the issue. What is the expected and unexpected behavior?

Seeking clarity on when to use the Chip and Label components. In the chip documentation, “Chips are used to communicate a value, a tag, or a set of attribute-value pairs within workflows that involve filtering or tagging a set of objects.” From what I can glean, that appears to be the only contextual distinction between a chip and label. That application satisfies most of our use cases, except for when we need a chip that triggers actions such as navigation.



Our stopgap solution for chip navigation is to wrap the Label component with React Router’s Link component. This creates a new issue where we lose the ability to hide/show and categorize these elements, which leaves us with two options: Create a custom Label Group component or create a custom navigation Chip.

We're looking for an element that could be used within an input, filter, and used as an action item. More essential features include:

• Displays text and icon content
• Read-only
• Closable
• Linkable
• Expand/Collapsible
• Categorizable

Mockup for more context

1. Within this context, is it appropriate to use the Chip Group toolbar when categorizing Credential tags?
2. Clicking the blue Inventory tag should trigger navigation. Same for the Credential Machine and Cloud tags. Is it possible to create a chip variant that can navigate or trigger other contextual actions?
3. None of the above is a "filtered" or "selected" item. If we can't use a Chip, what do we use instead?
4. Would it be better to expand the Chip use case? Or possibly merge the Chip and Label components which users can then configure through variants?

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Enhancement

Related PF-React Issue: https://github.com/patternfly/patternfly-react/issues/3829 Related PF-Core Issue: https://github.com/patternfly/patternfly/issues/1837

What is your product and what release version are you targeting? Tower

[tlabaj]

cc @mcarrano

[mcarrano]

@marshmalien We have recently been rethinking our story around labels and chips and will be releasing some updates in our upcoming breaking-change release. Labels have been completely redesigned and will include many of the features you are looking for. There is an open PR here if you want to take a look at the new direction: https://github.com/patternfly/patternfly/pull/2943

We decided to keep chips simple and restrict these to current usage like showing active filters in a toolbar and in select lists. Therefore I think that you want to be using labels for these use cases. The only thing we don't have in the works right now is the ability to group labels like you are showing in your designs. But I think that makes sense as something we should support (i.e., define a Label Group that is analogous to a Chip Group). We would need to get this on our roadmap, but I think it would be a pretty straight forward add once the new labels are introduced.

Let me know if this all makes sense and if you see anything else missing after reviewing the new designs for Labels.

[marshmalien]

Adding support for Label Group sounds like the best way to move forward. Hopefully the Label Group implementation will be straightforward and capable of providing all of the same features shown in Chip Group. I checked out the new label direction and they look fantastic. The label link hover behavior is 
💯

[mcarrano]

I have opened a new design issue here: https://github.com/patternfly/patternfly-design/issues/845 @marshmalien can you tell me more about your timeframe? I can work with @LHinson to get this on our roadmap.

[marshmalien]

Does sometime within the next 6 months sound reasonable? We could use Label without overflow and grouping behavior in our detail views until Label Group lands.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.