From 6ad64ff38d338522a6927e0c11bd7d8397117f38 Mon Sep 17 00:00:00 2001
From: TomasSlama <tomas.slama@toptal.com>
Date: Thu, 19 Sep 2024 08:15:38 +0200
Subject: [PATCH] [FX-5973] Update tag to span

---
 .changeset/eighty-eagles-warn.md                            | 6 ++++++
 packages/base/Tag/src/TagRectangular/TagRectangular.tsx     | 1 +
 .../base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/eighty-eagles-warn.md

diff --git a/.changeset/eighty-eagles-warn.md b/.changeset/eighty-eagles-warn.md
new file mode 100644
index 0000000000..db80678635
--- /dev/null
+++ b/.changeset/eighty-eagles-warn.md
@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-tag': patch
+'@toptal/picasso': patch
+---
+
+- update HTML tag of Tag.Rectangular to span
diff --git a/packages/base/Tag/src/TagRectangular/TagRectangular.tsx b/packages/base/Tag/src/TagRectangular/TagRectangular.tsx
index 8574884711..0e1a174726 100644
--- a/packages/base/Tag/src/TagRectangular/TagRectangular.tsx
+++ b/packages/base/Tag/src/TagRectangular/TagRectangular.tsx
@@ -48,6 +48,7 @@ export const TagRectangular = forwardRef<HTMLDivElement, Props>(
             variant === 'light-grey' ? 'text-graphite-800' : 'text-white'
           )}
           titleCase={titleCase}
+          as='span'
         >
           {children}
         </Typography>
diff --git a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
index 7862af4a29..798c22d6a2 100644
--- a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
@@ -8,11 +8,11 @@ exports[`TagRectangular renders rectangular Tag 1`] = `
     <div
       class="text-lg transition-none rounded-sm font-semibold h-4 inline-flex content-center justify-center align-middle bg-gray"
     >
-      <p
+      <span
         class="m-0 text-2xs font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden mx-1 w-max text-graphite"
       >
         Reactangular Tag
-      </p>
+      </span>
     </div>
   </div>
 </div>