fix(react): use remove icon on tag component

p3ol · Sep 29, 2022 · 351d74f · 351d74f
1 parent 579dc2c
commit 351d74f
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 39 deletions.
diff --git a/packages/react/lib/Tag/index.js b/packages/react/lib/Tag/index.js
@@ -2,6 +2,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { classNames } from '@junipero/core';
 import PropTypes from 'prop-types';
 
+import { Remove } from '../icons';
+
 const Tag = forwardRef(({
   className,
   children,
@@ -31,7 +33,7 @@ const Tag = forwardRef(({
     >
       { content }
       { onDelete && (
-        <a className="delete" onClick={onDelete_} />
+        <Remove onClick={onDelete_} />
       ) }
     </Comp>
   );

diff --git a/packages/react/lib/Tag/index.test.js.snap b/packages/react/lib/Tag/index.test.js.snap
@@ -8,54 +8,124 @@ exports[`<Tag /> should be deletable 1`] = `
     <span>
       Item 1
     </span>
-    <a
-      class="delete"
-    />
+    <svg
+      class="junipero icon remove"
+      height="10"
+      viewBox="0 0 9 10"
+      width="10"
+    >
+      <path
+        d="M8 1.5L1 8.5"
+      />
+      <path
+        d="M1 1.5L8 8.5"
+      />
+    </svg>
   </span>
   <span
     class="junipero tag"
   >
     <span>
       Item 2
     </span>
-    <a
-      class="delete"
-    />
+    <svg
+      class="junipero icon remove"
+      height="10"
+      viewBox="0 0 9 10"
+      width="10"
+    >
+      <path
+        d="M8 1.5L1 8.5"
+      />
+      <path
+        d="M1 1.5L8 8.5"
+      />
+    </svg>
   </span>
   <span
     class="junipero tag"
   >
     <span>
       Item 3
     </span>
-    <a
-      class="delete"
-    />
+    <svg
+      class="junipero icon remove"
+      height="10"
+      viewBox="0 0 9 10"
+      width="10"
+    >
+      <path
+        d="M8 1.5L1 8.5"
+      />
+      <path
+        d="M1 1.5L8 8.5"
+      />
+    </svg>
   </span>
 </div>
 `;
 
 exports[`<Tag /> should be deletable 2`] = `
 <div>
+  <span
+    class="junipero tag"
+  >
+    <span>
+      Item 1
+    </span>
+    <svg
+      class="junipero icon remove"
+      height="10"
+      viewBox="0 0 9 10"
+      width="10"
+    >
+      <path
+        d="M8 1.5L1 8.5"
+      />
+      <path
+        d="M1 1.5L8 8.5"
+      />
+    </svg>
+  </span>
   <span
     class="junipero tag"
   >
     <span>
       Item 2
     </span>
-    <a
-      class="delete"
-    />
+    <svg
+      class="junipero icon remove"
+      height="10"
+      viewBox="0 0 9 10"
+      width="10"
+    >
+      <path
+        d="M8 1.5L1 8.5"
+      />
+      <path
+        d="M1 1.5L8 8.5"
+      />
+    </svg>
   </span>
   <span
     class="junipero tag"
   >
     <span>
       Item 3
     </span>
-    <a
-      class="delete"
-    />
+    <svg
+      class="junipero icon remove"
+      height="10"
+      viewBox="0 0 9 10"
+      width="10"
+    >
+      <path
+        d="M8 1.5L1 8.5"
+      />
+      <path
+        d="M1 1.5L8 8.5"
+      />
+    </svg>
   </span>
 </div>
 `;

diff --git a/packages/theme/lib/Tag.sass b/packages/theme/lib/Tag.sass
@@ -8,6 +8,8 @@
   color: var(--text-color)
   display: inline-flex
   align-items: center
+  align-content: center
+  gap: 8px
 
   &.primary
     --background-color: var(--junipero-velvet)
@@ -25,27 +27,7 @@
     --background-color: var(--junipero-lime)
     --text-color: var(--junipero-seashell)
 
-  .delete
-    cursor: pointer
-    position: relative
-    margin-left: 8px
-    width: 10px
-    height: 10px
-    display: inline-flex
-
-    &::before, &::after
-      width: 2px
-      height: 10px
-      border-radius: 2px
-      background: var(--text-color)
-      content: ""
-      display: block
-      position: absolute
-      top: 0
-      left: 50%
+  .remove
+    --icons-color: var(--text-color)
 
-    &::before
-      transform: rotate(45deg)
-
-    &::after
-      transform: rotate(-45deg)
+    cursor: pointer