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

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;

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";

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;
+    }
+  }
 }

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;
-      }
-    }
   }
 }

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 {

app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss

@@ -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;
-      }
-    }
-  }
-}

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

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}}