[Tag] Add secondary styling

.changeset/popular-gifts-shout.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Add secondary variant to Tag component

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

@@ -65,6 +65,10 @@
     padding-right: 0;
     padding-inline-end: 0;
   }
+
+  &.secondary {
+    background-color: var(--p-color-bg-fill-secondary);
+  }
 }
 
 .Button {

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

@@ -8,6 +8,7 @@ import {
   Bleed,
   BlockStack,
   Text,
+  Card,
 } from '@shopify/polaris';
 import {WandIcon} from '@shopify/polaris-icons';
 
@@ -40,6 +41,9 @@ export const All = {
         <br />
         <Text as="p">Removable large</Text>
         <RemovableLarge.render />
+        <br />
+        <Text as="p">Secondary</Text>
+        <Secondary.render />
       </BlockStack>
       /* eslint-enable react/jsx-pascal-case */
     );
@@ -193,3 +197,24 @@ export const RemovableLarge = {
     );
   },
 };
+
+export const Secondary = {
+  render() {
+    return (
+      <Card>
+        <InlineStack gap="100">
+          <Tag secondary>Wholesale</Tag>
+          <Tag disabled secondary>
+            Disabled
+          </Tag>
+          <Tag secondary url="#">
+            With URL
+          </Tag>
+          <Tag secondary onRemove={() => {}}>
+            Removable
+          </Tag>
+        </InlineStack>
+      </Card>
+    );
+  },
+};

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

@@ -24,6 +24,8 @@ export interface NonMutuallyExclusiveProps {
   url?: string;
   /** The size of the tag */
   size?: 'large';
+  /** Apply secondary styling  */
+  secondary?: boolean;
 }
 
 export type TagProps = NonMutuallyExclusiveProps &
@@ -40,6 +42,7 @@ export function Tag({
   accessibilityLabel,
   url,
   size,
+  secondary,
 }: TagProps) {
   const i18n = useI18n();
 
@@ -52,6 +55,7 @@ export function Tag({
     url && !disabled && styles.linkable,
     segmented && styles.segmented,
     size && styles[variationName('size', size)],
+    secondary && styles.secondary,
   );
 
   let tagTitle = accessibilityLabel;

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

@@ -31,6 +31,9 @@ examples:
   - fileName: tag-removable-large.tsx
     title: Removable large
     description: A larger, removable attribute to an object that allows merchants to navigate to a resource.
+  - fileName: tag-secondary.tsx
+    title: Secondary
+    description: A less promenant variation of the default tag.
 previewImg: /images/components/selection-and-input/tag.png
 ---
 

polaris.shopify.com/pages/examples/tag-secondary.tsx

@@ -0,0 +1,15 @@
+import {Card, Tag, LegacyStack} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function TagExample() {
+  return (
+    <Card>
+      <LegacyStack spacing="tight">
+        <Tag secondary>Secondary</Tag>
+      </LegacyStack>
+    </Card>
+  );
+}
+
+export default withPolarisExample(TagExample);