UX: Minor layout tweaks to dropdowns (#14299)

UX: Minor layout tweaks to dropdowns (#14299)

  • fixes mini-tag-chooser validation message
  • fixes ellipsis overflow in mini-tag-chooser
  • removes redundant border-radius: 0 styles
  • simplifies user-notifications-dropdown styling and adds example to styleguide
diff --git a/app/assets/javascripts/select-kit/addon/mixins/tags.js b/app/assets/javascripts/select-kit/addon/mixins/tags.js
index fa3dfab..fe4c34f 100644
--- a/app/assets/javascripts/select-kit/addon/mixins/tags.js
+++ b/app/assets/javascripts/select-kit/addon/mixins/tags.js
@@ -29,7 +29,7 @@ export default Mixin.create({
     if (maximum && makeArray(this.value).length >= parseInt(maximum, 10)) {
       this.addError(
         I18n.t("select_kit.max_content_reached", {
-          count: this.selectKit.limit,
+          count: parseInt(maximum, 10),
         })
       );
       return false;
diff --git a/app/assets/stylesheets/common/select-kit/_index.scss b/app/assets/stylesheets/common/select-kit/_index.scss
index 2aabed5..2b1b4b3 100644
--- a/app/assets/stylesheets/common/select-kit/_index.scss
+++ b/app/assets/stylesheets/common/select-kit/_index.scss
@@ -24,5 +24,4 @@
 @import "tag-drop";
 @import "toolbar-popup-menu-options";
 @import "topic-notifications-button";
-@import "user-notifications-dropdown";
 @import "user-row";
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index efc90f0..d8f7228 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -84,4 +84,12 @@
       }
     }
   }
+  &.user-notifications-dropdown {
+    .select-kit-header .d-icon {
+      margin-left: 0;
+    }
+    .select-kit-header-wrapper {
+      justify-content: center;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index 063881b..3a44bcb 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -2,7 +2,6 @@
   &.multi-select {
     width: 300px;
     background: var(--secondary);
-    border-radius: 0;
 
     .select-kit-filter {
       & + .selected-content,
@@ -13,7 +12,6 @@
 
     .select-kit-row {
       min-height: 1px;
-      border-radius: 0;
     }
 
     &.is-disabled {
@@ -53,25 +51,15 @@
 
       .formated-selection {
         margin: 0;
-        border: 0;
-        padding: 0;
-        outline: none;
-        box-shadow: none;
         cursor: pointer;
         @include ellipsis;
+        display: inline-block;
       }
     }
 
+    &.is-expanded .multi-select-header,
     .multi-select-header:focus {
-      border-radius: 0;
       @include default-focus;
     }
-
-    &.is-expanded {
-      .multi-select-header {
-        border-radius: 0;
-        @include default-focus;
-      }
-    }
   }
 }
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 965807d..387b1ba 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -85,8 +85,8 @@
     .select-kit-header-wrapper {
       box-sizing: border-box;
       display: flex;
-      flex: 1 0 auto;
       align-items: center;
+      width: 100%;
     }
 
     .d-icon-spinner {
diff --git a/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss b/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss
deleted file mode 100644
index 423c6ec..0000000
--- a/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.select-kit {
-  &.dropdown-select-box {
-    &.user-notifications-dropdown {
-      display: flex;
-      text-align: left;
-
-      .d-icon {
-        margin-left: 0;
-      }
-
-      .select-kit-body {
-        width: 485px;
-        max-width: 485px;
-      }
-
-      .select-kit-header-wrapper {
-        justify-content: center;
-      }
-    }
-  }
-}
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 11c99e9..f1141c2 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -215,7 +215,6 @@ table.user-invite-list {
     .controls {
       padding: 0 0 12px 0;
       float: right;
-      text-align: right;
       max-width: 13.5em;
 
       li > .select-kit-header, // select-kit
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
index 271e99e..0e8d40f 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
@@ -75,3 +75,7 @@
 {{#styleguide-example title="list-setting with colors"}}
   {{list-setting settingValue=dummy.colors nameProperty="color" onChange=(action "dummy")}}
 {{/styleguide-example}}
+
+{{#styleguide-example title="user-notifications-dropdown"}}
+  {{user-notifications-dropdown user=currentUser value="changeToNormal"}}
+{{/styleguide-example}}

GitHub sha: 299d0ca445ebf468dceab611db3edb1f678c2888

This commit appears in #14299 which was approved by eviltrout. It was merged by pmusaraj.