DEV: Use class attribute instead of @class arg (#24804)

plugins/chat/assets/javascripts/discourse/components/channel-title/index.gjs

@@ -67,9 +67,9 @@ export default class ChatChannelTitle extends Component {
               </span>
               {{#if this.showUserStatus}}
                 <UserStatusMessage
-                  @class="chat-channel-title__user-status-message"
                   @status={{get this.users "0.status"}}
                   @showDescription={{if this.site.mobileView "true"}}
+                  class="chat-channel-title__user-status-message"
                 />
               {{/if}}
               <PluginOutlet

plugins/chat/assets/javascripts/discourse/components/chat-browse-view.hbs

@@ -42,11 +42,11 @@
     </nav>
 
     <DcFilterInput
-      @class="filter-input"
+      {{did-insert (action this.focusFilterInput)}}
       @filterAction={{this.debouncedFiltering}}
       @icons={{hash right="search"}}
+      @containerClass="filter-input"
       placeholder={{i18n "chat.browse.filter_input_placeholder"}}
-      {{did-insert (action this.focusFilterInput)}}
     />
   </div>
 

plugins/chat/assets/javascripts/discourse/components/chat-channel-members.gjs

@@ -3,11 +3,11 @@ import { cached, tracked } from "@glimmer/tracking";
 import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
-import { schedule } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
 import DiscourseURL, { userPath } from "discourse/lib/url";
+import autoFocus from "discourse/modifiers/auto-focus";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import icon from "discourse-common/helpers/d-icon";
 import discourseDebounce from "discourse-common/lib/debounce";
@@ -31,12 +31,6 @@ export default class ChatChannelMembers extends Component {
   noMembershipsFoundLabel = I18n.t("chat.channel.no_memberships_found");
   noMembershipsLabel = I18n.t("chat.channel.no_memberships");
 
-  focusInput = modifier((element) => {
-    schedule("afterRender", () => {
-      element.focus();
-    });
-  });
-
   onEnter = modifier((element, [callback]) => {
     const handler = (event) => {
       if (event.key !== "Enter") {
@@ -138,11 +132,11 @@ export default class ChatChannelMembers extends Component {
     {{else}}
       <div class="chat-channel-members">
         <DcFilterInput
-          @class="chat-channel-members__filter"
+          {{autoFocus}}
           @filterAction={{this.mutFilter}}
           @icons={{hash right="search"}}
+          @containerClass="chat-channel-members__filter"
           placeholder={{this.filterPlaceholder}}
-          {{this.focusInput}}
         />
 
         <ul class="chat-channel-members__list" {{this.fill}}>

plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.gjs

@@ -66,12 +66,12 @@ export default class ChatChannelMessageEmojiPicker extends Component {
 
   <template>
     <ChatEmojiPicker
+      {{this.listenToBodyScroll}}
       @context="chat-channel-message"
       @didInsert={{this.didInsert}}
       @willDestroy={{this.willDestroy}}
       @didSelectEmoji={{this.didSelectEmoji}}
-      @class="hidden"
-      {{this.listenToBodyScroll}}
+      class="hidden"
     />
   </template>
 }

plugins/chat/assets/javascripts/discourse/components/chat-channel-settings.gjs

@@ -418,12 +418,12 @@ export default class ChatAboutScreen extends Component {
                     @content={{this.notificationLevels}}
                     @value={{@channel.currentUserMembership.desktopNotificationLevel}}
                     @valueProperty="value"
-                    @class="chat-channel-settings__selector chat-channel-settings__desktop-notifications-selector"
                     @onChange={{fn
                       this.saveNotificationSettings
                       "desktopNotificationLevel"
                       "desktop_notification_level"
                     }}
+                    class="chat-channel-settings__selector chat-channel-settings__desktop-notifications-selector"
                   />
                 </:action>
               </section.row>
@@ -436,12 +436,12 @@ export default class ChatAboutScreen extends Component {
                     @content={{this.notificationLevels}}
                     @value={{@channel.currentUserMembership.mobileNotificationLevel}}
                     @valueProperty="value"
-                    @class="chat-channel-settings__selector chat-channel-settings__mobile-notifications-selector"
                     @onChange={{fn
                       this.saveNotificationSettings
                       "mobileNotificationLevel"
                       "mobile_notification_level"
                     }}
+                    class="chat-channel-settings__selector chat-channel-settings__mobile-notifications-selector"
                   />
                 </:action>
               </section.row>

plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs

@@ -6,7 +6,6 @@
   <div
     class={{concat-class
       "chat-emoji-picker"
-      @class
       (if this.chatEmojiPickerManager.closing "closing")
     }}
     {{did-insert this.addClickOutsideEventListener}}
@@ -19,18 +18,18 @@
   >
     <div class="chat-emoji-picker__filter-container">
       <DcFilterInput
-        @class="chat-emoji-picker__filter"
-        @value={{this.chatEmojiPickerManager.picker.initialFilter}}
-        @filterAction={{action this.didInputFilter value="target.value"}}
-        @icons={{hash left="search"}}
-        placeholder={{i18n "chat.emoji_picker.search_placeholder"}}
-        autofocus={{true}}
         {{did-insert (if this.site.desktopView this.focusFilter (noop))}}
         {{did-insert
           (fn
             this.didInputFilter this.chatEmojiPickerManager.picker.initialFilter
           )
         }}
+        @value={{this.chatEmojiPickerManager.picker.initialFilter}}
+        @filterAction={{action this.didInputFilter value="target.value"}}
+        @icons={{hash left="search"}}
+        @containerClass="chat-emoji-picker__filter"
+        autofocus={{true}}
+        placeholder={{i18n "chat.emoji_picker.search_placeholder"}}
       >
         <div
           class="chat-emoji-picker__fitzpatrick-scale"

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.gjs

@@ -182,7 +182,6 @@ export default class ChatMessageActionsDesktop extends Component {
             )
           }}
             <DropdownSelectBox
-              @class="more-buttons secondary-actions"
               @options={{hash
                 icon="ellipsis-v"
                 placement="left"
@@ -191,6 +190,7 @@ export default class ChatMessageActionsDesktop extends Component {
               }}
               @content={{this.messageInteractor.secondaryActions}}
               @onChange={{this.messageInteractor.handleSecondaryActions}}
+              class="more-buttons secondary-actions"
             />
           {{/if}}
         </div>

plugins/chat/assets/javascripts/discourse/components/chat-to-topic-selector.hbs

@@ -52,8 +52,8 @@
       <CategoryChooser
         @id="new-topic-category-selector"
         @value={{this.categoryId}}
-        @class="small"
         @onChange={{action (mut this.categoryId)}}
+        class="small"
       />
 
       {{#if this.canAddTags}}

plugins/chat/assets/javascripts/discourse/components/chat/modal/channel-summary.gjs

@@ -64,7 +64,7 @@ export default class ChatModalChannelSummary extends Component {
           @content={{this.sinceOptions}}
           @onChange={{this.summarize}}
           @valueProperty="value"
-          @class="summarization-since"
+          class="summarization-since"
         />
         <ConditionalLoadingSection @isLoading={{this.loading}}>
           <p class="summary-area">{{this.summary}}</p>

plugins/chat/assets/javascripts/discourse/components/chat/modal/move-message-to-channel.gjs

@@ -83,10 +83,10 @@ export default class ChatModalMoveMessageToChannel extends Component {
         {{/if}}
 
         <ChatChannelChooser
-          @class="chat-modal-move-message-to-channel__channel-chooser"
           @content={{this.availableChannels}}
           @value={{this.destinationChannelId}}
           @nameProperty="title"
+          class="chat-modal-move-message-to-channel__channel-chooser"
         />
       </:body>
       <:footer>

plugins/chat/assets/javascripts/discourse/components/dc-filter-input.gjs

@@ -30,9 +30,9 @@ export default class DcFilterInput extends Component {
   <template>
     <div
       class={{concatClass
-        @class
+        @containerClass
         "dc-filter-input-container"
-        (if this.isFocused " is-focused")
+        (if this.isFocused "is-focused")
       }}
     >
       {{#if @icons.left}}
@@ -40,10 +40,10 @@ export default class DcFilterInput extends Component {
       {{/if}}
 
       <Input
-        class="dc-filter-input"
-        @value={{@value}}
-        {{on "input" (if @filterAction @filterAction (noop))}}
         {{this.focusState}}
+        {{on "input" (if @filterAction @filterAction (noop))}}
+        @value={{@value}}
+        class="dc-filter-input"
         ...attributes
       />
 

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

@@ -136,6 +136,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
   .chat-time {
     color: var(--primary-high);
     font-size: var(--font-down-2);
+    vertical-align: bottom;
   }
 
   .emoji-picker {

plugins/chat/test/javascripts/components/dc-filter-input-test.js

@@ -19,8 +19,8 @@ module("Discourse Chat | Component | dc-filter-input", function (hooks) {
     assert.true(exists(".d-icon-bell.-right"));
   });
 
-  test("Class attribute", async function (assert) {
-    await render(hbs`<DcFilterInput @class="foo" />`);
+  test("containerClass argument", async function (assert) {
+    await render(hbs`<DcFilterInput @containerClass="foo" />`);
 
     assert.true(exists(".dc-filter-input-container.foo"));
   });