compose: Add button to clear topic box.

Fixes part of #24889.

Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>

web/src/compose_actions.js

@@ -48,7 +48,7 @@ function hide_box() {
     // This is the main hook for saving drafts when closing the compose box.
     drafts.update_draft();
     blur_compose_inputs();
-    $("#stream_message_recipient_topic").hide();
+    $("#compose_recipient_box").hide();
     $("#compose-direct-recipient").hide();
     $(".new_message_textarea").css("min-height", "");
     compose_fade.clear_compose();

web/src/compose_recipient.js

@@ -165,14 +165,14 @@ function update_recipient_label(stream_id) {
 export function update_compose_for_message_type(message_type, opts) {
     if (message_type === "stream") {
         $("#compose-direct-recipient").hide();
-        $("#stream_message_recipient_topic").show();
+        $("#compose_recipient_box").show();
         $("#stream_toggle").addClass("active");
         $("#private_message_toggle").removeClass("active");
         $("#compose-recipient").removeClass("compose-recipient-direct-selected");
         update_recipient_label(opts.stream_id);
     } else {
         $("#compose-direct-recipient").show();
-        $("#stream_message_recipient_topic").hide();
+        $("#compose_recipient_box").hide();
         $("#stream_toggle").removeClass("active");
         $("#private_message_toggle").addClass("active");
         $("#compose-recipient").addClass("compose-recipient-direct-selected");

web/src/compose_setup.js

@@ -362,6 +362,25 @@ export function initialize() {
         compose_recipient.update_placeholder_text();
     });
 
+    $("#compose_recipient_box").on("click", "#recipient_box_clear_topic_button", () => {
+        const $input = $("#stream_message_recipient_topic");
+        const $button = $("#recipient_box_clear_topic_button");
+
+        $input.val("");
+        $input.trigger("focus");
+        $button.hide();
+    });
+
+    $("#compose_recipient_box").on("input", "#stream_message_recipient_topic", (e) => {
+        const $button = $("#recipient_box_clear_topic_button");
+        const value = $(e.target).val();
+        if (value.length === 0) {
+            $button.hide();
+        } else {
+            $button.show();
+        }
+    });
+
     $("#stream_message_recipient_topic").on("focus", () => {
         compose_recipient.update_placeholder_text();
     });

web/styles/compose.css

@@ -617,7 +617,7 @@ textarea.new_message_textarea {
 }
 
 textarea.new_message_textarea,
-.compose_table .recipient_box {
+#compose_recipient_box {
     border: 1px solid hsl(0deg 0% 0% / 20%);
     box-shadow: none;
     transition: border 0.2s ease;
@@ -630,11 +630,64 @@ textarea.new_message_textarea,
     }
 }
 
-input.recipient_box {
+#compose_recipient_box {
-    margin: 0;
+    display: flex;
-    padding: 0 6px;
+    flex: 1 1 0;
-    height: auto;
     border-radius: 3px;
+    background: hsl(0deg 0% 100%);
+
+    /* Give the recipient box, a `<div>`, the
+       correct styles when focus is in the
+       #stream_message_recipient_topic `<input>` */
+    &:focus-within {
+        outline: 0;
+        border: 1px solid hsl(0deg 0% 67%);
+        box-shadow: none;
+    }
+
+    #stream_message_recipient_topic,
+    #recipient_box_clear_topic_button {
+        background: none;
+        border: none;
+    }
+
+    /* Styles for input in the recipient_box */
+    #stream_message_recipient_topic {
+        /* Override inherited widths; flexbox will ensure
+           that it grows to fit. */
+        width: 0;
+        flex: 1 1 0;
+
+        /* Override flexbox's effective `max-content` min-width */
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        box-shadow: none;
+        outline: none;
+
+        padding: 4px 6px;
+    }
+
+    /* Styles for new conversation button in the recipient_box */
+    #recipient_box_clear_topic_button {
+        /* Set the border radius smaller, relative to the parent */
+        border-radius: 2px;
+        padding: 6px;
+        margin: 1px;
+
+        .zulip-icon {
+            display: block;
+        }
+
+        &:hover {
+            background-color: hsl(231deg 100% 90% / 20%);
+        }
+    }
+
+    /* This will reset the bootstrap margin-bottom: 10px value for the inputs */
+    & input {
+        margin-bottom: 0;
+    }
 }
 
 #compose_select_recipient_widget {
@@ -647,14 +700,6 @@ input.recipient_box {
     }
 }
 
-#stream_message_recipient_topic.recipient_box {
-    width: 100%;
-    /* This width roughly corresponds to how long of a topic can appear in
-       the left sidebar with a single digit unread count without being
-       cut off. */
-    max-width: 175px;
-}
-
 #private_message_recipient.recipient_box {
     width: 100%;
 }
@@ -748,7 +793,7 @@ input.recipient_box {
 
 #compose-recipient {
     display: flex;
-    width: 100%;
+    flex: 1 1 0;
     /* Use this containing flex element to
       establish the minimum height of all its
       children; the default `align-items: stretch`

web/styles/dark_theme.css

@@ -490,7 +490,8 @@
     .pill-container,
     .user-status-content-wrapper,
     #custom-expiration-time-input,
-    #org-join-settings .dropdown-widget-button {
+    #org-join-settings .dropdown-widget-button,
+    #compose_recipient_box {
         background-color: hsl(0deg 0% 0% / 20%);
         border-color: hsl(0deg 0% 0% / 60%);
         color: inherit;
@@ -597,7 +598,7 @@
     input[type="number"]:focus,
     textarea:focus,
     textarea.new_message_textarea:focus,
-    .compose_table .recipient_box:focus {
+    #compose_recipient_box:focus {
         border-color: hsl(0deg 0% 0% / 90%);
     }
 

web/templates/compose.hbs

@@ -63,7 +63,12 @@
                             <div class="topic-marker-container">
                                 <i class="fa fa-angle-right" aria-hidden="true"></i>
                             </div>
-                            <input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
+                            <div id="compose_recipient_box">
+                                <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
+                                <button type="button" id="recipient_box_clear_topic_button" class="button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
+                                    <i class="zulip-icon zulip-icon-close"></i>
+                                </button>
+                            </div>
                             <div id="compose-direct-recipient" class="pill-container" data-before="{{t 'You and' }}">
                                 <div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user...' }}"></div>
                             </div>

web/tests/compose_actions.test.js

@@ -134,7 +134,7 @@ test("start", ({override, override_rewire, mock_template}) => {
     let opts = {};
     start("stream", opts);
 
-    assert_visible("#stream_message_recipient_topic");
+    assert_visible("#compose_recipient_box");
     assert_hidden("#compose-direct-recipient");
 
     assert.equal(compose_state.stream_name(), "");