fix(tag): allow data attributes on tag

chanzuckerberg · Sep 22, 2022 · 5aeaa9c · 5aeaa9c
1 parent bc32a2c
commit 5aeaa9c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
@@ -29,7 +29,15 @@ export const ColorVariants: StoryObj<Args> = {
   render: (args) => (
     <div className={styles.tagList}>
       {VARIANTS.map((variant) => {
-        return <Tag key={variant} {...args} text={variant} variant={variant} />;
+        return (
+          <Tag
+            data-testid="test"
+            key={variant}
+            {...args}
+            text={variant}
+            variant={variant}
+          />
+        );
       })}
     </div>
   ),

diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -52,6 +52,7 @@ export const Tag = ({
   icon,
   text,
   hasOutline = false,
+  ...other
 }: Props) => {
   const componentClassName = clsx(
     styles['tag'],
@@ -61,7 +62,13 @@ export const Tag = ({
   );
 
   return (
-    <Text as="span" className={componentClassName} size="sm" weight="bold">
+    <Text
+      as="span"
+      className={componentClassName}
+      size="sm"
+      weight="bold"
+      {...other}
+    >
       {icon}
       {text && <span className={styles['tag__body']}>{text}</span>}
     </Text>

diff --git a/src/components/Tag/__snapshots__/Tag.test.ts.snap b/src/components/Tag/__snapshots__/Tag.test.ts.snap
@@ -6,6 +6,7 @@ exports[`<Tag /> ColorVariants story renders snapshot 1`] = `
 >
   <span
     class="text text--sm text--bold-weight tag tag--neutral"
+    data-testid="test"
   >
     <span
       class="tag__body"
@@ -15,6 +16,7 @@ exports[`<Tag /> ColorVariants story renders snapshot 1`] = `
   </span>
   <span
     class="text text--sm text--bold-weight tag tag--error"
+    data-testid="test"
   >
     <span
       class="tag__body"
@@ -24,6 +26,7 @@ exports[`<Tag /> ColorVariants story renders snapshot 1`] = `
   </span>
   <span
     class="text text--sm text--bold-weight tag tag--success"
+    data-testid="test"
   >
     <span
       class="tag__body"
@@ -33,6 +36,7 @@ exports[`<Tag /> ColorVariants story renders snapshot 1`] = `
   </span>
   <span
     class="text text--sm text--bold-weight tag tag--warning"
+    data-testid="test"
   >
     <span
       class="tag__body"
@@ -42,6 +46,7 @@ exports[`<Tag /> ColorVariants story renders snapshot 1`] = `
   </span>
   <span
     class="text text--sm text--bold-weight tag tag--yield"
+    data-testid="test"
   >
     <span
       class="tag__body"
@@ -51,6 +56,7 @@ exports[`<Tag /> ColorVariants story renders snapshot 1`] = `
   </span>
   <span
     class="text text--sm text--bold-weight tag tag--brand"
+    data-testid="test"
   >
     <span
       class="tag__body"