UX: allows dropdown-select-box to display a caret (#9803)

```
selectKitOptions: {
  showCaret: true // default false
}
```

app/assets/javascripts/select-kit/app/components/dropdown-select-box.js

@@ -8,7 +8,10 @@ export default SingleSelectComponent.extend({
     autoFilterable: false,
     filterable: false,
     showFullTitle: true,
-    headerComponent: "dropdown-select-box/dropdown-select-box-header"
+    headerComponent: "dropdown-select-box/dropdown-select-box-header",
+    caretUpIcon: "caret-up",
+    caretDownIcon: "caret-down",
+    showCaret: false
   },
 
   modifyComponentForRow() {

app/assets/javascripts/select-kit/app/components/dropdown-select-box/dropdown-select-box-header.js

@@ -14,5 +14,18 @@ export default SingleSelectHeaderComponent.extend({
 
   btnClassName: computed("showFullTitle", function() {
     return `btn ${this.showFullTitle ? "btn-icon-text" : "no-text btn-icon"}`;
-  })
+  }),
+
+  caretUpIcon: readOnly("selectKit.options.caretUpIcon"),
+
+  caretDownIcon: readOnly("selectKit.options.caretDownIcon"),
+
+  caretIcon: computed(
+    "selectKit.isExpanded",
+    "caretUpIcon",
+    "caretDownIcon",
+    function() {
+      return this.selectKit.isExpanded ? this.caretUpIcon : this.caretDownIcon;
+    }
+  )
 });

app/assets/javascripts/select-kit/app/components/notifications-button.js

@@ -13,7 +13,8 @@ export default DropdownSelectBoxComponent.extend({
     autoFilterable: false,
     filterable: false,
     i18nPrefix: "",
-    i18nPostfix: ""
+    i18nPostfix: "",
+    showCaret: true
   },
 
   modifyComponentForRow() {

app/assets/javascripts/select-kit/app/components/pinned-options.js

@@ -1,6 +1,5 @@
 import I18n from "I18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
-import { iconHTML } from "discourse-common/lib/icon-library";
 import { computed, action } from "@ember/object";
 
 const UNPINNED = "unpinned";
@@ -17,7 +16,7 @@ export default DropdownSelectBoxComponent.extend({
     const state = pinned ? `pinned${globally}` : UNPINNED;
     const title = I18n.t(`topic_statuses.${state}.title`);
 
-    content.label = `<span>${title}</span>${iconHTML("caret-down")}`.htmlSafe();
+    content.label = `<span>${title}</span>`.htmlSafe();
     content.title = title;
     content.name = state;
     content.icon = `thumbtack${state === UNPINNED ? " unpinned" : ""}`;

app/assets/javascripts/select-kit/app/templates/components/dropdown-select-box/dropdown-select-box-header.hbs

@@ -6,3 +6,5 @@
   selectKit=selectKit
   shouldDisplayClearableButton=shouldDisplayClearableButton
 }}
+
+{{d-icon caretIcon class="caret-icon"}}

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -106,6 +106,7 @@
 
     .caret-icon {
       margin-left: auto;
+      margin-right: 0;
       padding-left: 5px;
       pointer-events: none;
       color: inherit;