From 84cf7f8677d8033ff03f6b2e337a2b71af8a3b52 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Fri, 24 May 2024 13:13:41 -0700
Subject: [PATCH] input pill: Remove pill-container-btn class in favor of
 search styling.

This style is currently only used for search suggestions. Soon,
styling for those suggestions will become more specific, and so
for now we'll keep those styles in search.css to be more clear
about what the new styles affect. If we want to repeat something
like this in the future somewhere else in the app, we can come
up with a generic styling then once we have a better idea of
what that will look like.
---
 web/styles/input_pill.css          | 14 --------------
 web/styles/search.css              |  8 ++++++++
 web/templates/search_list_item.hbs |  2 +-
 web/tests/search.test.js           |  6 +++---
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 52c19c7244..55e6bf470d 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -89,20 +89,6 @@
         }
     }
 
-    &.pill-container-btn {
-        cursor: pointer;
-        padding: 0;
-
-        .pill {
-            margin: 0;
-            border: none;
-
-            .exit {
-                display: none;
-            }
-        }
-    }
-
     .input {
         display: inline-block;
         padding: 2px 4px;
diff --git a/web/styles/search.css b/web/styles/search.css
index e5a4da9b35..a59bdee71f 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -246,10 +246,18 @@
 
         .search_list_item .pill-container {
             margin-left: 5px;
+            cursor: pointer;
+            padding: 0;
         }
 
         .pill {
             align-items: baseline;
+            margin: 0;
+            border: none;
+
+            .exit {
+                display: none;
+            }
         }
 
         .pill-image {
diff --git a/web/templates/search_list_item.hbs b/web/templates/search_list_item.hbs
index e977d28bc7..96404ade99 100644
--- a/web/templates/search_list_item.hbs
+++ b/web/templates/search_list_item.hbs
@@ -2,7 +2,7 @@
     <span>{{{ description_html }}}</span>
     {{#if is_people}}
     {{#each users}}
-        <span class="pill-container pill-container-btn">
+        <span class="pill-container">
             {{> input_pill user_pill_context}}
         </span>
     {{/each}}
diff --git a/web/tests/search.test.js b/web/tests/search.test.js
index 9a1908da9a..072e24313c 100644
--- a/web/tests/search.test.js
+++ b/web/tests/search.test.js
@@ -166,13 +166,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
             let expected_value = `<div class="search_list_item">\n    <span>Search for zo</span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[0]), expected_value);
 
-            expected_value = `<div class="search_list_item">\n    <span>sent by</span>\n        <span class="pill-container pill-container-btn">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n    <span class="pill-label">\n        <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n    <div class="exit">\n        <span aria-hidden="true">&times;</span>\n    </div>\n</div>\n        </span>\n</div>\n`;
+            expected_value = `<div class="search_list_item">\n    <span>sent by</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n    <span class="pill-label">\n        <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n    <div class="exit">\n        <span aria-hidden="true">&times;</span>\n    </div>\n</div>\n        </span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[1]), expected_value);
 
-            expected_value = `<div class="search_list_item">\n    <span>direct messages with</span>\n        <span class="pill-container pill-container-btn">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n    <span class="pill-label">\n        <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n    <div class="exit">\n        <span aria-hidden="true">&times;</span>\n    </div>\n</div>\n        </span>\n</div>\n`;
+            expected_value = `<div class="search_list_item">\n    <span>direct messages with</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n    <span class="pill-label">\n        <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n    <div class="exit">\n        <span aria-hidden="true">&times;</span>\n    </div>\n</div>\n        </span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[2]), expected_value);
 
-            expected_value = `<div class="search_list_item">\n    <span>group direct messages including</span>\n        <span class="pill-container pill-container-btn">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n    <span class="pill-label">\n        <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n    <div class="exit">\n        <span aria-hidden="true">&times;</span>\n    </div>\n</div>\n        </span>\n</div>\n`;
+            expected_value = `<div class="search_list_item">\n    <span>group direct messages including</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n    <span class="pill-label">\n        <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n    <div class="exit">\n        <span aria-hidden="true">&times;</span>\n    </div>\n</div>\n        </span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[3]), expected_value);
 
             /* Test sorter */