From b4611114f960e3aedcc6fa44d7f51c6148517b94 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Mon, 12 Jun 2023 09:29:21 +0900
Subject: [PATCH] DEV: Use `concat-class` helper when setting class for
 `DButton` (#21998)

Why this change?

Currently, we're interpolating within a string to set the class for the
`DButton` component. However, the interpolation and formatting of our
handlebars templates result in unnecessary spaces being added to the
class attribute.

```
<button class="sidebar-section-header sidebar-section-header-collapsable btn-flat

    btn
    no-text
    " aria-controls="sidebar-section-content-categories" aria-expanded="true" title="Toggle section" type="button">
  ...
</button>
```

This makes the HTML elements for buttons hard to read especially when
we're debugging issues in the console. After this change, this is what
we get:

```
<button class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" aria-controls="sidebar-section-content-categories" aria-expanded="true" title="Toggle section" type="button">
   ...
</button>
```
---
 .../discourse/app/components/d-button.hbs            | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-button.hbs b/app/assets/javascripts/discourse/app/components/d-button.hbs
index 09b44b2ed2e..4719a12dacd 100644
--- a/app/assets/javascripts/discourse/app/components/d-button.hbs
+++ b/app/assets/javascripts/discourse/app/components/d-button.hbs
@@ -1,11 +1,13 @@
 {{! template-lint-disable no-down-event-binding }}
 <button
   {{! For legacy compatibility. Prefer passing class as attributes. }}
-  class="{{@class}}
-    {{if @isLoading 'is-loading'}}
-    {{if this.btnLink 'btn-link' 'btn'}}
-    {{if this.noText 'no-text'}}
-    {{this.btnType}}"
+  class={{concat-class
+    @class
+    (if @isLoading "is-loading")
+    (if this.btnLink "btn-link" "btn")
+    (if this.noText "no-text")
+    this.btnType
+  }}
   {{! For legacy compatibility. Prefer passing these as html attributes. }}
   id={{@id}}
   form={{@form}}