[Tag] Add large size with discrete remove button

.changeset/violet-goats-kick.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `size` prop to `Tag`

polaris-react/src/components/Tag/Tag.module.scss

@@ -1,9 +1,9 @@
 @import '../../styles/common';
 
 $height: 20px;
-$button-size: 20px;
 
 .Tag {
+  position: relative;
   display: inline-flex;
   max-width: 100%;
   align-items: center;
@@ -208,3 +208,68 @@ $button-size: 20px;
     background: var(--p-color-bg-fill-tertiary-active);
   }
 }
+
+.sizeLarge,
+.sizeLarge:is(.removable, .linkable) {
+  min-height: 24px;
+  padding: 0 var(--p-space-200);
+}
+
+/* stylelint-disable-next-line selector-max-class, selector-max-specificity -- override code above */
+.sizeLarge .Link.segmented::after {
+  margin-right: 0;
+}
+
+.sizeLarge .Button {
+  opacity: 0;
+  position: absolute;
+  right: var(--p-space-050);
+  left: auto;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--p-color-bg-fill-tertiary);
+
+  &:hover {
+    color: var(--p-color-icon-secondary-hover);
+  }
+
+  &:active,
+  &:focus {
+    color: var(--p-color-icon-secondary-active);
+  }
+}
+
+.sizeLarge:hover .Button,
+.sizeLarge .Button:focus-visible {
+  opacity: 1;
+}
+
+.sizeLarge:hover .overlay {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  bottom: 0;
+  width: 12px;
+  pointer-events: none;
+  background: linear-gradient(
+    to left,
+    var(--p-color-bg-fill-tertiary) 0%,
+    transparent 100%
+  );
+}
+/* stylelint-disable-next-line selector-max-class -- match tag hover color */
+.sizeLarge.removable.linkable {
+  /* stylelint-disable-next-line selector-max-class, selector-max-specificity  -- match tag hover color */
+  .Button {
+    background-color: var(--p-color-bg-fill-tertiary-hover);
+  }
+  /* stylelint-disable-next-line selector-max-class, selector-max-specificity  -- match tag hover color */
+  &:hover .overlay {
+    background: linear-gradient(
+      to left,
+      var(--p-color-bg-fill-tertiary-hover) 0%,
+      transparent 100%
+    );
+  }
+}

polaris-react/src/components/Tag/Tag.stories.tsx

@@ -1,12 +1,47 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {InlineStack, Icon, LegacyStack, Tag, Bleed} from '@shopify/polaris';
+import {
+  InlineStack,
+  Icon,
+  LegacyStack,
+  Tag,
+  Bleed,
+  BlockStack,
+  Text,
+} from '@shopify/polaris';
 import {WandIcon} from '@shopify/polaris-icons';
 
 export default {
   component: Tag,
 } as ComponentMeta<typeof Tag>;
 
+export function All() {
+  return (
+    <BlockStack gap="100">
+      <Text as="p">Default</Text>
+      <Default />
+      <br />
+      <Text as="p">Removable</Text>
+      <Removable />
+      <br />
+      <Text as="p">Clickable</Text>
+      <Clickable />
+      <br />
+      <Text as="p">With Link</Text>
+      <WithLink />
+      <br />
+      <Text as="p">With Custom Content</Text>
+      <WithCustomContent />
+      <br />
+      <Text as="p">Removable with Link</Text>
+      <RemovableWithLink />
+      <br />
+      <Text as="p">Removable large</Text>
+      <RemovableLarge />
+    </BlockStack>
+  );
+}
+
 export function Default() {
   return (
     <InlineStack gap="100">
@@ -101,3 +136,42 @@ export function RemovableWithLink() {
 
   return <LegacyStack spacing="tight">{tagMarkup}</LegacyStack>;
 }
+
+export function RemovableLarge() {
+  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 size="large" key={option} onRemove={removeTag(option)}>
+      {option}
+    </Tag>
+  ));
+
+  const tagWithLinkMarkup = selectedTags.map((option) => (
+    <Tag size="large" key={option} onRemove={removeTag(option)} url="#">
+      {option}
+    </Tag>
+  ));
+
+  return (
+    <BlockStack gap="100">
+      <Text as="p">Large</Text>
+      <LegacyStack spacing="tight">{tagMarkup}</LegacyStack>
+      <Text as="p">Large with link</Text>
+      <LegacyStack spacing="tight">{tagWithLinkMarkup}</LegacyStack>
+    </BlockStack>
+  );
+}

polaris-react/src/components/Tag/Tag.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {XSmallIcon} from '@shopify/polaris-icons';
 
-import {classNames} from '../../utilities/css';
+import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {Icon} from '../Icon';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
@@ -21,6 +21,8 @@ export interface NonMutuallyExclusiveProps {
   accessibilityLabel?: string;
   /** Url to navigate to when tag is clicked or keypressed. */
   url?: string;
+  /** The size of the tag */
+  size?: 'large';
 }
 
 export type TagProps = NonMutuallyExclusiveProps &
@@ -36,6 +38,7 @@ export function Tag({
   onRemove,
   accessibilityLabel,
   url,
+  size,
 }: TagProps) {
   const i18n = useI18n();
 
@@ -47,6 +50,7 @@ export function Tag({
     onRemove && styles.removable,
     url && !disabled && styles.linkable,
     segmented && styles.segmented,
+    size && styles[variationName('size', size)],
   );
 
   if (onClick) {
@@ -104,6 +108,7 @@ export function Tag({
   return (
     <span className={className} aria-disabled={disabled}>
       {tagContent}
+      {size === 'large' && <span className={styles.overlay} />}
       {removeButton}
     </span>
   );

polaris.shopify.com/content/components/selection-and-input/tag.mdx

@@ -28,6 +28,9 @@ examples:
   - fileName: tag-removable-with-link.tsx
     title: Removable with link
     description: A removable attribute to an object that allows merchants to navigate to a resource.
+  - fileName: tag-removable-large.tsx
+    title: Removable large
+    description: A larger, removable attribute to an object that allows merchants to navigate to a resource.
 previewImg: /images/components/selection-and-input/tag.png
 ---
 

polaris.shopify.com/pages/examples/tag-removable-large.tsx

@@ -0,0 +1,49 @@
+import {Tag, LegacyStack, Text, BlockStack, Card} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+export function RemovableLarge() {
+  const [selectedTags, setSelectedTags] = useState([
+    'Rustic',
+    'Antique',
+    'Vinyl',
+    'Refurbished',
+  ]);
+
+  const removeTag = useCallback(
+    (tag: string) => () => {
+      setSelectedTags((previousTags) =>
+        previousTags.filter((previousTag) => previousTag !== tag),
+      );
+    },
+    [],
+  );
+
+  const tagMarkup = selectedTags.map((option) => (
+    <Tag size="large" key={option} onRemove={removeTag(option)}>
+      {option}
+    </Tag>
+  ));
+
+  const tagWithLinkMarkup = selectedTags.map((option) => (
+    <Tag size="large" key={option} onRemove={removeTag(option)} url="#">
+      {option}
+    </Tag>
+  ));
+
+  return (
+    <BlockStack gap="100">
+      <Card>
+        <Text as="p">Large</Text>
+        <LegacyStack spacing="tight">{tagMarkup}</LegacyStack>
+      </Card>
+
+      <Card>
+        <Text as="p">Large with link</Text>
+        <LegacyStack spacing="tight">{tagWithLinkMarkup}</LegacyStack>
+      </Card>
+    </BlockStack>
+  );
+}
+
+export default withPolarisExample(RemovableLarge);