UX: chat composer buttons refactor + emoji (#21852)

- Made the emoji btn blue when composer is focused
- Moved everything chat-composer-button to its own file and BEM-ified it and making the choice to only work with our own is-disabled definition instead of with the attribute :disabled, for consistency

plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs

@@ -73,7 +73,7 @@
           {{#each this.inlineButtons as |button|}}
             <Chat::Composer::Button
               @icon={{button.icon}}
-              class={{button.id}}
+              class="-{{button.id}}"
               disabled={{or this.disabled button.disabled}}
               tabindex={{if button.disabled -1 0}}
               {{on
@@ -91,7 +91,7 @@
 
         <Chat::Composer::Button
           @icon="paper-plane"
-          class="chat-composer__send-btn primary"
+          class="-send"
           title={{i18n "chat.composer.send"}}
           disabled={{or this.disabled (not this.sendEnabled)}}
           tabindex={{if this.sendEnabled 0 -1}}

plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs

@@ -1,5 +1,5 @@
-<div class="chat-composer-button">
+<div class="chat-composer-button__wrapper">
-  <button type="button" class="chat-composer-button__btn" ...attributes>
+  <button type="button" class="chat-composer-button" ...attributes>
     {{d-icon @icon}}
   </button>
 </div>

plugins/chat/assets/stylesheets/common/chat-composer-button.scss

@@ -1,14 +1,76 @@
 .chat-composer-button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &__btn {
   box-sizing: border-box;
   width: 50px;
   border: 0;
   height: 50px;
   background: none;
+
+  .is-disabled & {
+    cursor: not-allowed;
+  }
+
+  &__wrapper {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .d-icon {
+    color: var(--primary-low-mid);
+
+    &:hover {
+      color: var(--primary-low-mid);
+    }
+
+    .is-send-disabled.is-focused & {
+      color: var(--primary-high);
+    }
+
+    .is-disabled & {
+      cursor: not-allowed;
+    }
+  }
+
+  &.-send {
+    will-change: scale;
+
+    @keyframes sendingScales {
+      0% {
+        transform: scale(0.9);
+      }
+      50% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(0.9);
+      }
+    }
+
+    .is-send-disabled & {
+      cursor: default;
+    }
+
+    .chat-composer.is-sending & {
+      animation: sendingScales 1s infinite linear;
+    }
+
+    .d-icon {
+      .is-send-enabled.is-focused & {
+        color: var(--tertiary);
+      }
+    }
+
+    &:hover {
+      .d-icon.is-send-enabled & {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  &.-emoji {
+    .d-icon.is-focused & {
+      color: var(--tertiary);
+    }
   }
 }

plugins/chat/assets/stylesheets/common/chat-composer.scss

@@ -63,73 +63,6 @@
     }
   }
 
-  .chat-composer-button__btn {
-    background: none;
-
-    &:not(:disabled) {
-      .d-icon {
-        color: var(--primary-high);
-      }
-
-      .no-touch & {
-        &:hover,
-        &:focus {
-          .d-icon {
-            color: var(--primary);
-          }
-
-          &.primary {
-            .d-icon {
-              color: var(--tertiary);
-            }
-          }
-        }
-      }
-
-      &.primary {
-        .d-icon {
-          color: var(--tertiary);
-        }
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-
-      .d-icon {
-        color: var(--primary-low-mid);
-      }
-    }
-  }
-
-  &__send-btn {
-    will-change: scale;
-
-    @keyframes sendingScales {
-      0% {
-        transform: scale(0.9);
-      }
-      50% {
-        transform: scale(1.2);
-      }
-      100% {
-        transform: scale(0.9);
-      }
-    }
-
-    .chat-composer.is-sending & {
-      animation: sendingScales 1s infinite linear;
-    }
-
-    &:not(:disabled) {
-      &:hover {
-        .d-icon {
-          transform: scale(1.2);
-        }
-      }
-    }
-  }
-
   &__input-container {
     display: flex;
     align-items: center;

plugins/chat/spec/system/page_objects/chat/chat_channel.rb

@@ -30,7 +30,7 @@ module PageObjects
       end
 
       def click_send_message
-        find(".chat-composer.is-send-enabled .chat-composer__send-btn").click
+        find(".chat-composer.is-send-enabled .chat-composer-button.-send").click
       end
 
       def message_by_id_selector(id)

plugins/chat/spec/system/page_objects/chat/chat_thread.rb

@@ -68,7 +68,7 @@ module PageObjects
       end
 
       def click_send_message
-        find(".chat-thread .chat-composer.is-send-enabled .chat-composer__send-btn").click
+        find(".chat-thread .chat-composer.is-send-enabled .chat-composer-button.-send").click
       end
 
       def has_message?(text: nil, id: nil, thread_id: nil)

plugins/chat/spec/system/page_objects/chat/components/composer.rb

@@ -67,7 +67,7 @@ module PageObjects
         end
 
         def open_emoji_picker
-          find(context).find(SELECTOR).find(".chat-composer-button__btn.emoji").click
+          find(context).find(SELECTOR).find(".chat-composer-button.-emoji").click
         end
 
         def editing_message?(message)

plugins/chat/spec/system/silenced_user_spec.rb

@@ -30,7 +30,7 @@ RSpec.describe "Silenced user", type: :system, js: true do
     it "disables the send button" do
       chat.visit_channel(channel_1)
 
-      expect(page).to have_css(".chat-composer__send-btn[disabled]")
+      expect(page).to have_css(".chat-composer-button.-send[disabled]")
     end
 
     it "prevents reactions" do

plugins/chat/test/javascripts/acceptance/chat-composer-test.js

@@ -98,7 +98,7 @@ acceptance("Discourse Chat - Composer - unreliable network", function (needs) {
   skip("Sending a message with unreliable network", async function (assert) {
     await visit("/chat/c/-/11");
     await fillIn(".chat-composer__input", "network-error-message");
-    await click(".send-btn");
+    await click(".chat-composer-button.-send");
 
     assert.ok(
       exists(".chat-message-container[data-id='1'] .retry-staged-message-btn"),
@@ -106,7 +106,7 @@ acceptance("Discourse Chat - Composer - unreliable network", function (needs) {
     );
 
     await fillIn(".chat-composer__input", "network-error-message");
-    await click(".send-btn");
+    await click(".chat-composer-button.-send");
     await publishToMessageBus(`/chat/11`, {
       type: "sent",
       staged_id: 1,