From 0ecab4deb8493897220d2d5639a851e0d2a1569e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Faruk=20Ko=C3=A7?= <mfarukkoc@gmail.com>
Date: Tue, 10 Aug 2021 10:36:50 +0300
Subject: [PATCH 1/3] refactor(tag): Refactor tag with the clickable div
 element

---
 src/tag/Tag.tsx   | 34 +++++++++++++++++++++++-----------
 src/tag/_tag.scss |  2 ++
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index 26f6ff18..6e6cb846 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -1,13 +1,10 @@
+import "./_tag.scss";
+
 import CloseIcon from "../ui/icons/close.svg";
 
 import React from "react";
 import classNames from "classnames";
 
-import Button from "../button/Button";
-
-// SCSS import is moved here to override Button styles without nesting
-import "./_tag.scss";
-
 export interface TagShape<Context = any> {
   id: string;
   content: React.ReactNode;
@@ -27,11 +24,13 @@ function Tag({testid, tag, onRemove, customClassName}: TagProps) {
   });
 
   return (
-    <Button
-      testid={testid}
-      customClassName={containerClassName}
-      onClick={handleRemove}
-      shouldStopPropagation={true}>
+    <div
+      role={"button"}
+      tabIndex={0}
+      data-testid={testid}
+      onKeyDown={handleKeyPress}
+      className={containerClassName}
+      onClick={handleRemove}>
       <div className={"tag__body"}>{tag.content}</div>
 
       {onRemove && (
@@ -41,7 +40,7 @@ function Tag({testid, tag, onRemove, customClassName}: TagProps) {
           aria-hidden={true}
         />
       )}
-    </Button>
+    </div>
   );
 
   function handleRemove() {
@@ -49,6 +48,19 @@ function Tag({testid, tag, onRemove, customClassName}: TagProps) {
       onRemove(tag);
     }
   }
+
+  function handleKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
+    event.stopPropagation();
+    switch (event.key) {
+      case "Enter":
+      case "Del":
+      case "Backspace":
+        handleRemove();
+        break;
+      default:
+        break;
+    }
+  }
 }
 
 export default Tag;
diff --git a/src/tag/_tag.scss b/src/tag/_tag.scss
index 3342697e..d219527b 100644
--- a/src/tag/_tag.scss
+++ b/src/tag/_tag.scss
@@ -23,6 +23,8 @@
 }
 
 .tag--is-removable {
+  cursor: pointer;
+
   &:hover {
     path {
       stroke: var(--text-color);

From b942c691ec3cf7edea505251411f627a72b4090b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Faruk=20Ko=C3=A7?= <mfarukkoc@gmail.com>
Date: Mon, 16 Aug 2021 12:34:45 +0300
Subject: [PATCH 2/3] refactor(tag): Refactor Tag with keyboardEventConstants

---
 src/tag/Tag.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index 6e6cb846..3fa80efb 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -5,6 +5,8 @@ import CloseIcon from "../ui/icons/close.svg";
 import React from "react";
 import classNames from "classnames";
 
+import {KEYBOARD_EVENT_KEY} from "../core/utils/keyboard/keyboardEventConstants";
+
 export interface TagShape<Context = any> {
   id: string;
   content: React.ReactNode;
@@ -52,9 +54,8 @@ function Tag({testid, tag, onRemove, customClassName}: TagProps) {
   function handleKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
     event.stopPropagation();
     switch (event.key) {
-      case "Enter":
-      case "Del":
-      case "Backspace":
+      case KEYBOARD_EVENT_KEY.ENTER:
+      case KEYBOARD_EVENT_KEY.BACKSPACE:
         handleRemove();
         break;
       default:

From 98f4485992ce95387774619fd4d04889ac9e6c76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Faruk=20Ko=C3=A7?= <mfarukkoc@gmail.com>
Date: Thu, 19 Aug 2021 18:49:36 +0300
Subject: [PATCH 3/3] refactor(tag): Add line breaks

---
 src/tag/Tag.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index 3fa80efb..ff8e3328 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -53,11 +53,13 @@ function Tag({testid, tag, onRemove, customClassName}: TagProps) {
 
   function handleKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
     event.stopPropagation();
+
     switch (event.key) {
       case KEYBOARD_EVENT_KEY.ENTER:
       case KEYBOARD_EVENT_KEY.BACKSPACE:
         handleRemove();
         break;
+
       default:
         break;
     }