[feat] `<rh-chip>` element

[dcaryll]

Description

RHDS needs the have the ability to filter pieces of content using "chips". This is typically a single taxonomy way of filtering versus the multiple ways of filtering that a taxonomy box offers.

https://www.patternfly.org/components/chip/

Example in production on cloud.redhat.com/learn

Acceptance Criteria

• [x] Design done
• [ ] Development done

Image

No response

Link to design doc

No response

Other resources

No response

[coreyvickery]

@dcaryll Just so you're aware, here are some concepts that are being explored and reviewed.

https://www.figma.com/proto/JbdmuSkfh0CuzqUZixb1UY?node-id=1-5&locale=en

[dcaryll]

These are great explorations! Thanks for sharing.

I think it's important to note how labels and chips can be distinguished from one another.

Dan Caryll Senior Manager, UX Design and Development Red Hat - NC 100 E Davie Street

@.*** M: 304-281-4098

On Tue, Feb 20, 2024 at 3:37 PM coreyvickery @.***> wrote:

@dcaryll https://github.com/dcaryll Just so you're aware, here are some concepts that are being explored and reviewed.

https://www.figma.com/proto/JbdmuSkfh0CuzqUZixb1UY?node-id=1-5&locale=en

— Reply to this email directly, view it on GitHub https://github.com/RedHat-UX/red-hat-design-system/issues/1456#issuecomment-1955039172, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJRDU522GMEYOAPXG7W7GDYUUCQZAVCNFSM6AAAAABCFV55BKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJVGAZTSMJXGI . You are receiving this because you were mentioned.Message ID: @.***>

[coreyvickery]

Update, here is where I left off.

https://www.figma.com/proto/JbdmuSkfh0CuzqUZixb1UY/rh-chip?page-id=0%3A1&type=design&node-id=61-46&viewport=114%2C135%2C1&t=yQCXPMibdoF7ajpf-1&scaling=min-zoom&mode=design

[coreyvickery]

@markcaron @hellogreg I would like to get this done in Charmander.

[bennypowers]

pf-chip composes into pf-text-input for things like search. will rh-chip do the same? would that change it's semantics or usability? cc @adamjohnson

[adamjohnson]

pf-chip composes into pf-text-input for things like search. will rh-chip do the same?

Was the <pf-text-input> + <pf-chip> composition use case discussed elsewhere with regards to accessibility?

This is a common pattern seen on the web. Unfortunately, as far as I can tell, the APG Patterns don't have guidance for an input containing multiple selected items (correct me if I am wrong). Select2 is a classic library that does this but has had accessibility issues over the years.

IMO, we should steer users away from this UI pattern until the accessibility story becomes more solidified.

[coreyvickery]

@adamjohnson I think pf-chip is being deprecated in PatternFly 6. I am checking with the team about this.

Here is a comprehensive file of what I have been working on for rh-chip. I just need a few folks from other design teams to approve first before you get started.

Edit: This no longer applies, see comment below.

There are some explorations of smaller chips for inputs on the last page.

[coreyvickery]

@adamjohnson According to the PatternFly team, pf-chip is being replaced by pf-label.

If rh-chip needs to be used in inputs like search, maybe we can use rh-tag instead or add to rh-tag if needed, like a more compact version.

[zeroedin]

@coreyvickery Just FYI had a short conversation with @eyevana about compact on rh-tag today, maybe get her use case for that as well?

[coreyvickery]

Update 5/22: Design leads will give feedback on this component on Tuesday, May 28. Marionne will present as Corey will be out.