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>
```
This commit is contained in:
Alan Guo Xiang Tan 2023-06-12 09:29:21 +09:00 committed by GitHub
parent 7dab8e7e22
commit b4611114f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,11 +1,13 @@
{{! template-lint-disable no-down-event-binding }} {{! template-lint-disable no-down-event-binding }}
<button <button
{{! For legacy compatibility. Prefer passing class as attributes. }} {{! For legacy compatibility. Prefer passing class as attributes. }}
class="{{@class}} class={{concat-class
{{if @isLoading 'is-loading'}} @class
{{if this.btnLink 'btn-link' 'btn'}} (if @isLoading "is-loading")
{{if this.noText 'no-text'}} (if this.btnLink "btn-link" "btn")
{{this.btnType}}" (if this.noText "no-text")
this.btnType
}}
{{! For legacy compatibility. Prefer passing these as html attributes. }} {{! For legacy compatibility. Prefer passing these as html attributes. }}
id={{@id}} id={{@id}}
form={{@form}} form={{@form}}