diff --git a/app/assets/javascripts/discourse/components/d-button.js.es6 b/app/assets/javascripts/discourse/components/d-button.js.es6 index f82df037b7b..359d058d24c 100644 --- a/app/assets/javascripts/discourse/components/d-button.js.es6 +++ b/app/assets/javascripts/discourse/components/d-button.js.es6 @@ -12,7 +12,7 @@ export default Component.extend({ type: "button", tagName: "button", - classNameBindings: [":btn", "noText", "btnType"], + classNameBindings: ["btnLink::btn", "btnLink", "noText", "btnType"], attributeBindings: [ "form", "disabled", @@ -24,6 +24,8 @@ export default Component.extend({ btnIcon: notEmpty("icon"), + btnLink: Ember.computed.equal("display", "link"), + @computed("icon", "translatedLabel") btnType(icon, translatedLabel) { if (icon) { diff --git a/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs b/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs index e249c7f98fd..639456d461d 100644 --- a/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs +++ b/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs @@ -2,7 +2,7 @@
{{/if}} diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss index 018fc94bdd4..0458330e000 100644 --- a/app/assets/stylesheets/common/components/buttons.scss +++ b/app/assets/stylesheets/common/components/buttons.scss @@ -275,3 +275,14 @@ } } } + +.btn-link { + background: transparent; + border: 0; + outline: 0; + padding: 0; + color: $tertiary; + &:focus { + outline: 1px currentColor dotted; + } +} diff --git a/test/javascripts/components/d-button-test.js.es6 b/test/javascripts/components/d-button-test.js.es6 index 46038cd5b53..cf86842b98f 100644 --- a/test/javascripts/components/d-button-test.js.es6 +++ b/test/javascripts/components/d-button-test.js.es6 @@ -43,3 +43,14 @@ componentTest("form attribute", { assert.ok(exists("button[form=login-form]"), "it has the form attribute"); } }); + +componentTest("link-styled button", { + template: '{{d-button display="link"}}', + + test(assert) { + assert.ok( + find("button.btn-link:not(.btn)").length, + "it has the right classes" + ); + } +});