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:
parent
7dab8e7e22
commit
b4611114f9
|
@ -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}}
|
||||||
|
|
Loading…
Reference in New Issue