feat(Tag): add as prop to Tag to specify wrapping element (#13959) (#14112)

kapetr · kodiakhq[bot] · web-flow · commit fcdecdb5307c · 2023-07-06T17:47:27.000Z
* feat(Tag): add as prop to Tag to specify wrapping element (#13959) * fixup! updated snapshots * chore: update contributors list --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1214,6 +1214,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "tulivlk",
+      "name": "Petr Kadlec",
+      "avatar_url": "https://avatars.githubusercontent.com/u/67226666?v=4",
+      "profile": "https://github.com/tulivlk",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
@@ -246,6 +246,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/anton-tsymuk-viacomcbs"><img src="https://avatars.githubusercontent.com/u/112623876?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anton Tsymuk</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=anton-tsymuk-viacomcbs" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/modaslam"><img src="https://avatars.githubusercontent.com/u/33179527?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohammed Aslam P. A.</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=modaslam" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=modaslam" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/tongyy"><img src="https://avatars.githubusercontent.com/u/24784725?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tony ZL</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tongyy" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/tulivlk"><img src="https://avatars.githubusercontent.com/u/67226666?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Petr Kadlec</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tulivlk" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8278,6 +8278,9 @@ Map {
   },
   "Tag" => Object {
     "propTypes": Object {
+      "as": Object {
+        "type": "elementType",
+      },
       "children": Object {
         "type": "node",
       },
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -39,6 +39,7 @@ const Tag = ({
   disabled,
   onClose,
   size,
+  as: BaseComponent,
   ...other
 }) => {
   const prefix = usePrefix();
@@ -59,8 +60,9 @@ const Tag = ({
   };
 
   if (filter) {
+    const ComponentTag = BaseComponent ?? 'div';
     return (
-      <div className={tagClasses} id={tagId} {...other}>
+      <ComponentTag className={tagClasses} id={tagId} {...other}>
         <span
           className={`${prefix}--tag__label`}
           title={typeof children === 'string' ? children : null}>
@@ -75,11 +77,11 @@ const Tag = ({
           title={title}>
           <Close />
         </button>
-      </div>
+      </ComponentTag>
     );
   }
 
-  const ComponentTag = other.onClick ? 'button' : 'div';
+  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
 
   return (
     <ComponentTag
@@ -102,6 +104,12 @@ const Tag = ({
 };
 
 Tag.propTypes = {
+  /**
+   * Provide an alternative tag or component to use instead of the default
+   * wrapping element
+   */
+  as: PropTypes.elementType,
+
   /**
    * Provide content to be rendered inside of a <Tag>
    */
