[Tag] Clarify that onClick and onRemove are mutually exclusive (#2987)

* [Tag] Clarify that onClick and onRemove are mutually exclusive

* Shorter, clearer removable tag example

Co-authored-by: Ben Scott <ben.scott@shopify.com>

UNRELEASED.md

@@ -10,6 +10,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Documentation
 
+- Added an example for the `onRemove` prop to `Tag` and clarified that no remove button is rendered when `onClick` is set ([#2987](https://github.com/Shopify/polaris-react/pull/2987))
+
 ### Development workflow
 
 ### Dependency upgrades

src/components/Tag/README.md

@@ -33,32 +33,50 @@ Tags should:
 
 ### Default tag
 
-Use to allow merchants to add attributes to, and remove attributes from, an object.
+Use to signify the attributes of an object.
 
 ```jsx
 <Tag>Wholesale</Tag>
 ```
 
-### Remove tag
+### Removable tag
 
 Use to allow merchants to remove attributes from an object.
 
 ```jsx
-<Tag onRemove={() => {}}>Wholesale</Tag>
+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>;
+}
 ```
 
 ### Clickable tag
 
 Use to allow merchants to add attributes to an object.
 
 ```jsx
-<Tag
-  onClick={() => {
-    console.log('Clicked');
-  }}
->
-  Wholesale
-</Tag>
+<Tag onClick={() => console.log('Clicked')}>Wholesale</Tag>
 ```
 
 <!-- content-for: android -->

src/components/Tag/Tag.tsx

@@ -13,9 +13,9 @@ export interface NonMutuallyExclusiveProps {
   children?: string;
   /** Disables the tag  */
   disabled?: boolean;
-  /** Callback when tag is clicked or keypressed */
+  /** Callback when tag is clicked or keypressed. Renders without remove button when set. */
   onClick?(): void;
-  /** Callback when remove button is clicked or keypressed */
+  /** Callback when remove button is clicked or keypressed. */
   onRemove?(): void;
 }