REFACTOR: Convert buttons to flexbox (#11785)

app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs

@@ -6,4 +6,4 @@
   {{/each}}
 </div>
 <div class="instructions">{{i18n "user.ignored_users_instructions"}}</div>
-<div>{{#d-button action=(action "newIgnoredUser") class="btn-default" icon="plus"}}{{i18n "user.user_notifications.add_ignored_user"}}{{/d-button}}</div>
+<div>{{d-button action=(action "newIgnoredUser") class="btn-default" icon="plus" label="user.user_notifications.add_ignored_user"}}</div>

app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs

@@ -89,16 +89,18 @@
     </div>
   </section>
 
-  {{d-button
+  <div class="tag-group-controls">
-    class="btn-default"
+    {{d-button
-    action=(action "save")
+      class="btn-default"
-    disabled=savingDisabled
+      action=(action "save")
-    label="tagging.groups.save"}}
+      disabled=savingDisabled
+      label="tagging.groups.save"}}
 
-  {{d-button
+    {{d-button
-    class="btn-danger"
+      class="btn-danger"
-    action=(action "destroy")
+      action=(action "destroy")
-    disabled=buffered.isNew
+      disabled=buffered.isNew
-    icon="far-trash-alt"
+      icon="far-trash-alt"
-    label="tagging.groups.delete"}}
+      label="tagging.groups.delete"}}
+  </div>
 </div>

app/assets/javascripts/discourse/app/templates/user.hbs

@@ -67,7 +67,7 @@
                 </li>
               {{/if}}
               {{#if currentUser.staff}}
-                <li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
+                <li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}<span class="d-button-label">{{i18n "admin.user.show_admin_profile"}}</span></a></li>
               {{/if}}
               {{plugin-outlet name="user-profile-controls"
                               tagName=""

app/assets/stylesheets/common/base/_topic-list.scss

@@ -34,18 +34,6 @@
       max-height: 40vh;
     }
   }
-
-  @include breakpoint(medium) {
-    // hide button labels to save space
-    .btn {
-      .d-button-label {
-        display: none;
-      }
-      .d-icon {
-        margin: 0;
-      }
-    }
-  }
 }
 
 .navigation-container {
@@ -81,6 +69,14 @@
   > * {
     white-space: nowrap;
   }
+  .select-kit button {
+    height: 100%; // ensures nested select-kit button matches height of button siblings
+  }
+  .btn {
+    // need to reduce vertical padding for consistent height
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
+  }
 }
 
 .show-more {

app/assets/stylesheets/common/base/compose.scss

@@ -122,6 +122,7 @@
       }
 
       .action-title {
+        line-height: normal;
         @include ellipsis;
       }
 

app/assets/stylesheets/common/base/modal.scss

@@ -162,14 +162,22 @@
 }
 
 .modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding: 14px 15px 10px;
   border-top: 1px solid var(--primary-low);
   .btn {
-    margin: 0 5px 5px 0;
+    margin: 0 0.3em 0 0;
     &[href] {
       min-height: unset;
     }
   }
+
+  .btn,
+  a {
+    margin-bottom: 0.3em;
+  }
 }
 
 .modal {

app/assets/stylesheets/common/base/popup-menu.scss

@@ -19,12 +19,12 @@
   }
 
   .btn {
-    display: flex;
+    justify-content: left;
-    text-align: left;
     background: none;
     width: 100%;
     padding: 0.75em;
     border-radius: 0;
+    margin: 0;
 
     .d-icon {
       color: var(--primary-medium);

app/assets/stylesheets/common/base/reviewables.scss

@@ -188,11 +188,6 @@
     width: auto;
   }
 
-  .refresh {
-    height: 1em;
-    display: flex;
-  }
-
   .score-filter {
     width: 5em;
   }

app/assets/stylesheets/common/base/search.scss

@@ -11,7 +11,7 @@
   .search-bar {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
     margin-bottom: 1em;
 
     .search-query {

app/assets/stylesheets/common/base/tagging.scss

@@ -258,6 +258,9 @@ header .discourse-tag {
       margin-bottom: 10px;
     }
   }
+  .tag-group-controls {
+    display: flex;
+  }
   .group-tags-list .tag-chooser {
     width: 100%;
   }

app/assets/stylesheets/common/base/topic-post.scss

@@ -1077,32 +1077,20 @@ a.mention-group {
 }
 
 #topic-footer-buttons {
-  padding: 0.5em 0;
+  padding: 0.75em 0;
 
   .topic-footer-main-buttons {
-    margin: 0 0 -0.5em 0;
     display: flex;
     flex-wrap: wrap;
 
-    > .btn {
+    button {
-      margin: 0 0.5em 0.5em 0;
+      margin-right: 0.54em;
-      display: inline-flex;
+      height: 100%; // helps select-kit buttons match height
-      align-items: center;
-
-      .d-button-label {
-        display: flex;
-        flex: 1 0 auto;
-        align-items: center;
-      }
     }
 
     .topic-admin-menu-button-container {
       display: inline-flex;
     }
-
-    .topic-admin-menu-button-container > span:not(:empty) {
-      margin: 0 0.5em 0.5em 0;
-    }
   }
 
   .pinned-button:not(.is-hidden) + .topic-notifications-button {

app/assets/stylesheets/common/base/user.scss

@@ -217,7 +217,6 @@
 
       .btn {
         margin-bottom: 10px;
-        line-height: $line-height-medium;
       }
     }
 

app/assets/stylesheets/common/components/buttons.scss

@@ -13,25 +13,24 @@
   $hover-bg-color: var(--primary-medium),
   $hover-icon-color: var(--primary-low)
 ) {
-  display: inline-block;
-  margin: 0;
-  padding: 6px 12px;
-  min-height: 30px;
-  border: none;
   box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.53em 0.8em;
+  border: none;
   font-weight: normal;
+  font-size: $font-0;
+  line-height: normal;
   color: $text-color;
   background: $bg-color;
-  font-size: $font-0;
-  line-height: $line-height-small;
-  text-align: center;
   cursor: pointer;
   transition: all 0.25s;
   .d-icon {
     color: $icon-color;
     margin-right: 0.45em;
     transition: color 0.25s;
-    line-height: $line-height-medium; // Match button text line-height
   }
   &.no-text {
     .d-icon {

app/assets/stylesheets/common/components/navs.scss

@@ -22,6 +22,7 @@
   @extend .clearfix;
 
   > li {
+    display: flex;
     float: left;
     margin-right: 0.5em;
 

app/assets/stylesheets/common/d-editor.scss

@@ -263,7 +263,7 @@
   // shared styles for all font sizes
   .btn,
   .btn-default {
-    padding: 0 0.5em;
+    padding: 0.5em;
   }
   .d-editor-spacer {
     margin: 0 0.25em;

app/assets/stylesheets/desktop/user.scss

@@ -186,15 +186,11 @@
         > ul {
           display: inline-flex;
           > li {
-            display: inline;
+            display: inline-flex;
-            margin-left: 12px;
+            margin-left: 0.75em;
-            .d-button-label {
-              line-height: 1;
-            }
           }
 
           a {
-            margin-bottom: 10px;
             width: auto;
           }
         }

app/assets/stylesheets/mobile/topic-post.scss

@@ -237,9 +237,19 @@ a.reply-to-tab {
     color: var(--tertiary);
   }
 
+  .topic-footer-main-buttons {
+    display: flex;
+    align-items: stretch;
+  }
+
   .topic-footer-mobile-dropdown {
-    margin: 0 0.5em 0.5em 0;
+    margin: 0 0.75em 0 0;
     width: 160px;
+    display: flex;
+  }
+
+  .select-kit-header {
+    height: 100%;
   }
 
   .topic-notifications-button,

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -201,7 +201,7 @@
           flex: 1;
           @include ellipsis;
           width: 100%;
-          text-align: left;
+          justify-content: flex-start;
         }
       }