question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Clarify Chip and Label use case

See original GitHub issue

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

image (5)

  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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
marshmaliencommented, Apr 16, 2020

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.

0reactions
stale[bot]commented, Jun 17, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chips - Material Design
Input chips represent information used in fields, such as an entity or different ... Filter chips use tags or descriptive words to filter...
Read more >
Chip | Cedar Design System | REI Co-op - GitHub Pages
Use chips to directly specify, dynamically categorize or immediately perform a ... Start with a capital letter; Use sentence case; Avoid long labels...
Read more >
Amazon SageMaker Clarify Bias Detection and Model ...
Amazon SageMaker Clarify Processing – Use SageMaker Clarify to create a processing job for the detecting bias and explaining model predictions with feature ......
Read more >
Chips - Android Developers
Chips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided....
Read more >
Selection controls — UI component series - UX Collective
Left-aligned controls and labels will work best as they closely positioned to ... Consider using chips to clearly visually separate options.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found