From b43f4a1720092cfcb169f79bb564f439cf086db0 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 24 Jun 2024 15:17:57 -0700
Subject: [PATCH 1/3] update focus state to new styling

---
 packages/react-components/src/components/Tag/Tag.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/Tag/Tag.css b/packages/react-components/src/components/Tag/Tag.css
index dddbfe74..7596077c 100644
--- a/packages/react-components/src/components/Tag/Tag.css
+++ b/packages/react-components/src/components/Tag/Tag.css
@@ -77,7 +77,7 @@
 /* Focused */
 .bcds-react-aria-Tag[data-focused] {
   outline: 2px solid var(--surface-color-border-active);
-  outline-offset: 0;
+  outline-offset: var(--layout-margin-hair);
 }
 
 /* Disabled */

From 3c0310df0fa9f6adad6fee6340efcd9e2c0950b5 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 25 Jun 2024 13:53:18 -0700
Subject: [PATCH 2/3] update focus and select states to new styles

---
 packages/react-components/src/components/Tag/Tag.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/components/Tag/Tag.css b/packages/react-components/src/components/Tag/Tag.css
index 7596077c..78a6722b 100644
--- a/packages/react-components/src/components/Tag/Tag.css
+++ b/packages/react-components/src/components/Tag/Tag.css
@@ -70,13 +70,16 @@
 
 /* Selected */
 .bcds-react-aria-Tag[data-selected] {
-  border: 2px solid var(--surface-color-border-active);
-  padding: 1px 7px;
+  border-radius: var(--layout-border-radius-small);
+  border: var(--layout-border-width-medium) solid
+    var(--surface-color-border-active);
+  padding: var(--layout-margin-hair) var(--layout-padding-small);
 }
 
 /* Focused */
 .bcds-react-aria-Tag[data-focused] {
-  outline: 2px solid var(--surface-color-border-active);
+  outline: var(--layout-border-width-medium) solid
+    var(--surface-color-border-active);
   outline-offset: var(--layout-margin-hair);
 }
 

From 18cf5619a182dcc305872d092c88163079728eff Mon Sep 17 00:00:00 2001
From: Tyler Krys <Tyler.Krys@gov.bc.ca>
Date: Wed, 17 Jul 2024 16:31:35 -0700
Subject: [PATCH 3/3] Refactor Tag component markup to remove extra --contents
 div

---
 .../src/components/Tag/Tag.css                 | 18 ++++++------------
 .../src/components/Tag/Tag.tsx                 |  4 ++--
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/src/components/Tag/Tag.css b/packages/react-components/src/components/Tag/Tag.css
index 78a6722b..1e7a449c 100644
--- a/packages/react-components/src/components/Tag/Tag.css
+++ b/packages/react-components/src/components/Tag/Tag.css
@@ -3,17 +3,14 @@
   cursor: pointer;
   border-radius: var(--layout-margin-hair);
   border: 1px solid;
-  box-sizing: content-box;
-  font: var(--typography-regular-label);
-  padding: 2px 8px;
-  width: fit-content;
-}
-.bcds-react-aria-Tag--contents {
   display: flex;
   align-items: center;
   gap: 8px;
+  font: var(--typography-regular-label);
+  padding: 2px 8px;
+  width: fit-content;
 }
-.bcds-react-aria-Tag--contents .react-aria-Button {
+.bcds-react-aria-Tag .react-aria-Button {
   background: none;
   border: none;
   color: var(--typography-color-primary);
@@ -29,9 +26,7 @@
   border-color: var(--theme-blue-90);
   color: var(--typography-color-primary-invert);
 }
-.bcds-react-aria-Tag.bc-blue
-  .bcds-react-aria-Tag--contents
-  > .react-aria-Button {
+.bcds-react-aria-Tag.bc-blue .react-aria-Button {
   color: var(--typography-color-primary-invert);
 }
 .bcds-react-aria-Tag.bc-gold {
@@ -47,7 +42,7 @@
   border-color: var(--theme-blue-90);
   color: var(--typography-color-primary-invert);
 }
-.bcds-react-aria-Tag.dark .bcds-react-aria-Tag--contents > .react-aria-Button {
+.bcds-react-aria-Tag.dark .react-aria-Button {
   color: var(--typography-color-primary-invert);
 }
 .bcds-react-aria-Tag.gray,
@@ -73,7 +68,6 @@
   border-radius: var(--layout-border-radius-small);
   border: var(--layout-border-width-medium) solid
     var(--surface-color-border-active);
-  padding: var(--layout-margin-hair) var(--layout-padding-small);
 }
 
 /* Focused */
diff --git a/packages/react-components/src/components/Tag/Tag.tsx b/packages/react-components/src/components/Tag/Tag.tsx
index 094a317b..99693eb2 100644
--- a/packages/react-components/src/components/Tag/Tag.tsx
+++ b/packages/react-components/src/components/Tag/Tag.tsx
@@ -35,7 +35,7 @@ export default function Tag({ color = "blue", icon, id, textValue }: TagProps) {
       textValue={textValue}
     >
       {({ allowsRemoving, isDisabled }: TagRenderProps) => (
-        <div className="bcds-react-aria-Tag--contents">
+        <>
           {icon}
           {textValue}
           {!isDisabled && allowsRemoving && (
@@ -57,7 +57,7 @@ export default function Tag({ color = "blue", icon, id, textValue }: TagProps) {
               </svg>
             </ReactAriaButton>
           )}
-        </div>
+        </>
       )}
     </ReactAriaTag>
   );