From 8de45602ffcbb829ea0edbf375010f432803c487 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 4 Apr 2023 10:04:40 +0200
Subject: [PATCH] DEV: allows <UserStatusMessage /> to accept custom css class
 (#20954)

This will now allow:

```
<UserStatusMessage @status={{@message.user.status}} @class="foo" />
```
---
 .../discourse/app/components/user-status-message.hbs   |  2 +-
 .../integration/components/user-status-message-test.js | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/user-status-message.hbs b/app/assets/javascripts/discourse/app/components/user-status-message.hbs
index c8a8dd566eb..5d3f22581f8 100644
--- a/app/assets/javascripts/discourse/app/components/user-status-message.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-status-message.hbs
@@ -1,4 +1,4 @@
-<span class="user-status-message">
+<span class={{concat-class "user-status-message" @class}}>
   {{emoji @status.emoji skipTitle=true}}
   {{#if @showDescription}}
     <span class="user-status-message-description">
diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js
index 15e174b83aa..f027f9bce9b 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js
@@ -154,4 +154,14 @@ module("Integration | Component | user-status-message", function (hooks) {
 
     assert.dom(".user-status-message").exists();
   });
+
+  test("accepts a custom css class", async function (assert) {
+    this.set("status", { emoji: "tooth", description: "off to dentist" });
+
+    await render(
+      hbs`<UserStatusMessage @status={{this.status}} @class="foo" />`
+    );
+
+    assert.dom(".user-status-message.foo").exists();
+  });
 });