Merge pull request #396 from bcgov/395-tag---implement-new-selectfocu…

…s-state

Update tag focus and select states to new design

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,
@@ -70,14 +65,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);
 }
 
 /* Focused */
 .bcds-react-aria-Tag[data-focused] {
-  outline: 2px solid var(--surface-color-border-active);
-  outline-offset: 0;
+  outline: var(--layout-border-width-medium) solid
+    var(--surface-color-border-active);
+  outline-offset: var(--layout-margin-hair);
 }
 
 /* Disabled */

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>
   );