UX: composer use BEM + small tweaks to enabled/disabled styling (#21246)

- using BEM notation
- making animation linear instead of default ease
- small tweaks to composer state (disabled/send-disabled/send-enabled)
- fixing bug with disabled composer on mobile

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

@@ -17,14 +17,10 @@
     aria-label={{i18n "chat.aria_roles.composer"}}
     class={{concat-class
       "chat-composer"
-      (if this.isFocused "chat-composer--focused")
+      (if this.isFocused "is-focused")
-      (if this.pane.sending "chat-composer--sending")
+      (if this.pane.sending "is-sending")
-      (if
+      (if this.sendEnabled "is-send-enabled" "is-send-disabled")
-        this.sendEnabled
+      (if this.disabled "is-disabled")
-        "chat-composer--send-enabled"
-        "chat-composer--send-disabled"
-      )
-      (if this.disabled "chat-composer--disabled")
     }}
     {{did-update this.didUpdateMessage this.currentMessage}}
     {{did-update this.didUpdateInReplyTo this.currentMessage.inReplyTo}}

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

@@ -27,6 +27,14 @@
       color: var(--primary-low);
     }
   }
+
+  .chat-composer.is-disabled & {
+    background: var(--primary-400);
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
 }
 
 .chat-composer-dropdown__list {

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

@@ -1,7 +1,4 @@
 .chat-composer {
-  display: flex;
-  align-items: center;
-
   &__wrapper {
     display: flex;
     flex-direction: column;
@@ -39,12 +36,16 @@
     padding-inline: 0.25rem;
     min-height: 42px;
 
-    .chat-composer--focused & {
+    .chat-composer.is-focused & {
       border-color: var(--primary-medium);
     }
 
-    .chat-composer--disabled & {
+    .chat-composer.is-disabled & {
       background: var(--primary-low);
+
+      &:hover {
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -53,13 +54,24 @@
     background: none;
     will-change: scale;
 
-    .chat-composer--send-enabled & {
+    @keyframes sendingScales {
-      &:hover {
+      0% {
-        background: none;
+        transform: scale(0.9);
       }
+      50% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(0.9);
+      }
+    }
+    .chat-composer.is-sending & {
+      animation: sendingScales 1s infinite linear;
+    }
 
+    .chat-composer.is-send-enabled & {
+      background: var(--tertiary-50);
       &:focus {
-        background: none;
         outline: auto;
       }
 
@@ -68,26 +80,15 @@
       }
     }
 
-    @keyframes sendingScales {
+    .chat-composer.is-send-disabled & {
-      0% {
-        transform: scale(0.8);
-      }
-      50% {
-        transform: scale(1.2);
-      }
-      100% {
-        transform: scale(0.8);
-      }
-    }
-
-    .chat-composer--sending & {
-      animation: sendingScales 1s infinite;
-    }
-
-    .chat-composer--send-disabled & {
       cursor: default;
-      opacity: 0.6 !important;
+      &:hover {
+        background: none !important;
+      }
+    }
 
+    .chat-composer.is-disabled & {
+      opacity: 0.4;
       &:hover {
         background: none !important;
       }
@@ -145,6 +146,7 @@
     margin: 0;
     padding: 0.25rem 0.5rem;
     text-overflow: ellipsis;
+    cursor: inherit;
 
     @include chat-scrollbar();
 

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

@@ -1,7 +1,11 @@
-.chat-composer-container {
+.chat-composer {
-  padding: 0;
+  &__wrapper {
+    padding: 0;
+  }
 
-  .chat-composer {
+  &__input {
-    margin: 0.5rem 10px 0 10px;
+    .ios-device & {
+      background-color: transparent;
+    }
   }
 }

plugins/chat/spec/system/chat_composer_spec.rb

@@ -321,7 +321,7 @@ RSpec.describe "Chat composer", type: :system, js: true do
       chat.visit_channel(channel_1)
       find("body").send_keys("1")
 
-      expect(page).to have_css(".chat-composer--send-disabled")
+      expect(page).to have_css(".chat-composer.is-send-disabled")
     end
   end
 end

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

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

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

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