Refactored pill component to allow entire pill to be clickable; updat…

…ed pill.less to preserve styling (#466) Co-authored-by: Bill Whorton <>
cfpb · Oct 4, 2023 · 6ab42fe · 6ab42fe
1 parent 358879f
commit 6ab42fe
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -14,15 +14,15 @@
     cursor: pointer;
   }
   // Close button
-  button {
+  button, .cf-icon-svg {
     padding: 0;
     padding-left: 5px;
     border: 0;
     margin: 0;
     background-color: transparent;
     color: @teal-80;
     position: absolute;
-    right: 10px;
+    right: 15px;
     top: 50%;
     transform: translateY(-50%);
   }