[Tag] Clarify that onClick and onRemove are mutually exclusive

[chloerice]

WHY are these changes introduced?

#2986 brought to my attention that there isn't a removable tag example, and that it needs to be documented that clickable tags aren't removable.

WHAT is this pull request doing?

This PR adds a removable tag example and clarifies that the remove button doesn't render when onClick is set.

***Note: The pa11y test failure is due to a bug reported with Autocomplete.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 3 files and might impact 3 other files.

Details:

All files potentially affected (total: 3)

• /src/components/Filters/Filters.tsx
• /src/components/ResourceList/components/FilterControl/FilterControl.tsx
• /src/components/ResourceList/ResourceList.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

📄 src/components/Tag/README.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Tag/Tag.tsx (total: 3)

Files potentially affected (total: 3)

• /src/components/Filters/Filters.tsx
• /src/components/ResourceList/components/FilterControl/FilterControl.tsx
• /src/components/ResourceList/ResourceList.tsx

[danrosenthal]

Would it be useful to actually remove the tag in the example?

[chloerice]

Would it be important to actually remove the tag in the example?

It's moreso illustrating that setting onRemove adds a remove button you can wire up. But we do have a simple tag example in the Autocomplete docs I can copy over!

[BPScott]

Could we also help enforce this in the Typescript declaration of Tag's props? TextField does similar where you can have only one of readonly, disabled or onChange

[chloerice]

Could we also help enforce this in the Typescript declaration of Tag's props? TextField does similar where you can have only one of readonly, disabled or onChange

Marc did that for Tag as well.

[BPScott]

Cool, ignore me :)

[BPScott]

It feels a little odd for the demo of removable tag to not show any on initial render, but to instead show an autocomplete box.Doesn't fee very useful for our VRT stuff.

How about something like this as an example:

function RemovableTagExample() {
  const [selectedTags, setSelectedTags] = useState([
    'Rustic',
    'Antique',
    'Vinyl',
    'Refurbished',
  ]);

  const removeTag = useCallback(
    (tag) => () => {
      setSelectedTags((previousTags) =>
        previousTags.filter((previousTag) => previousTag !== tag),
      );
    },
    [],
  );

  const tagMarkup = selectedTags.map((option) => (
    <Tag key={option} onRemove={removeTag(option)}>
      {option}
    </Tag>
  ));

  return <Stack spacing="tight">{tagMarkup}</Stack>;
}

[kyledurand]

Code looks good to me 🥇 Thank Chloe!

[chloerice]

@kyledurand Would you mind merging this for me? I don't have admin privileges and the pa11y failures don't have anything to do with this PR (the autocomplete is setting aria-expanded on the text field instead of the combobox wrapper, see #3639).

[kyledurand]

I can merge for you but I'd prefer if you could add those two failing ids to our accessibility checks list https://github.com/Shopify/polaris-react/blob/master/scripts/accessibility-check.js#L88

[BPScott]

No need to fixup a11y tests skip lists if we've already fixed all our failing a11y tests :thonk:

I've updated the removable example per my above comment so that it demos tags immediately rather than needing you to interact with an autocomplete