Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-21 03:19:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

DEV: cleanup is-loading state of d-button component (#16012)

Browse Source 
* DEV: remove duplicate code in button component template

* DEV: refactor is-loading state of d-button component

Before this change on initialisation `forceDisabled` is set `false` and then might change to `undefined` - depending on the use of the button component. This change ensures a boolean value for `forceDisabled`.

The added test works with and without the new change. The test is added as it represents the default use case for most buttons.
This commit is contained in:
Ayke Halder 2022-02-22 18:40:47 +01:00 committed by GitHub
parent d4d3580761
commit e4d10a1f5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/d-button.js
View File

@ -25,7 +25,7 @@ export default Component.extend({
isLoading: computed({
set(key, value) {
this.set("forceDisabled", value);
this.set("forceDisabled", !!value);
return value;
},
}),

12
app/assets/javascripts/discourse/app/templates/components/d-button.hbs
View File

@ -1,12 +1,8 @@
{{#if icon}}
{{#if isLoading}}
{{~d-icon "spinner" class="loading-icon"~}}
{{else}}
{{~d-icon icon~}}
{{/if}}
{{#if isLoading}}
{{~d-icon "spinner" class="loading-icon"~}}
{{else}}
{{#if isLoading}}
{{~d-icon "spinner" class="loading-icon"~}}
{{#if icon}}
{{~d-icon icon~}}
{{/if}}
{{/if}}

36
app/assets/javascripts/discourse/tests/integration/components/d-button-test.js
View File

@ -99,6 +99,42 @@ discourseModule("Integration | Component | d-button", function (hooks) {
},
});
componentTest("button without isLoading attribute", {
template: hbs`{{d-button}}`,
test(assert) {
assert.notOk(
exists("button.is-loading"),
"it doesn't have class is-loading"
);
assert.notOk(
exists("button .loading-icon"),
"it doesn't have a spinner showing"
);
assert.notOk(exists("button[disabled]"), "it isn't disabled");
},
});
componentTest("isLoading button explicitly set to undefined state", {
template: hbs`{{d-button isLoading=isLoading}}`,
beforeEach() {
this.set("isLoading");
},
test(assert) {
assert.notOk(
exists("button.is-loading"),
"it doesn't have class is-loading"
);
assert.notOk(
exists("button .loading-icon"),
"it doesn't have a spinner showing"
);
assert.notOk(exists("button[disabled]"), "it isn't disabled");
},
});
componentTest("disabled button", {
template: hbs`{{d-button disabled=disabled}}`,