@RHo “Tag” is here used in data type context, not visual representation, correct. How does this differentiate from T280701? What are tag versus chip specifics and separations?

In T280681#7056709, @Volker_E wrote:

@RHo “Tag” is here used in data type context, not visual representation, correct. How does this differentiate from T280701? What are tag versus chip specifics and separations?

Apologies for the confusion. My intention in filing this task was to capture an existing (relatively) newly designed components that we could more quickly add as part of the WVUI library, whereas T280701 is a larger task of defining a filters component where the individual tag/chip/pill component are only a part of the component definition. Sort of like how checkboxes are a component distinct from a form layout. Does that make sense?

I was talking with @RHo in Slack about why we use "Selector checkbox" for this component.

Tag or Selector Checkbox are wrong names for this component. This component is a Chip and it would work as Filter Chip (as we can have different type of chips). You can view something similar in Material Android where the Chips are explained.

If you agree I can update the name of the component in our library from Selector Checkbox to Chip.

In T280681#7719439, @bmartinezcalvo wrote:

I was talking with @RHo in Slack about why we use "Selector checkbox" for this component.

[[ URL | name ]]
Tag or Selector Checkbox are wrong names for this component. This component is a Chip and it would work as Filter Chip (as we can have different type of chips). You can view something similar in Material Android where the Chips are explained.

If you agree I can update the name of the component in our library from Selector Checkbox to Chip.

Hi @bmartinezcalvo - I agree "Selector checkbox" should be changed, but perhaps we should stick to "Tag" both in case this is historically what it is called on other places in OOUI (the TagMultiselect widget.
Also FWIW, there does seem to be a fair few other design systems that use "Tag" instead of Chip (e.g., Adobe Spectrum, Atlassian, Ant Design), whilst Apple HIG uses "token" (probably too confusing to use) and Salesforce uses "Pill".

In T280681#7720967, @RHo wrote:

Hi @bmartinezcalvo - I agree "Selector checkbox" should be changed, but perhaps we should stick to "Tag" both in case this is historically what it is called on other places in OOUI (the TagMultiselect widget.
Also FWIW, there does seem to be a fair few other design systems that use "Tag" instead of Chip (e.g., Adobe Spectrum, Atlassian, Ant Design), whilst Apple HIG uses "token" (probably too confusing to use) and Salesforce uses "Pill".

Hey @RHo thank you for your feedback and name proposals. To consider:

• Tag: in my opinion "Tag" is a badge component (as its name say, it's a tag for categorizing or markup). If we use "Tag" I think we should call it "Filter Tag" o be more specific.

• Pill: I wouldn't use "Pill" because currently our selectors are rounded by imagine that in the future we want to make them rectangular, then "Pill" name would be wrong)
• Chip: I think "Filter Chip" is the best option for this component since it adds or removes content filtering options. We could also use "Filter" but maybe we need to be more specific.

In T280681#7721019, @bmartinezcalvo wrote:

In T280681#7720967, @RHo wrote:

Hi @bmartinezcalvo - I agree "Selector checkbox" should be changed, but perhaps we should stick to "Tag" both in case this is historically what it is called on other places in OOUI (the TagMultiselect widget.
Also FWIW, there does seem to be a fair few other design systems that use "Tag" instead of Chip (e.g., Adobe Spectrum, Atlassian, Ant Design), whilst Apple HIG uses "token" (probably too confusing to use) and Salesforce uses "Pill".

Hey @RHo thank you for your feedback and name proposals. To consider:

• Tag: in my opinion "Tag" is a badge component (as its name say, it's a tag for categorizing or markup). If we use "Tag" I think we should call it "Filter Tag" o be more specific.

• Pill: I wouldn't use "Pill" because currently our selectors are rounded by imagine that in the future we want to make them rectangular, then "Pill" name would be wrong)
• Chip: I think "Filter Chip" is the best option for this component since it adds or removes content filtering options. We could also use "Filter" but maybe we need to be more specific.

Yes I agree that either "filter tag" or "filter chip" is better. However, if the intention will be for this to be part of Codex eventually, then I suggest moving this to the Design-System-Team and/or Codex for the renaming decision.

In T280681#7721146, @RHo wrote:

Yes I agree that either "filter tag" or "filter chip" is better. However, if the intention will be for this to be part of Codex eventually, then I suggest moving this to the Design-System-Team and/or Codex for the renaming decision.

Thank you @RHo, I'm going to add this task in the DS and Codex boards.

cc: @Volker_E

Examples from Android per “Design Practice & Systems + DS Office Hours” meeting:

• Chips used in the 'Tag images' Suggested edits task (Zeplin | T240196)
• Chips in 'Reading lists' search (Zeplin | T214506)
• Chips design in the component library that is work in progress (Figma)
  

@RHo @bmartinezcalvo @Volker_E

PS: Also for reference: Material 3 Chips and its new Figma design kit are quite impressive (and extensive)

Should this task be merged as a duplicate into T322524: [EPIC] Add Chip component to Codex?

In T280681#8393643, @egardner wrote:

Should this task be merged as a duplicate into T322524: [EPIC] Add Chip component to Codex?

We could keep T322524 as the task to create the Codex Chip and this task as the task to add the Chip guidelines in the Design Style Guide. Also both task could be merged and we could add the "Add Chip in the DSG" as an Acceptance criteria of T322524.

I added "Add Chip in the DSG" to the acceptance criteria for T322524, so merging this task. Feel free to reopen if it's better to keep this one separate.