DEV: Convert <button> tags to {{d-button}} components (#8224)

* DEV: Convert <button> tags to {{d-button}} * Fixes
2019-11-04 11:23:54 +01:00 · 2019-11-04 11:23:54 +01:00 · d43e7354ec
parent b7327d2c34
commit d43e7354ec
49 changed files with 317 additions and 126 deletions
--- a/app/assets/javascripts/admin/templates/badges-show.hbs
+++ b/app/assets/javascripts/admin/templates/badges-show.hbs
@ -39,7 +39,10 @@
          content=badgeGroupings
          class="badge-selector"
          nameProperty="name"}}
-        <button {{action "editGroupings"}} class='btn btn-icon no-text btn-default'>{{d-icon "pencil-alt"}}</button>
+        {{d-button
+          class="btn-default"
+          action=(route-action "editGroupings")
+          icon="pencil-alt"}}
      </div>
    </div>

@ -138,7 +141,11 @@
    </div>

    <div class='buttons'>
-      <button {{action "save"}} disabled={{saving}} class='btn btn-primary'>{{i18n 'admin.badges.save'}}</button>
+      {{d-button
+        class="btn-primary"
+        action=(action "save")
+        disabled=saving
+        label="admin.badges.save"}}
      <span class='saving'>{{savingStatus}}</span>
      {{#unless readOnly}}
        <a {{action "destroy"}} class='delete-link'>{{i18n 'admin.badges.delete'}}</a>
--- a/app/assets/javascripts/admin/templates/customize-colors-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-colors-show.hbs
@ -3,15 +3,31 @@
    <h1>{{#if model.theme_id}}{{model.name}}{{else}}{{text-field class="style-name" value=model.name}}{{/if}}</h1>
    <div class="controls">
      {{#unless model.theme_id}}
-      <button {{action "save"}} disabled={{model.disableSave}} class='btn btn-primary'>{{i18n 'admin.customize.save'}}</button>
+      {{d-button
+        class="btn-primary"
+        action=(action "save")
+        disabled=model.disableSave
+        label="admin.customize.save"}}
      {{/unless}}
-      <button {{action "copy" model}} class='btn btn-default'>{{d-icon "copy"}} {{i18n 'admin.customize.copy'}}</button>
-      <button {{action "copyToClipboard" model}} class='btn btn-default'>{{d-icon "far-clipboard"}} {{i18n 'admin.customize.copy_to_clipboard'}}</button>
+      {{d-button
+        class="btn-default"
+        action=(action "copy" model)
+        icon="copy"
+        label="admin.customize.copy"}}
+      {{d-button
+        class="btn-default"
+        action=(action "copyToClipboard" model)
+        icon="far-clipboard"
+        label="admin.customize.copy_to_clipboard"}}
      {{#if model.theme_id}}
      {{i18n "admin.customize.theme_owner"}}
      {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}
      {{else}}
-      <button {{action "destroy"}} class='btn btn-danger'>{{d-icon "far-trash-alt"}} {{i18n 'admin.customize.delete'}}</button>
+      {{d-button
+        action=(action "destroy")
+        class="btn-danger"
+        icon="far-trash-alt"
+        label="admin.customize.delete"}}
      {{/if}}
      <span class="saving {{unless model.savingStatus 'hidden'}}">{{model.savingStatus}}</span>
    </div>
@ -46,8 +62,16 @@
            <td class="hex">{{color-input hexValue=c.hex brightnessValue=c.brightness valid=c.valid}}</td>
            <td class="actions">
            {{#unless model.theme_id}}
-              <button class="btn btn-default revert {{unless c.savedIsOverriden 'invisible'}}" {{action "revert" c}} title="{{i18n 'admin.customize.colors.revert_title'}}">{{i18n 'revert'}}</button>
-              <button class="btn btn-default undo {{unless c.changed 'invisible'}}" {{action "undo" c}} title="{{i18n 'admin.customize.colors.undo_title'}}">{{i18n 'undo'}}</button>
+              {{d-button
+                class=(concat "btn-default revert " (unless c.savedIsOverriden "invisible"))
+                action=(action "revert" c)
+                title="admin.customize.colors.revert_title"
+                label="revert"}}
+              {{d-button
+                class=(concat "btn-default undo " (unless c.changed "invisible"))
+                action=(action "undo" c)
+                title="admin.customize.colors.undo_title"
+                label="undo"}}
            {{/unless}}
            </td>
          </tr>
--- a/app/assets/javascripts/admin/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
@ -171,7 +171,10 @@
      </div>
    {{/if}}

-    {{#d-button action=(action "editTheme") class="btn btn-default edit"}}{{i18n 'admin.customize.theme.edit_css_html'}}{{/d-button}}
+    {{d-button
+      class="btn-default edit"
+      action=(action "editTheme")
+      label="admin.customize.theme.edit_css_html"}}
  </div>

  <div class="control-unit">
--- a/app/assets/javascripts/admin/templates/email-advanced-test.hbs
+++ b/app/assets/javascripts/admin/templates/email-advanced-test.hbs
@ -3,7 +3,9 @@
 <div class='email-advanced-test'>
  <label for="email">{{i18n 'admin.email.advanced_test.email'}}</label>
  {{textarea name="email" value=email class="email-body"}}
-  <button class='btn' {{action "run"}}>{{i18n 'admin.email.advanced_test.run'}}</button>
+  {{d-button
+    action=(action "run")
+    label="admin.email.advanced_test.run"}}
 </div>

 {{#conditional-loading-spinner condition=loading}}
--- a/app/assets/javascripts/admin/templates/email-index.hbs
+++ b/app/assets/javascripts/admin/templates/email-index.hbs
@ -20,7 +20,11 @@
    {{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
  </div>
  <div class='controls'>
-    <button class='btn btn-primary' {{action "sendTestEmail"}} disabled={{sendTestEmailDisabled}}>{{i18n 'admin.email.send_test'}}</button>
+    {{d-button
+      class="btn-primary"
+      action=(action "sendTestEmail")
+      disabled=sendTestEmailDisabled
+      label="admin.email.send_test"}}
    {{#if sentTestEmailMessage}}<span class='result-message'>{{sentTestEmailMessage}}</span>{{/if}}
  </div>
  {{/if}}
--- a/app/assets/javascripts/admin/templates/email-preview-digest.hbs
+++ b/app/assets/javascripts/admin/templates/email-preview-digest.hbs
@ -6,7 +6,10 @@
    {{date-picker-past value=lastSeen id="last-seen"}}
    <label>{{i18n 'admin.email.user'}}:</label>
    {{user-selector single="true" usernames=username canReceiveUpdates="true"}}
-    <button class='btn btn-primary digest-refresh-button' {{action "refresh"}}>{{i18n 'admin.email.refresh'}}</button>
+    {{d-button
+      class="btn-primary digest-refresh-button"
+      action=(action "refresh")
+      label="admin.email.refresh"}}
    <div class="toggle">
      <label>{{i18n 'admin.email.format'}}</label>
      {{#if showHtml}}
@ -30,7 +33,11 @@
        {{else}}
          <label>{{i18n 'admin.email.send_digest_label'}}</label>
          {{text-field value=email placeholderKey="admin.email.test_email_address"}}
-          <button class='btn btn-default' {{action "sendEmail"}} disabled={{sendEmailDisabled}}>{{i18n 'admin.email.send_digest'}}</button>
+          {{d-button
+            class="btn-default"
+            action=(action "sendEmail")
+            disabled=sendEmailDisabled
+            label="admin.email.send_digest"}}
          {{#if sentEmail}}
            <span class='result-message'>{{i18n 'admin.email.sent_test'}}</span>
          {{/if}}
--- a/app/assets/javascripts/admin/templates/emojis.hbs
+++ b/app/assets/javascripts/admin/templates/emojis.hbs
@ -20,7 +20,12 @@
            <tr>
              <th><img class="emoji emoji-custom" src="{{unbound e.url}}" title="{{unbound e.name}}"></th>
              <th>:{{e.name}}:</th>
-              <th><button {{action "destroy" e}} class='btn btn-danger no-text pull-right'>{{d-icon "far-trash-alt"}} </button></th>
+              <th>
+                {{d-button
+                  action=(action "destroy" e)
+                  class="btn-danger pull-right"
+                  icon="far-trash-alt"}}
+              </th>
            </tr>
          {{/each}}
        </tbody>
--- a/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
@ -1,7 +1,13 @@
 <p>
  {{i18n 'admin.logs.screened_emails.description'}}
 </p>
-  <button class="btn btn-default screened-email-export" {{action "exportScreenedEmailList"}} title="{{i18n 'admin.export_csv.button_title.screened_email'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
+
+{{d-button
+  class="btn-default screened-email-export"
+  action=(action "exportScreenedEmailList")
+  title="admin.export_csv.button_title.screened_email"
+  icon="download"
+  label="admin.export_csv.button_text"}}

 <br>

--- a/app/assets/javascripts/admin/templates/logs/screened-urls.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened-urls.hbs
@ -1,7 +1,12 @@
 <p>
  {{i18n 'admin.logs.screened_urls.description'}}
 </p>
-  <button class="btn btn-default" {{action "exportScreenedUrlList"}} title="{{i18n 'admin.export_csv.button_title.screened_url'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
+  {{d-button
+    class="btn-default"
+    action=(action "exportScreenedUrlList")
+    title="admin.export_csv.button_title.screened_url"
+    icon="download"
+    label="admin.export_csv.button_text"}}
 <br>

 {{#conditional-loading-spinner condition=loading}}
--- a/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
@ -7,6 +7,10 @@
                   valueAttribute="base_scheme_id"}}
  {{/d-modal-body}}
  <div class="modal-footer">
-    <button class='btn btn-primary' {{action "selectBase"}}>{{d-icon 'plus'}}{{i18n 'admin.customize.new'}}</button>
+    {{d-button
+      class="btn-primary"
+      action=(action "selectBase")
+      icon="plus"
+      label="admin.customize.new"}}
  </div>
 </div>
--- a/app/assets/javascripts/admin/templates/modal/admin-start-backup.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-start-backup.hbs
@ -1,5 +1,12 @@
 {{#d-modal-body title="admin.backups.operations.backup.confirm"}}
-  <button {{action "startBackupWithUploads"}} class="btn btn-primary">{{i18n 'yes_value'}}</button>
-  <button {{action "startBackupWithoutUploads"}} class="btn">{{i18n 'admin.backups.operations.backup.without_uploads'}}</button>
-  <button {{action "cancel"}} class="btn">{{i18n 'no_value'}}</button>
+  {{d-button
+    class="btn-primary"
+    action=(action "startBackupWithUploads")
+    label="yes_value"}}
+  {{d-button
+    action=(action "startBackupWithoutUploads")
+    label="admin.backups.operations.backup.without_uploads"}}
+  {{d-button
+    action=(action "cancel")
+    label="no_value"}}
 {{/d-modal-body}}
--- a/app/assets/javascripts/admin/templates/modal/admin-theme-change.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-theme-change.hbs
@ -3,6 +3,9 @@
    {{{diff}}}
  {{/d-modal-body}}
  <div class="modal-footer">
-    {{d-button class="btn btn-primary" action=(route-action "closeModal") label="close"}}
+    {{d-button
+      class="btn-primary"
+      action=(route-action "closeModal")
+      label="close"}}
  </div>
 </div>
--- a/app/assets/javascripts/admin/templates/user-badges.hbs
+++ b/app/assets/javascripts/admin/templates/user-badges.hbs
@ -22,7 +22,10 @@
      <label>{{i18n 'admin.badges.reason'}}</label>
      {{input type="text" value=badgeReason}}<br><small>{{i18n 'admin.badges.reason_help'}}</small>
      </div>
-      <button class='btn btn-primary' {{action "grantBadge"}}>{{i18n 'admin.badges.grant'}}</button>
+      {{d-button
+        class="btn-primary"
+        action=(action "grantBadge")
+        label="admin.badges.grant"}}
    </form>
    {{/if}}

@ -52,9 +55,14 @@
          <td>{{age-with-tooltip userBadge.granted_at}}</td>
          <td>
            {{#if userBadge.grouped}}
-              <button class='btn' {{action "expandGroup" userBadge}}>{{{i18n 'admin.badges.expand'}}}</button>
+              {{d-button
+                action=(action "expandGroup" userBadge)
+                label="admin.badges.expand"}}
            {{else}}
-              <button class='btn btn-danger' {{action "revokeBadge" userBadge}}>{{i18n 'admin.badges.revoke'}}</button>
+              {{d-button
+                class="btn-danger"
+                action=(action "revokeBadge" userBadge)
+                label="admin.badges.revoke"}}
            {{/if}}
          </td>
        </tr>
--- a/app/assets/javascripts/admin/templates/users-list-show.hbs
+++ b/app/assets/javascripts/admin/templates/users-list-show.hbs
@ -1,16 +1,22 @@
 <div class="admin-title">
  <h2>{{title}}</h2>
  {{#if canCheckEmails}}
-      {{#if showEmails}}
-        <button {{action "toggleEmailVisibility"}} class="hide-emails btn btn-default">{{i18n 'admin.users.hide_emails'}}</button>
-      {{else}}
-        <button {{action "toggleEmailVisibility"}} class="show-emails btn btn-default">{{i18n 'admin.users.show_emails'}}</button>
-      {{/if}}
+    {{#if showEmails}}
+      {{d-button
+        action=(action "toggleEmailVisibility")
+        class="hide-emails btn-default"
+        label="admin.users.hide_emails"}}
+    {{else}}
+      {{d-button
+        action=(action "toggleEmailVisibility")
+        class="show-emails btn-default"
+        label="admin.users.show_emails"}}
+    {{/if}}
  {{/if}}
 </div>
+
 <div class='username controls'>
  {{text-field value=listFilter placeholder=searchHint}}
-
 </div>

 {{#load-more selector=".users-list tr" action=(action "loadMore")}}
--- a/app/assets/javascripts/discourse/components/badge-title.js.es6
+++ b/app/assets/javascripts/discourse/components/badge-title.js.es6
@ -8,11 +8,6 @@ export default Component.extend({
  saved: false,
  saving: false,

-  @computed("saving")
-  savingStatus(saving) {
-    return saving ? I18n.t("saving") : I18n.t("save");
-  },
-
  @computed("selectableUserBadges", "selectedUserBadgeId")
  selectedUserBadge(selectableUserBadges, selectedUserBadgeId) {
    return selectableUserBadges.findBy("id", parseInt(selectedUserBadgeId));
--- a/app/assets/javascripts/discourse/controllers/change-owner.js.es6
+++ b/app/assets/javascripts/discourse/controllers/change-owner.js.es6
@ -21,11 +21,6 @@ export default Controller.extend(ModalFunctionality, {
    return saving || isEmpty(newUser);
  },

-  @computed("saving")
-  buttonTitle(saving) {
-    return saving ? I18n.t("saving") : I18n.t("topic.change_owner.action");
-  },
-
  onShow() {
    this.setProperties({
      saving: false,
--- a/app/assets/javascripts/discourse/controllers/full-page-search.js.es6
+++ b/app/assets/javascripts/discourse/controllers/full-page-search.js.es6
@ -16,7 +16,6 @@ import {
 import Category from "discourse/models/category";
 import { escapeExpression } from "discourse/lib/utilities";
 import { setTransient } from "discourse/lib/page-tracker";
-import { iconHTML } from "discourse-common/lib/icon-library";
 import Composer from "discourse/models/composer";
 import { scrollTop } from "discourse/mixins/scroll-top";

@ -199,11 +198,6 @@ export default Controller.extend({
    return this.currentUser && userCanCreateTopic;
  },

-  @computed("expanded")
-  searchAdvancedIcon(expanded) {
-    return iconHTML(expanded ? "caret-down" : "caret-right");
-  },
-
  @computed("page")
  isLastPage(page) {
    return page === PAGE_LIMIT;
--- a/app/assets/javascripts/discourse/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/templates/badges/show.hbs
@ -13,7 +13,7 @@
          <div class='grant-info-item'>
            {{i18n 'badges.allow_title'}}
            {{d-button
-              class="btn btn-default pad-left no-text"
+              class="btn-default pad-left"
              action=(action "toggleSetUserTitle")
              icon="pencil-alt"}}
          </div>
--- a/app/assets/javascripts/discourse/templates/components/badge-title.hbs
+++ b/app/assets/javascripts/discourse/templates/components/badge-title.hbs
@ -18,7 +18,11 @@

    <div class="control-group">
      <div class="controls">
-        <button class="btn btn-primary" disabled={{saving}} {{action "save"}}> {{savingStatus}} </button>
+        {{d-button
+          class="btn-primary"
+          action=(action "save")
+          disabled=saving
+          label=(if saving "saving" "save")}}
        {{#if saved}}{{i18n 'saved'}}{{/if}}
      </div>
    </div>
--- a/app/assets/javascripts/discourse/templates/components/create-topic-button.hbs
+++ b/app/assets/javascripts/discourse/templates/components/create-topic-button.hbs
@ -1,7 +1,7 @@
 {{#if canCreateTopic}}
  {{d-button
+    class="btn-default"
    id="create-topic"
-    class="btn btn-default"
    action=action
    icon="plus"
    disabled=disabled
--- a/app/assets/javascripts/discourse/templates/components/edit-category-security.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-security.hbs
@ -47,7 +47,10 @@
    {{/if}}
  {{else}}
    {{#unless category.is_special}}
-      <button {{action "editPermissions"}} class="btn btn-default btn-default edit-permission">{{i18n 'category.edit_permissions'}}</button>
+      {{d-button
+        action=(action "editPermissions")
+        class="btn-default edit-permission"
+        label="category.edit_permissions"}}
    {{/unless}}
  {{/if}}
 </section>
--- a/app/assets/javascripts/discourse/templates/components/ip-lookup.hbs
+++ b/app/assets/javascripts/discourse/templates/components/ip-lookup.hbs
@ -1,8 +1,9 @@
 {{#if ip}}
-  <button class="btn btn-default" {{action "lookup"}}>
-    {{d-icon "globe"}}
-    {{i18n "admin.user.ip_lookup"}}
-  </button>
+  {{d-button
+    class="btn-default"
+    action=(action "lookup")
+    icon="globe"
+    label="admin.user.ip_lookup"}}
 {{/if}}
 {{#if show}}
  <div class="location-box">
@ -44,10 +45,13 @@
        {{i18n "ip_lookup.other_accounts"}}
        <strong>{{totalOthersWithSameIP}}</strong>
        {{#if other_accounts.length}}
-          <button class="btn btn-danger pull-right" {{action "deleteOtherAccounts"}}>
-            {{d-icon "warning"}}
+          {{#d-button
+            class="btn-danger pull-right"
+            action=(action "deleteOtherAccounts")
+            icon="warning"
+          }}
            {{i18n "ip_lookup.delete_other_accounts" count=otherAccountsToDelete}}
-          </button>
+          {{/d-button}}
        {{/if}}
      </dt>

--- a/app/assets/javascripts/discourse/templates/components/modal-footer-close.hbs
+++ b/app/assets/javascripts/discourse/templates/components/modal-footer-close.hbs
@ -1,3 +1,6 @@
 <div class="modal-footer">
-  {{d-button class="btn btn-primary" action=(route-action "closeModal") label="close"}}
+  {{d-button
+    class="btn-primary"
+    action=(route-action "closeModal")
+    label="close"}}
 </div>
--- a/app/assets/javascripts/discourse/templates/components/tag-groups-form.hbs
+++ b/app/assets/javascripts/discourse/templates/components/tag-groups-form.hbs
@ -72,6 +72,16 @@
    </div>
  </section>

-  <button {{action "save"}} disabled={{savingDisabled}} class='btn btn-default'>{{i18n 'tagging.groups.save'}}</button>
-  <button {{action "destroy"}} disabled={{buffered.isNew}} class='btn btn-danger'>{{d-icon "far-trash-alt"}} {{i18n 'tagging.groups.delete'}}</button>
+  {{d-button
+    class="btn-default"
+    action=(action "save")
+    disabled=savingDisabled
+    label="tagging.groups.save"}}
+
+  {{d-button
+    class="btn-danger"
+    action=(action "destroy")
+    disabled=buffered.isNew
+    icon="far-trash-alt"
+    label="tagging.groups.delete"}}
 </div>
--- a/app/assets/javascripts/discourse/templates/components/user-stream-item.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-stream-item.hbs
@ -48,9 +48,11 @@
    {{d-icon child.icon class="icon"}}
    {{#each child.items as |grandChild|}}
      {{#if grandChild.removableBookmark}}
-        <button class="btn btn-default remove-bookmark" {{action removeBookmark grandChild}}>
-          {{d-icon 'times'}} {{i18n "bookmarks.remove"}}
-        </button>
+        {{d-button
+          class="btn-default remove-bookmark"
+          action=(action removeBookmark grandChild)
+          icon="times"
+          label="bookmarks.remove"}}
      {{else}}
          <a href={{grandChild.userUrl}} data-user-card={{grandChild.username}} class='avatar-link'><div class='avatar-wrapper'>{{avatar grandChild imageSize="tiny" extraClasses="actor" ignoreTitle="true" avatarTemplatePath="acting_avatar_template"}}</div></a>
          {{#if grandChild.edit_reason}} &mdash; <span class="edit-reason">{{grandChild.edit_reason}}</span>{{/if}}
--- a/app/assets/javascripts/discourse/templates/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/templates/discovery/topics.hbs
@ -5,10 +5,20 @@
 {{#if showDismissAtTop}}
  <div class="row">
    {{#if showDismissRead}}
-      <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics-top' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
+      {{d-button
+        class="btn-default dismiss-read"
+        id="dismiss-topics-top"
+        action=(action "dismissReadPosts")
+        title="topics.bulk.dismiss_tooltip"
+        label="topics.bulk.dismiss_button"}}
    {{/if}}
    {{#if showResetNew}}
-    <button id='dismiss-new-top' class='btn btn-default dismiss-read' {{action "resetNew"}}>{{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
+      {{d-button
+        class="btn-default dismiss-read"
+        id="dismiss-new-top"
+        action=(action "resetNew")
+        icon="check"
+        label="topics.bulk.dismiss_new"}}
    {{/if}}
  </div>
 {{/if}}
@ -70,11 +80,20 @@
  {{conditional-loading-spinner condition=model.loadingMore}}
  {{#if allLoaded}}
    {{#if showDismissRead}}
-      <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
+      {{d-button
+        class="btn-default dismiss-read"
+        id="dismiss-topics"
+        action=(action "dismissReadPosts")
+        title="topics.bulk.dismiss_tooltip"
+        label="topics.bulk.dismiss_button"}}
    {{/if}}
    {{#if showResetNew}}
-      <button id='dismiss-new' class='btn btn-default dismiss-read' {{action "resetNew"}}>
-        {{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
+      {{d-button
+        class="btn-default dismiss-read"
+        action=(action "resetNew")
+        id="dismiss-new"
+        icon="check"
+        label="topics.bulk.dismiss_new"}}
    {{/if}}

    {{#footer-message education=footerEducation message=footerMessage}}
--- a/app/assets/javascripts/discourse/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/templates/full-page-search.hbs
@ -179,9 +179,11 @@
    {{/if}}

    {{#if site.mobileView}}
-      <button class="search-advanced-title btn" {{action "toggleAdvancedSearch"}}>
-        {{{searchAdvancedIcon}}} {{i18n "search.advanced.title"}}
-      </button>
+      {{d-button
+        class="search-advanced-title"
+        action=(action "toggleAdvancedSearch")
+        icon=(if expanded "caret-down" "caret-right")
+        label="search.advanced.title"}}
    {{else}}
      <span class="search-advanced-title">
        {{i18n "search.advanced.title"}}
--- a/app/assets/javascripts/discourse/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/templates/invites/show.hbs
@ -56,7 +56,11 @@
            </div>
          {{/if}}

-          <button class='btn btn-primary' {{action "submit"}} disabled={{submitDisabled}}>{{i18n 'invites.accept_invite'}}</button>
+          {{d-button
+            class="btn-primary"
+            action=(action "submit")
+            disabled=submitDisabled
+            label="invites.accept_invite"}}

          {{#if errorMessage}}
            <br/><br/>
--- a/app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs
@ -30,12 +30,20 @@
  {{conditional-loading-spinner condition=model.loadingMore}}
  {{#if allLoaded}}
    {{#if showDismissRead}}
-      <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
+      {{d-button
+        class="btn-default dismiss-read"
+        id="dismiss-topics"
+        action=(action "dismissReadPosts")
+        title="topics.bulk.dismiss_tooltip"
+        label="topics.bulk.dismiss_button"}}
    {{/if}}
    {{#if showResetNew}}
-      <button id='dismiss-new' class='btn btn-default dismiss-read' {{action "resetNew"}}>
-        {{d-icon "check"}}
-        {{i18n 'topics.bulk.dismiss_new'}}</button>
+      {{d-button
+        class="btn-default dismiss-read"
+        id="dismiss-new"
+        action=(action "resetNew")
+        icon="check"
+        label="topics.bulk.dismiss_new"}}
    {{/if}}

    {{#footer-message education=footerEducation message=footerMessage}}
--- a/app/assets/javascripts/discourse/templates/modal/auth-token.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/auth-token.hbs
@ -30,6 +30,10 @@
 {{/d-modal-body}}

 <div class="modal-footer">
-  {{d-button class="btn btn-primary" icon="lock" label="user.auth_tokens.secure_account" action=(action "highlightSecure")}}
+  {{d-button
+    class="btn-primary"
+    action=(action "highlightSecure")
+    icon="lock"
+    label="user.auth_tokens.secure_account"}}
  {{d-modal-cancel close=(route-action "closeModal")}}
 </div>
--- a/app/assets/javascripts/discourse/templates/modal/bulk-notification-level.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/bulk-notification-level.hbs
@ -7,4 +7,7 @@
  </div>
 {{/each}}

-<button class='btn' disabled={{disabled}} {{action "changeNotificationLevel"}}>{{i18n 'topics.bulk.notification_level'}}</button>
+{{d-button
+  disabled=disabled
+  action=(action "changeNotificationLevel")
+  label="topics.bulk.notification_level"}}
--- a/app/assets/javascripts/discourse/templates/modal/change-owner.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/change-owner.hbs
@ -11,5 +11,9 @@
 {{/d-modal-body}}

 <div class="modal-footer">
-  <button class='btn btn-primary' disabled={{buttonDisabled}} {{action "changeOwnershipOfPosts"}}>{{buttonTitle}}</button>
+  {{d-button
+    class="btn-primary"
+    action=(action "changeOwnershipOfPosts")
+    disabled=buttonDisabled
+    label=(if saving "saving" "topic.change_owner.action")}}
 </div>
--- a/app/assets/javascripts/discourse/templates/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
@ -113,10 +113,14 @@

    {{#if showCreateForm}}
      <div class="modal-footer">
-        <button class='btn btn-large btn-primary' disabled={{submitDisabled}} {{action "createAccount"}}>{{i18n 'create_account.title'}}</button>
+        {{d-button
+          class="btn-large btn-primary"
+          action=(action "createAccount")
+          disabled=submitDisabled
+          label="create_account.title"}}

        {{#conditional-loading-spinner condition=formSubmitted size="small"}}
-          {{#d-button class="btn btn-large" id="login-link" action=(route-action "showLogin")}}
+          {{#d-button class="btn-large" id="login-link" action=(route-action "showLogin")}}
            {{i18n "log_in"}}
          {{/d-button}}
        {{/conditional-loading-spinner}}
--- a/app/assets/javascripts/discourse/templates/modal/dismiss-read.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/dismiss-read.hbs
@ -5,6 +5,9 @@
 {{/d-modal-body}}

 <div class="modal-footer">
-  <button class='btn btn-primary' {{action "dismissReadTopics" dismissTopics}}>
-    {{d-icon "check"}} {{i18n 'topics.bulk.dismiss'}}</button>
+  {{d-button
+    class="btn-primary"
+    action=(route-action "dismissReadTopics" dismissTopics)
+    icon="check"
+    label="topics.bulk.dismiss"}}
 </div>
--- a/app/assets/javascripts/discourse/templates/modal/grant-badge.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/grant-badge.hbs
@ -9,7 +9,9 @@
 {{/d-modal-body}}

 <div class="modal-footer">
-  <button class='btn btn-primary' disabled={{buttonDisabled}} {{action "grantBadge"}}>
-    {{i18n 'admin.badges.grant'}}
-  </button>
+  {{d-button
+    class="btn-primary"
+    disabled=buttonDisabled
+    action=(action "grantBadge")
+    label="admin.badges.grant"}}
 </div>
--- a/app/assets/javascripts/discourse/templates/modal/login.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/login.hbs
@ -67,9 +67,11 @@
      {{/unless}}

      {{#if showSignupLink}}
-        <button class="btn btn-large" id="new-account-link" {{action "createAccount"}}>
-          {{i18n 'create_account.title'}}
-        </button>
+        {{d-button
+          class="btn-large"
+          id="new-account-link"
+          action=(action "createAccount")
+          label="create_account.title"}}
      {{/if}}
    {{/if}}

--- a/app/assets/javascripts/discourse/templates/modal/second-factor-add-security-key.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/second-factor-add-security-key.hbs
@ -23,8 +23,9 @@
    <div class="control-group">
      <div class="controls">
        {{#unless webauthnUnsupported}}
-          {{d-button action=(action "registerSecurityKey")
-            class="btn btn-primary add-totp"
+          {{d-button
+            class="btn-primary add-totp"
+            action=(action "registerSecurityKey")
            label="user.second_factor.security_key.register"}}
        {{/unless}}
      </div>
--- a/app/assets/javascripts/discourse/templates/modal/second-factor-add-totp.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/second-factor-add-totp.hbs
@ -46,8 +46,9 @@

    <div class="control-group">
      <div class="controls">
-        {{d-button action=(action "enableSecondFactor")
-          class="btn btn-primary add-totp"
+        {{d-button
+          class="btn-primary add-totp"
+          action=(action "enableSecondFactor")
          label="enable"}}
      </div>
    </div>
--- a/app/assets/javascripts/discourse/templates/modal/second-factor-backup-edit.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/second-factor-backup-edit.hbs
@ -19,14 +19,14 @@

    <div class="actions">
      {{d-button
+        class="btn-primary"
        action=(action "generateSecondFactorCodes")
-        class="btn btn-primary"
        disabled=loading
        label=generateBackupCodeBtnLabel}}
      {{#if backupEnabled}}
        {{d-button
+          class="btn-danger"
          action=(action "disableSecondFactorBackup")
-          class="btn btn-danger"
          disabled=loading
          label="user.second_factor_backup.disable"}}
      {{/if}}
--- a/app/assets/javascripts/discourse/templates/preferences-email.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences-email.hbs
@ -49,7 +49,11 @@

      <div class="control-group">
        <div class="controls">
-          {{#d-button class="btn btn-primary" action=(action "changeEmail") disabled=saveDisabled}}
+          {{#d-button
+            class="btn-primary"
+            action=(action "changeEmail")
+            disabled=saveDisabled
+          }}
            {{saveButtonText}}
          {{/d-button}}
        </div>
--- a/app/assets/javascripts/discourse/templates/preferences-second-factor.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences-second-factor.hbs
@ -109,8 +109,9 @@
          <div class="control-group">
            <div class="controls">
              <h2>{{i18n "user.second_factor.disable_title"}}</h2>
-              {{d-button action=(action "disableAllSecondFactors")
-                class="btn btn-danger"
+              {{d-button
+                class="btn-danger"
+                action=(action "disableAllSecondFactors")
                disabled=loading
                label="disable"}}
            </div>
@ -137,8 +138,10 @@

      <div class="control-group">
        <div class="controls">
-          {{d-button action=(action "confirmPassword")
+          {{d-button
            class="btn-primary"
+            type="submit"
+            action=(action "confirmPassword")
            disabled=loading
            label="continue"}}

--- a/app/assets/javascripts/discourse/templates/preferences-username.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences-username.hbs
@ -24,8 +24,15 @@

    <div class="control-group">
      <div class="controls">
-        <button {{action "changeUsername"}} disabled={{saveDisabled}} class="btn btn-primary">{{saveButtonText}}</button>
-          {{#if saved}}{{i18n 'saved'}}{{/if}}
+        {{#d-button
+          class="btn-primary"
+          action=(action "changeUsername")
+          disabled=saveDisabled
+        }}
+          {{saveButtonText}}
+        {{/d-button}}
+
+        {{#if saved}}{{i18n 'saved'}}{{/if}}
      </div>
    </div>

--- a/app/assets/javascripts/discourse/templates/tag-groups.hbs
+++ b/app/assets/javascripts/discourse/templates/tag-groups.hbs
@ -13,7 +13,11 @@
    </ul>

    {{#if this.siteSettings.tagging_enabled}}
-      <button {{action "newTagGroup"}} class='btn btn-default'>{{d-icon "plus"}}{{i18n 'tagging.groups.new'}}</button>
+      {{d-button
+        class="btn-default"
+        action=(action "newTagGroup")
+        icon="plus"
+        label="tagging.groups.new"}}
    {{/if}}
  </div>

--- a/app/assets/javascripts/discourse/templates/user/messages.hbs
+++ b/app/assets/javascripts/discourse/templates/user/messages.hbs
@ -61,34 +61,43 @@

    {{#unless site.mobileView}}
      {{#if showToggleBulkSelect}}
-        <button {{action "toggleBulkSelect"}} class="btn btn-default bulk-select no-text" title="{{i18n "user.messages.bulk_select"}}">
-          {{d-icon "list"}}
-        </button>
+        {{d-button
+          class="btn-default bulk-select"
+          action=(action "toggleBulkSelect")
+          title="user.messages.bulk_select"
+          icon="list"}}
      {{/if}}
    {{/unless}}

    {{#if site.mobileView}}
      {{#if showNewPM}}
-        {{d-button class="btn-primary new-private-message" action=(route-action "composePrivateMessage") icon="envelope" label="user.new_private_message"}}
+        {{d-button
+          class="btn-primary new-private-message"
+          action=(route-action "composePrivateMessage")
+          icon="envelope"
+          label="user.new_private_message"}}
      {{/if}}
    {{/if}}

    {{#if canArchive}}
-    <button {{action "archive"}} class="btn btn-default btn-archive">
-      {{i18n "user.messages.move_to_archive"}}
-    </button>
+      {{d-button
+        class="btn-default btn-archive"
+        action=(action "archive")
+        label="user.messages.move_to_archive"}}
    {{/if}}

    {{#if canMoveToInbox}}
-    <button {{action "toInbox"}} class="btn btn-default btn-to-inbox">
-      {{i18n "user.messages.move_to_inbox"}}
-    </button>
+      {{d-button
+        class="btn-default btn-to-inbox"
+        action=(action "toInbox")
+        label="user.messages.move_to_inbox"}}
    {{/if}}

    {{#if bulkSelectEnabled}}
-    <button {{action "selectAll"}} class="btn btn-default btn-select-all">
-      {{i18n "user.messages.select_all"}}
-    </button>
+      {{d-button
+        class="btn-default btn-select-all"
+        action=(action "selectAll")
+        label="user.messages.select_all"}}
    {{/if}}

    {{#if isGroup}}
--- a/app/assets/javascripts/discourse/templates/user/preferences/_save-button.hbs
+++ b/app/assets/javascripts/discourse/templates/user/preferences/_save-button.hbs
@ -1,4 +1,8 @@
-{{#d-button action=(action "save") disabled=model.isSaving class="btn btn-primary save-user"}}
+{{#d-button
+  class="btn-primary save-user"
+  action=(action "save")
+  disabled=model.isSaving
+}}
  {{saveButtonText}}
 {{/d-button}}

--- a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
@ -9,9 +9,10 @@
 </span>

 {{#if shouldDisplayClearableButton}}
-  <button class="btn-clear" {{action onClearSelection bubbles=false}}>
-    {{d-icon 'times'}}
-  </button>
+  {{d-button
+    class="btn-clear"
+    action=(action onClearSelection bubbles=false)
+    icon="times"}}
 {{/if}}

 {{d-icon caretIcon class="caret-icon"}}
--- a/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
@ -19,9 +19,10 @@
 {{/if}}

 {{#if shouldDisplayClearableButton}}
-  <button class="btn-clear" {{action onClearSelection bubbles=false}}>
-    {{d-icon 'times'}}
-  </button>
+  {{d-button
+    class="btn-clear"
+    action=(action onClearSelection bubbles=false)
+    icon="times"}}
 {{/if}}

 {{d-icon caretIcon class="caret-icon"}}
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@ -468,7 +468,6 @@
  }
  .color-scheme {
    .controls {
-      span,
      button,
      a {
        margin-right: 10px;
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
@ -136,7 +136,8 @@

 <div class="modal-footer discourse-local-dates-create-modal-footer">
  {{#if isValid}}
-    {{d-button class="btn btn-primary"
+    {{d-button
+      class="btn-primary"
      action=(action "save")
      label="discourse_local_dates.create.form.insert"}}
  {{/if}}