From 320b21ab5b910631aecee6ff6ef3d411c3a6a54a Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 18 May 2020 10:50:33 +0200
Subject: [PATCH] UX: allows dropdown-select-box to display a caret (#9803)

```
selectKitOptions: {
  showCaret: true // default false
}
```
---
 .../app/components/dropdown-select-box.js         |  5 ++++-
 .../dropdown-select-box-header.js                 | 15 ++++++++++++++-
 .../app/components/notifications-button.js        |  3 ++-
 .../select-kit/app/components/pinned-options.js   |  3 +--
 .../dropdown-select-box-header.hbs                |  2 ++
 .../stylesheets/common/select-kit/select-kit.scss |  1 +
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/select-kit/app/components/dropdown-select-box.js b/app/assets/javascripts/select-kit/app/components/dropdown-select-box.js
index 171215aac8f..af07d69bc53 100644
--- a/app/assets/javascripts/select-kit/app/components/dropdown-select-box.js
+++ b/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() {
diff --git a/app/assets/javascripts/select-kit/app/components/dropdown-select-box/dropdown-select-box-header.js b/app/assets/javascripts/select-kit/app/components/dropdown-select-box/dropdown-select-box-header.js
index 2b04e4094ad..7404513b684 100644
--- a/app/assets/javascripts/select-kit/app/components/dropdown-select-box/dropdown-select-box-header.js
+++ b/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;
+    }
+  )
 });
diff --git a/app/assets/javascripts/select-kit/app/components/notifications-button.js b/app/assets/javascripts/select-kit/app/components/notifications-button.js
index 32dc2ad7ba1..f5423b9e64a 100644
--- a/app/assets/javascripts/select-kit/app/components/notifications-button.js
+++ b/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() {
diff --git a/app/assets/javascripts/select-kit/app/components/pinned-options.js b/app/assets/javascripts/select-kit/app/components/pinned-options.js
index 7498f036aeb..0a3e9246ad3 100644
--- a/app/assets/javascripts/select-kit/app/components/pinned-options.js
+++ b/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" : ""}`;
diff --git a/app/assets/javascripts/select-kit/app/templates/components/dropdown-select-box/dropdown-select-box-header.hbs b/app/assets/javascripts/select-kit/app/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
index 0aa601db9a1..8ce66b4838e 100644
--- a/app/assets/javascripts/select-kit/app/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
+++ b/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"}}
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index e8fd8756128..130bad52f80 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/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;