fix(Chip): Added prop to render a badge in the chip after the text

[tlabaj]

What: Closes #9483

[patternfly-build]

Preview: https://patternfly-react-pr-9493.surge.sh

A11y report: https://patternfly-react-pr-9493-a11y.surge.sh

[mcoker]

LGTM! I left a thought about the prop name, but that's more consideration for a long term approach. I did talk to @lboehling and the current plan is still to deprecate the chip in favor of the label as part of the penta release.

[mcoker]

This LGTM, though I wonder about the prop name. Just a thought, but if this were the label, I'm thinking we may add a div.pf-v5-c-label__count element inside the label as a container for the count, and the badge (or whatever is used to convey the count) goes in there. That would let us us place/position a count in a label as separate from some other use of a badge in the label. So I would probably advocate for this being called count or something not necessarily tied to the component name, but for the short term in the chip, I think this is fine.

[tlabaj]

@mcoker Are you proposing that they pass a number rather than badge and then we render the badge internally?

[mcoker]

I guess it could go a couple of ways. This is also assuming that spot in the chip/label is for a count specifically. It seems like it is, but with a more official implementation in the label, maybe it's worth considering. I think that would also need design input from @andrew-ronaldson @lboehling

• Use count as the prop, but allow the value to be anything - users could pass a badge or whatever, maybe just text (like (n), so it would read "chip text (9)")
• If we/design wants control of the count to render in a specific way (eg, always use a badge), we could have the count prop only accept an integer and we manage the badge internally like you mentioned, and that will 1) enforce consistency and 2) allow us to maybe use some other component later if the presentation changes, without breaking the component/prop API.
  • One downside to that is we would probably need to create countOptions or something to manage the props available to pass to the badge (like the button does)

If that spot isn't strictly for a count, we could create a more generic prop and open up that area of the chip/label to allow users to put whatever they want there. It could be a badge for a count, some sort of icon, or whatever - the parent layout will create space between those items. If we went that route, I think we would create some sort of new container for all of that stuff to go in. But here's what I'm referring to using the existing layout:

[kmcfaul]

If we will eventually replace Badge with Label then I agree with going for a bit more of a generic or purpose-driven prop name, unless that switch will be more of a v6 thing so we could do that in a breaking change. If that's the case I don't think the prop name is a blocker.

[tlabaj]

@kmcfaul Chip will be deprecated and all chip functionality will be available in the Label