From 6ab42fe056bfdc9e63d2ba398f7dda78234d0b27 Mon Sep 17 00:00:00 2001
From: wwhorton <whorton@gmail.com>
Date: Wed, 4 Oct 2023 12:27:27 -0400
Subject: [PATCH] Refactored pill component to allow entire pill to be
 clickable; updated pill.less to preserve styling (#466)

Co-authored-by: Bill Whorton <>
---
 src/components/Search/Pill.js   | 12 ++++++------
 src/components/Search/Pill.less |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Search/Pill.js b/src/components/Search/Pill.js
index 3bcfa9e1c..435a7a517 100644
--- a/src/components/Search/Pill.js
+++ b/src/components/Search/Pill.js
@@ -44,12 +44,12 @@ export const Pill = ({ fieldName, value }) => {
   };
 
   return (
-    <li className="pill flex-fixed">
-      <span className="name">
-        {prefix}
-        {trimmed}
-      </span>
-      <button onClick={remove}>
+    <li>
+      <button className="pill flex-fixed" onClick={remove}>
+        <span className="name">
+          {prefix}
+          {trimmed}
+        </span>
         <span className="u-visually-hidden">
           {`Remove ${trimmed} as a filter`}
         </span>
diff --git a/src/components/Search/Pill.less b/src/components/Search/Pill.less
index 861e70fbc..de14ed9bb 100644
--- a/src/components/Search/Pill.less
+++ b/src/components/Search/Pill.less
@@ -14,7 +14,7 @@
     cursor: pointer;
   }
   // Close button
-  button {
+  button, .cf-icon-svg {
     padding: 0;
     padding-left: 5px;
     border: 0;
@@ -22,7 +22,7 @@
     background-color: transparent;
     color: @teal-80;
     position: absolute;
-    right: 10px;
+    right: 15px;
     top: 50%;
     transform: translateY(-50%);
   }