💡 Proposal - Tag vs Pill

Tag and Pill migration in v4

The problem

Hey everyone!

Currently, we have 2 components that might be confusing. <Tag /> which is mostly used for labeling of highlighting elements in the interface

Example:

<Pill /> which is used for tagging elements in the interface

Example:

I think in order to achieve more consistency in naming we could migrate those 2 components in v4 to align their names with their purpose

The proposed solution

1. Migrate <Tag /> to <Label />:

• create a separate package for <Label /> that will contain current <Tag />
• I would like to introduce a set of “filled” Labels. Currently, we have only filled-primary and I wish we have a full set, the same as we have with the default (light) state. Downside - they look a bit like Buttons to me 😕 Fixing my own bug: I’ve got to the conclusion, that it would be better to create solid boolean property for the component, instead of for example tagType="primary-filled" it would be something like:

<Label labelType="primary" size="small" solid>new</Label>

This is how it potentially would look like (more or less):

1. Migrate <Pill /> to <Tag />, with the existing functionalities of Pill. Maybe we would like to extend the color set of Pill? is there a usecase for having more colors for this component?

Breaking changes

v4

Open questions:

• do we agree to the proposed naming or maybe we would like to migrate <Tag /> to something like Badge?
• do we want to create solid labels (current Tags) and do we have any objections against the solid boolean prop?
• do we want to extend the colors set for <Pill /> (future Tag) component - more details #585?

[gui-santos]

I think I missed the discussion about the reason behind having two similar components, could you show me?

IMO, Label is a confusing name because for me Label is a component related to the <label> tag used in forms so I suggest using other name: Tag or Badge

The boolean prop idea is great 🙌

[artibella]

I am also +1 for renaming both. But I could see some issues if we repurpose the existing Pill to become the Tag component (event though it is a better name for it).

I did some quick research to see how other design systems name our current Pill component: https://material.io/components/chips#usage https://atlassian.design/components/tag/examples https://www.carbondesignsystem.com/components/tag/usage https://www.lightningdesignsystem.com/components/pills/

What is unique to our current Pill is that we also have a draggable state. Haven’t seen that in any other Design System. Another reason to rename Pill to Tag is in which context we use it most of the times which is displaying tag-like entities - at least for the usages that I am aware of.

Naming is hard 😃