From ae1743c61f3006b72d80dcb10be7d6862ce36b79 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 19 Oct 2017 12:51:08 -0700
Subject: [PATCH] [WIP] select-box-kit refactoring

---
 .eslintrc                                     |   1 +
 .../admin/components/list-setting.js.es6      |   2 -
 .../admin/templates/badges-show.hbs           |   7 +-
 .../components/admin-user-field-item.hbs      |   2 +-
 .../templates/components/embeddable-host.hbs  |   2 +-
 .../admin/templates/customize-themes-show.hbs |  10 +-
 .../admin/templates/groups-bulk.hbs           |   2 +-
 .../templates/logs/staff-action-logs.hbs      |   2 +-
 .../modal/admin-color-scheme-select-base.hbs  |   1 -
 .../javascripts/admin/templates/reports.hbs   |   4 +-
 .../admin/templates/user-badges.hbs           |   2 +-
 .../admin/templates/user-index.hbs            |   3 +-
 .../admin/templates/web-hooks-show.hbs        |   2 -
 app/assets/javascripts/application.js         |   1 +
 .../components/combo-box.js.es6               | 146 ------
 .../categories-admin-dropdown.js.es6          |  49 --
 .../components/category-chooser.js.es6        |  88 ----
 .../category-notifications-button.js.es6      |  28 -
 .../components/category-select-box.js.es6     | 162 ------
 .../category-select-box-row.js.es6            |  13 -
 .../components/dropdown-select-box.js.es6     |  33 --
 .../dropdown-header.js.es6                    |   7 -
 .../future-date-input-selector.js.es6         | 207 --------
 .../components/future-date-input.js.es6       |   2 +-
 .../group-notifications-button.js.es6         |   2 +-
 .../components/notifications-button.js.es6    |  68 ---
 .../components/pinned-options.js.es6          |  73 ---
 .../discourse/components/select-box.js.es6    | 485 ------------------
 .../select-box/select-box-collection.js.es6   |   9 -
 .../select-box/select-box-filter.js.es6       |   5 -
 .../select-box/select-box-header.js.es6       |  24 -
 .../select-box/select-box-row.js.es6          |  47 --
 .../tag-notifications-button.js.es6           |  24 -
 .../topic-footer-mobile-dropdown.js.es6       |  78 ---
 .../topic-notifications-button.js.es6         |   9 -
 .../topic-notifications-options.js.es6        |  52 --
 .../discourse/lib/safari-hacks.js.es6         |   2 +-
 .../templates/components/badge-title.hbs      |   2 +-
 .../dropdown-select-box/dropdown-header.hbs   |  12 -
 .../components/edit-category-general.hbs      |   4 +-
 .../components/edit-category-settings.hbs     |  10 +-
 .../components/edit-topic-timer-form.hbs      |   2 +-
 .../components/future-date-input.hbs          |   3 -
 .../templates/components/queued-post.hbs      |   2 +-
 .../templates/components/select-box.hbs       |  55 --
 .../select-box/select-box-collection.hbs      |  28 -
 .../select-box/select-box-header.hbs          |   9 -
 .../components/select-box/select-box-row.hbs  |   1 -
 .../discourse/templates/composer.hbs          |   2 +-
 .../discourse/templates/full-page-search.hbs  |   2 +-
 .../templates/modal/bulk-change-category.hbs  |   2 +-
 .../discourse/templates/modal/split-topic.hbs |   2 +-
 .../templates/preferences/card-badge.hbs      |   2 +-
 .../templates/preferences/emails.hbs          |   4 +-
 .../templates/preferences/interface.hbs       |   4 +-
 .../javascripts/discourse/templates/topic.hbs |   2 +-
 .../categories-admin-dropdown.js.es6          |  50 ++
 .../components/category-chooser.js.es6        | 131 +++++
 .../category-notifications-button.js.es6      |  17 +
 ...ategory-notifications-button-header.js.es6 |  13 +
 .../components/combo-box.js.es6               |  21 +
 .../combo-box/combo-box-header.js.es6         |  39 ++
 .../components/dropdown-select-box.js.es6     |  24 +
 .../dropdown-select-box-header.js.es6         |   6 +
 .../dropdown-select-box-row.js.es6            |   9 +
 .../future-date-input-selector.js.es6         | 118 +++++
 .../future-date-input-selector-header.js.es6  |  14 +
 .../future-date-input-selector-row.js.es6     |  14 +
 .../future-date-input-selector/mixin.js.es6   | 101 ++++
 .../components/multi-combo-box.js.es6         |  99 ++++
 .../multi-combo-box-header.js.es6             |  40 ++
 .../components/notifications-button.js.es6    |  40 ++
 .../notifications-button-header.js.es6        |  24 +
 .../notifications-button-row.js.es6           |  37 ++
 .../components/pinned-button.js.es6           |   9 +-
 .../components/pinned-options.js.es6          |  64 +++
 .../pinned-options-header.js.es6              |  30 ++
 .../components/select-box-kit.js.es6          | 440 ++++++++++++++++
 .../select-box-kit-collection.js.es6          |   5 +
 .../select-box-kit-create-row.js.es6          |  10 +
 .../select-box-kit-filter.js.es6              |   6 +
 .../select-box-kit-header.js.es6              |  28 +
 .../select-box-kit-none-row.js.es6            |  10 +
 .../select-box-kit/select-box-kit-row.js.es6  |  59 +++
 .../tag-notifications-button.js.es6           |  15 +
 .../tag-notifications-button-header.js.es6    |  13 +
 .../topic-footer-mobile-dropdown.js.es6       |  75 +++
 .../topic-notifications-button.js.es6         |   6 +
 .../topic-notifications-options.js.es6        |  40 ++
 .../select-box-kit/mixins/dom-helpers.js.es6  |  53 ++
 .../select-box-kit/mixins/keyboard.js.es6     | 196 +++++++
 .../select-box-kit/mixins/utils.js.es6        |   9 +
 .../components/combo-box/combo-box-header.hbs |  15 +
 .../dropdown-select-box-header.hbs            |  17 +
 .../dropdown-select-box-row.hbs               |  15 +
 .../future-date-input-selector-header.hbs     |  23 +
 .../future-date-input-selector-row.hbs        |  13 +
 .../multi-combo-box-header.hbs                |  30 ++
 .../templates/components/pinned-button.hbs    |   0
 .../templates/components/select-box-kit.hbs   |  65 +++
 .../select-box-kit-collection.hbs             |  49 ++
 .../select-box-kit/select-box-kit-filter.hbs} |   5 +-
 .../select-box-kit/select-box-kit-header.hbs  |   7 +
 .../select-box-kit/select-box-kit-row.hbs     |   9 +
 .../components/topic-notifications-button.hbs |   0
 app/assets/javascripts/wizard-application.js  |   1 +
 .../templates/components/invite-list.hbs      |   2 +-
 .../components/wizard-field-dropdown.hbs      |   1 -
 app/assets/stylesheets/common.scss            |   1 +
 .../stylesheets/common/admin/admin_base.scss  |  10 +-
 .../stylesheets/common/base/_topic-list.scss  |   2 +-
 .../stylesheets/common/base/combobox.scss     |  88 ----
 .../base/edit-topic-status-update-modal.scss  |   4 +
 app/assets/stylesheets/common/base/modal.scss |  14 +-
 .../components/categories-admin-dropdown.scss |   6 -
 .../components/category-select-box.scss       |  41 --
 .../components/dropdown-select-box.scss       | 103 ----
 .../future-date-input-selector.scss           |   9 -
 .../components/notifications-button.scss      |  12 -
 .../categories-admin-dropdown.scss            |  12 +
 .../select-box-kit/category-chooser.scss      |  46 ++
 .../common/select-box-kit/combo-box.scss      |  85 +++
 .../select-box-kit/dropdown-select-box.scss   | 153 ++++++
 .../future-date-input-selector.scss           |  22 +
 .../common/select-box-kit/multi-combobox.scss | 131 +++++
 .../select-box-kit/notifications-button.scss  |  17 +
 .../pinned-button.scss                        |  16 +-
 .../select-box-kit.scss}                      | 170 +++---
 .../topic-notifications-button.scss           |  12 +-
 app/assets/stylesheets/desktop/compose.scss   |   6 +-
 app/assets/stylesheets/desktop/modal.scss     |   6 +-
 app/assets/stylesheets/desktop/topic.scss     |   2 +-
 app/assets/stylesheets/mobile/compose.scss    |   2 +-
 app/assets/stylesheets/mobile/topic-list.scss |   6 +-
 app/assets/stylesheets/mobile/topic.scss      |   2 +-
 app/assets/stylesheets/wizard.scss            |   9 +-
 config/locales/client.en.yml                  |   2 +-
 plugins/discourse-narrative-bot/public/public |   1 +
 .../acceptance/admin-suspend-user-test.js.es6 |   6 +-
 ...st.js.es6 => category-chooser-test.js.es6} |   9 +-
 .../acceptance/category-edit-test.js.es6      |   4 +-
 .../acceptance/category-hashtag-test.js.es6   |   2 +-
 .../acceptance/queued-posts-test.js.es6       |   4 +-
 .../acceptance/search-full-test.js.es6        |  22 +-
 .../javascripts/acceptance/search-test.js.es6 |  48 +-
 .../topic-notifications-button-test.js.es6    |  11 +-
 test/javascripts/acceptance/topic-test.js.es6 |   6 +-
 .../categories-admin-dropdown-test.js.es6     |  19 +
 .../components/category-chooser-test.js.es6   | 139 +++++
 .../components/combo-box-test.js.es6          | 153 +++++-
 .../dropdown-select-box-test.js.es6           |  23 -
 .../components/multi-combo-box-test.js.es6    |  17 +
 .../components/pinned-button-test.js.es6      |   4 +-
 .../components/select-box-test.js.es6         | 189 +++----
 .../topic-footer-mobile-dropdown-test.js.es6  |  28 +
 .../topic-notifications-button-test.js.es6    |   4 +-
 test/javascripts/helpers/select-box-helper.js |  69 ++-
 157 files changed, 3262 insertions(+), 2404 deletions(-)
 delete mode 100644 app/assets/javascripts/discourse-common/components/combo-box.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/category-chooser.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/category-notifications-button.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/category-select-box.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/dropdown-select-box.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/dropdown-select-box/dropdown-header.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/future-date-input-selector.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/notifications-button.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/pinned-options.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/select-box.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/select-box/select-box-collection.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/select-box/select-box-filter.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/tag-notifications-button.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/topic-notifications-button.js.es6
 delete mode 100644 app/assets/javascripts/discourse/components/topic-notifications-options.js.es6
 delete mode 100644 app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs
 delete mode 100644 app/assets/javascripts/discourse/templates/components/select-box.hbs
 delete mode 100644 app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs
 delete mode 100644 app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs
 delete mode 100644 app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/components/categories-admin-dropdown.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/category-chooser.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/category-notifications-button.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/category-notifications-button/category-notifications-button-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/combo-box.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/combo-box/combo-box-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/dropdown-select-box.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/future-date-input-selector.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/future-date-input-selector/mixin.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/multi-combo-box.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/multi-combo-box/multi-combo-box-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/notifications-button.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-row.js.es6
 rename app/assets/javascripts/{discourse => select-box-kit}/components/pinned-button.js.es6 (75%)
 create mode 100644 app/assets/javascripts/select-box-kit/components/pinned-options.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/pinned-options/pinned-options-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-collection.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-create-row.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-filter.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-none-row.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/tag-notifications-button.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/tag-notifications-button/tag-notifications-button-header.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/topic-notifications-button.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/components/topic-notifications-options.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/mixins/dom-helpers.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/mixins/keyboard.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/mixins/utils.js.es6
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/combo-box/combo-box-header.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/multi-combo-box/multi-combo-box-header.hbs
 rename app/assets/javascripts/{discourse => select-box-kit}/templates/components/pinned-button.hbs (100%)
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/select-box-kit.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-collection.hbs
 rename app/assets/javascripts/{discourse/templates/components/select-box/select-box-filter.hbs => select-box-kit/templates/components/select-box-kit/select-box-kit-filter.hbs} (71%)
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-header.hbs
 create mode 100644 app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-row.hbs
 rename app/assets/javascripts/{discourse => select-box-kit}/templates/components/topic-notifications-button.hbs (100%)
 delete mode 100644 app/assets/stylesheets/common/base/combobox.scss
 delete mode 100644 app/assets/stylesheets/common/components/categories-admin-dropdown.scss
 delete mode 100644 app/assets/stylesheets/common/components/category-select-box.scss
 delete mode 100644 app/assets/stylesheets/common/components/dropdown-select-box.scss
 delete mode 100644 app/assets/stylesheets/common/components/future-date-input-selector.scss
 delete mode 100644 app/assets/stylesheets/common/components/notifications-button.scss
 create mode 100644 app/assets/stylesheets/common/select-box-kit/categories-admin-dropdown.scss
 create mode 100644 app/assets/stylesheets/common/select-box-kit/category-chooser.scss
 create mode 100644 app/assets/stylesheets/common/select-box-kit/combo-box.scss
 create mode 100644 app/assets/stylesheets/common/select-box-kit/dropdown-select-box.scss
 create mode 100644 app/assets/stylesheets/common/select-box-kit/future-date-input-selector.scss
 create mode 100644 app/assets/stylesheets/common/select-box-kit/multi-combobox.scss
 create mode 100644 app/assets/stylesheets/common/select-box-kit/notifications-button.scss
 rename app/assets/stylesheets/common/{components => select-box-kit}/pinned-button.scss (56%)
 rename app/assets/stylesheets/common/{components/select-box.scss => select-box-kit/select-box-kit.scss} (62%)
 rename app/assets/stylesheets/common/{components => select-box-kit}/topic-notifications-button.scss (58%)
 create mode 120000 plugins/discourse-narrative-bot/public/public
 rename test/javascripts/acceptance/{category-select-box-test.js.es6 => category-chooser-test.js.es6} (60%)
 create mode 100644 test/javascripts/components/categories-admin-dropdown-test.js.es6
 create mode 100644 test/javascripts/components/category-chooser-test.js.es6
 delete mode 100644 test/javascripts/components/dropdown-select-box-test.js.es6
 create mode 100644 test/javascripts/components/multi-combo-box-test.js.es6
 create mode 100644 test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6

diff --git a/.eslintrc b/.eslintrc
index 19d38e35c77..71e21b4381a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -46,6 +46,7 @@
     "expandSelectBox":true,
     "collapseSelectBox":true,
     "selectBoxSelectRow":true,
+    "selectBoxSelectNoneRow":true,
     "selectBoxFillInFilter":true,
     "asyncTestDiscourse":true,
     "fixture":true,
diff --git a/app/assets/javascripts/admin/components/list-setting.js.es6 b/app/assets/javascripts/admin/components/list-setting.js.es6
index da6c5173d60..9a1d865133d 100644
--- a/app/assets/javascripts/admin/components/list-setting.js.es6
+++ b/app/assets/javascripts/admin/components/list-setting.js.es6
@@ -50,5 +50,3 @@ export default Ember.Component.extend({
     });
   }
 });
-
-
diff --git a/app/assets/javascripts/admin/templates/badges-show.hbs b/app/assets/javascripts/admin/templates/badges-show.hbs
index e40e6bfec08..c9fe0496c1a 100644
--- a/app/assets/javascripts/admin/templates/badges-show.hbs
+++ b/app/assets/javascripts/admin/templates/badges-show.hbs
@@ -26,9 +26,7 @@
       {{combo-box name="badge_type_id"
                   value=buffered.badge_type_id
                   content=badgeTypes
-                  optionValuePath="content.id"
-                  optionLabelPath="content.name"
-                  disabled=readOnly}}
+                  isDisabled=readOnly}}
     </div>
 
     <div>
@@ -36,8 +34,7 @@
       {{combo-box name="badge_grouping_id"
                   value=buffered.badge_grouping_id
                   content=badgeGroupings
-                  optionValuePath="content.id"
-                  optionLabelPath="content.displayName"}}
+                  nameProperty="name"}}
       &nbsp;<button {{action "editGroupings"}} class='btn'>{{d-icon 'pencil'}}</button>
     </div>
 
diff --git a/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
index c5620d84edf..419ef0b69cf 100644
--- a/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
+++ b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
@@ -1,6 +1,6 @@
 {{#if editing}}
   {{#admin-form-row label="admin.user_fields.type"}}
-    {{combo-box content=fieldTypes valueAttribute="id" value=buffered.field_type}}
+    {{combo-box content=fieldTypes value=buffered.field_type}}
   {{/admin-form-row}}
 
   {{#admin-form-row label="admin.user_fields.name"}}
diff --git a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
index 88317ecd187..e21685831b5 100644
--- a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
+++ b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
@@ -9,7 +9,7 @@
     {{input value=buffered.path_whitelist placeholder="/blog/.*" enter="save" class="path-whitelist"}}
   </td>
   <td>
-    {{category-select-box value=categoryId class="small"}}
+    {{category-chooser value=categoryId class="small"}}
   </td>
   <td>
     {{d-button icon="check" action="save" class="btn-primary" disabled=cantSave}}
diff --git a/app/assets/javascripts/admin/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
index 6b02429d77d..6f8ac614aaf 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
@@ -36,8 +36,7 @@
 
   <h3>{{i18n "admin.customize.theme.color_scheme"}}</h3>
   <p>{{i18n "admin.customize.theme.color_scheme_select"}}</p>
-  <p>{{select-box content=colorSchemes
-                  textKey="name"
+  <p>{{combo-box content=colorSchemes
                   filterable=true
                   value=colorSchemeId
                   icon="paint-brush"}}
@@ -123,11 +122,8 @@
     </ul>
     {{/unless}}
     {{#if selectableChildThemes}}
-      <p>{{combo-box content=selectableChildThemes
-                   nameProperty="name"
-                   value=selectedChildThemeId
-                   valueAttribute="id"}}
-
+      <p>
+        {{combo-box content=selectableChildThemes value=selectedChildThemeId}}
         {{#d-button action="addChildTheme" icon="plus"}}{{i18n "admin.customize.theme.add"}}{{/d-button}}
       </p>
     {{/if}}
diff --git a/app/assets/javascripts/admin/templates/groups-bulk.hbs b/app/assets/javascripts/admin/templates/groups-bulk.hbs
index baf3a63cda0..337ab37cb3e 100644
--- a/app/assets/javascripts/admin/templates/groups-bulk.hbs
+++ b/app/assets/javascripts/admin/templates/groups-bulk.hbs
@@ -6,7 +6,7 @@
   </div>
 
   <div class='control'>
-    {{combo-box content=groups valueAttribute="id" value=groupId none="admin.groups.bulk_select"}}
+    {{combo-box filterable=true content=groups value=groupId none="admin.groups.bulk_select"}}
   </div>
 
   <div class='control'>
diff --git a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
index 50f02f9f5b1..c44edc1a3e2 100644
--- a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
+++ b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
@@ -30,7 +30,7 @@
     {{/if}}
   </div>
   {{else}}
-    {{i18n "admin.logs.staff_actions.filter"}} {{combo-box content=userHistoryActions nameProperty="name" value=filterActionId none="admin.logs.staff_actions.all"}}
+    {{i18n "admin.logs.staff_actions.filter"}} {{combo-box content=userHistoryActions value=filterActionId none="admin.logs.staff_actions.all"}}
   {{/if}}
 
   <div class="pull-right">
diff --git a/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs b/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
index d58a63c1342..13169426341 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
@@ -2,7 +2,6 @@
   {{#d-modal-body title="admin.customize.colors.select_base.title"}}
     {{i18n "admin.customize.colors.select_base.description"}}
     {{combo-box content=model
-                   nameProperty="name"
                    value=selectedBaseThemeId
                    valueAttribute="base_scheme_id"}}
   {{/d-modal-body}}
diff --git a/app/assets/javascripts/admin/templates/reports.hbs b/app/assets/javascripts/admin/templates/reports.hbs
index 57acba8f502..3927d1e384f 100644
--- a/app/assets/javascripts/admin/templates/reports.hbs
+++ b/app/assets/javascripts/admin/templates/reports.hbs
@@ -4,10 +4,10 @@
   {{i18n 'admin.dashboard.reports.start_date'}} {{date-picker-past value=startDate defaultDate=startDate}}
   {{i18n 'admin.dashboard.reports.end_date'}} {{date-picker-past value=endDate defaultDate=endDate}}
   {{#if showCategoryOptions}}
-    {{combo-box valueAttribute="value" content=categoryOptions value=categoryId}}
+    {{combo-box filterable=true valueAttribute="value" content=categoryOptions value=categoryId}}
   {{/if}}
   {{#if showGroupOptions}}
-    {{combo-box valueAttribute="value" content=groupOptions value=groupId}}
+    {{combo-box filterable=true valueAttribute="value" content=groupOptions value=groupId}}
   {{/if}}
   {{d-button action="refreshReport" class="btn-primary" label="admin.dashboard.reports.refresh_report" icon="refresh"}}
   {{d-button action="exportCsv" label="admin.export_csv.button_text" icon="download"}}
diff --git a/app/assets/javascripts/admin/templates/user-badges.hbs b/app/assets/javascripts/admin/templates/user-badges.hbs
index 9977aca39d2..1f6bae617c9 100644
--- a/app/assets/javascripts/admin/templates/user-badges.hbs
+++ b/app/assets/javascripts/admin/templates/user-badges.hbs
@@ -16,7 +16,7 @@
     <form class="form-horizontal">
       <div>
       <label>{{i18n 'admin.badges.badge'}}</label>
-      {{combo-box valueAttribute="id" value=selectedBadgeId content=grantableBadges nameProperty="name"}}
+      {{combo-box filterable=true value=selectedBadgeId content=grantableBadges}}
       </div>
       <label>
       <label>{{i18n 'admin.badges.reason'}}</label>
diff --git a/app/assets/javascripts/admin/templates/user-index.hbs b/app/assets/javascripts/admin/templates/user-index.hbs
index fcc9d716f2f..ec086e3271d 100644
--- a/app/assets/javascripts/admin/templates/user-index.hbs
+++ b/app/assets/javascripts/admin/templates/user-index.hbs
@@ -1,5 +1,4 @@
 <section class="details {{unless model.active 'not-activated'}}">
-
   <div class='user-controls'>
     {{#if model.canViewProfile}}
       {{#link-to 'user' model class="btn"}}
@@ -379,7 +378,7 @@
         <div class='controls'>
           {{#if model.customGroups}}
             {{i18n 'admin.groups.primary'}}
-            {{combo-box content=model.customGroups value=model.primary_group_id nameProperty="name" none="admin.groups.no_primary"}}
+            {{combo-box content=model.customGroups value=model.primary_group_id none="admin.groups.no_primary"}}
           {{/if}}
           {{#if primaryGroupDirty}}
             {{d-button icon="check" class="ok" action="savePrimaryGroup"}}
diff --git a/app/assets/javascripts/admin/templates/web-hooks-show.hbs b/app/assets/javascripts/admin/templates/web-hooks-show.hbs
index 8530de5f129..53c0cba1467 100644
--- a/app/assets/javascripts/admin/templates/web-hooks-show.hbs
+++ b/app/assets/javascripts/admin/templates/web-hooks-show.hbs
@@ -16,8 +16,6 @@
       <label for='content-type'>{{i18n 'admin.web_hooks.content_type'}}</label>
       {{combo-box content=contentTypes
                   name="content-type"
-                  nameProperty="name"
-                  valueAttribute="id"
                   value=model.content_type}}
     </div>
 
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e5d4e937841..280e12954ee 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -4,6 +4,7 @@
 //= require ./ember-addons/ember-computed-decorators
 //= require ./ember-addons/fmt
 //= require_tree ./discourse-common
+//= require_tree ./select-box-kit
 //= require ./discourse
 //= require ./deprecated
 
diff --git a/app/assets/javascripts/discourse-common/components/combo-box.js.es6 b/app/assets/javascripts/discourse-common/components/combo-box.js.es6
deleted file mode 100644
index 9e8a97e66d1..00000000000
--- a/app/assets/javascripts/discourse-common/components/combo-box.js.es6
+++ /dev/null
@@ -1,146 +0,0 @@
-import { bufferedRender } from 'discourse-common/lib/buffered-render';
-import { on, observes } from 'ember-addons/ember-computed-decorators';
-import { iconHTML } from 'discourse-common/lib/icon-library';
-
-export default Ember.Component.extend(bufferedRender({
-  tagName: 'select',
-  attributeBindings: ['tabindex', 'disabled'],
-  classNames: ['combobox'],
-  valueAttribute: 'id',
-  nameProperty: 'name',
-
-  buildBuffer(buffer) {
-    const nameProperty = this.get('nameProperty');
-    const none = this.get('none');
-    let noneValue = null;
-
-    // Add none option if required
-    if (typeof none === "string") {
-      buffer.push('<option value="">' + I18n.t(none) + "</option>");
-    } else if (typeof none === "object") {
-      noneValue = Em.get(none, this.get('valueAttribute'));
-      buffer.push(`<option value="${noneValue}">${Em.get(none, nameProperty)}</option>`);
-    }
-
-    let selected = this.get('value');
-    if (!Em.isNone(selected)) { selected = selected.toString(); }
-
-    let selectedFound = false;
-    let firstVal = undefined;
-    const content = this.get('content');
-
-    if (content) {
-      let first = true;
-      content.forEach(o => {
-        let val = o[this.get('valueAttribute')];
-        if (typeof val === "undefined") { val = o; }
-        if (!Em.isNone(val)) { val = val.toString(); }
-
-        const selectedText = (val === selected) ? "selected" : "";
-        const name = Handlebars.Utils.escapeExpression(Ember.get(o, nameProperty) || o);
-
-        if (val === selected) {
-          selectedFound = true;
-        }
-        if (first) {
-          firstVal = val;
-          first = false;
-        }
-        buffer.push(`<option ${selectedText} value="${val}">${name}</option>`);
-      });
-    }
-
-    if (!selectedFound && !noneValue) {
-      if (none) {
-        this.set('value', null);
-      } else {
-        this.set('value', firstVal);
-      }
-    }
-
-    Ember.run.scheduleOnce('afterRender', this, this._updateSelect2);
-  },
-
-  @observes('value')
-  valueChanged() {
-    const $combo = this.$(),
-          val = this.get('value');
-
-    if (val !== undefined && val !== null) {
-      $combo.select2('val', val.toString());
-    } else {
-      $combo.select2('val', null);
-    }
-  },
-
-  @observes('content.[]')
-  _rerenderOnChange() {
-    this.rerenderBuffer();
-  },
-
-  didInsertElement() {
-    this._super();
-
-    // Workaround for https://github.com/emberjs/ember.js/issues/9813
-    // Can be removed when fixed. Without it, the wrong option is selected
-    this.$('option').each((i, o) => o.selected = !!$(o).attr('selected'));
-
-    // observer for item names changing (optional)
-    if (this.get('nameChanges')) {
-      this.addObserver('content.@each.' + this.get('nameProperty'), this.rerenderBuffer);
-    }
-
-    const $elem = this.$();
-    const caps = this.capabilities;
-    const minimumResultsForSearch = this.get('minimumResultsForSearch') || ((caps && caps.isIOS) ? -1 : 5);
-
-    if (!this.get("selectionTemplate") && this.get("selectionIcon")) {
-      this.selectionTemplate = (item) => {
-        let name = Em.get(item, 'text');
-        name = Handlebars.escapeExpression(name);
-        return iconHTML(this.get('selectionIcon')) + name;
-      };
-    }
-
-    const options = {
-      minimumResultsForSearch,
-      width: this.get('width') || 'resolve',
-      allowClear: true
-    };
-
-    if (this.comboTemplate) {
-      options.formatResult = this.comboTemplate.bind(this);
-    }
-
-    if (this.selectionTemplate) {
-      options.formatSelection = this.selectionTemplate.bind(this);
-    }
-
-    $elem.select2(options);
-
-    const castInteger = this.get('castInteger');
-    $elem.on("change", e => {
-      let val = $(e.target).val();
-      if (val && val.length && castInteger) {
-        val = parseInt(val, 10);
-      }
-      Ember.run(() => this.set('value', val));
-    });
-
-    Ember.run.scheduleOnce('afterRender', this, this._triggerChange);
-  },
-
-  _updateSelect2() {
-    this.$().trigger('change.select2');
-  },
-
-  _triggerChange() {
-    this.$().trigger('change');
-  },
-
-  @on('willDestroyElement')
-  _destroyDropdown() {
-    this.$().select2('destroy');
-  }
-
-}));
diff --git a/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6 b/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6
deleted file mode 100644
index 1e5cb057485..00000000000
--- a/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6
+++ /dev/null
@@ -1,49 +0,0 @@
-import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import computed from "ember-addons/ember-computed-decorators";
-
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["categories-admin-dropdown"],
-
-  icon: `${iconHTML('bars')}${iconHTML('caret-down')}`.htmlSafe(),
-
-  generatedHeadertext: null,
-
-  @computed
-  content() {
-    const items = [
-      {
-        id: "create",
-        text: I18n.t("category.create"),
-        description: I18n.t("category.create_long"),
-        icon: "plus"
-      }
-    ];
-
-    const includeReorder = this.get("siteSettings.fixed_category_positions");
-    if (includeReorder) {
-      items.push({
-        id: "reorder",
-        text: I18n.t("categories.reorder.title"),
-        description: I18n.t("categories.reorder.title_long"),
-        icon: "random"
-      });
-    }
-
-    return items;
-  },
-
-  actionNames: {
-    create: "createCategory",
-    reorder: "reorderCategories"
-  },
-
-  actions: {
-    onSelectRow(content) {
-      this._super(content);
-
-      this.sendAction(`actionNames.${this.get("value")}`);
-      this.set("value", null);
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/category-chooser.js.es6 b/app/assets/javascripts/discourse/components/category-chooser.js.es6
deleted file mode 100644
index dfc7cf51802..00000000000
--- a/app/assets/javascripts/discourse/components/category-chooser.js.es6
+++ /dev/null
@@ -1,88 +0,0 @@
-import Combobox from 'discourse-common/components/combo-box';
-import { categoryBadgeHTML } from 'discourse/helpers/category-link';
-import computed from 'ember-addons/ember-computed-decorators';
-import { observes, on } from 'ember-addons/ember-computed-decorators';
-import PermissionType from 'discourse/models/permission-type';
-import Category from 'discourse/models/category';
-
-export default Combobox.extend({
-  classNames: ['combobox category-combobox'],
-  dataAttributes: ['id', 'description_text'],
-  overrideWidths: true,
-  castInteger: true,
-
-  @computed("scopedCategoryId", "categories")
-  content(scopedCategoryId, categories) {
-    // Always scope to the parent of a category, if present
-    if (scopedCategoryId) {
-      const scopedCat = Category.findById(scopedCategoryId);
-      scopedCategoryId = scopedCat.get('parent_category_id') || scopedCat.get('id');
-    }
-
-    const excludeCategoryId = this.get('excludeCategoryId');
-
-    return categories.filter(c => {
-      const categoryId = c.get('id');
-      if (scopedCategoryId && categoryId !== scopedCategoryId && c.get('parent_category_id') !== scopedCategoryId) { return false; }
-      if (c.get('isUncategorizedCategory') || excludeCategoryId === categoryId) { return false; }
-      return c.get('permission') === PermissionType.FULL;
-    });
-  },
-
-  @on("init")
-  @observes("site.sortedCategories")
-  _updateCategories() {
-    if (!this.get('categories')) {
-      const categories = Discourse.SiteSettings.fixed_category_positions_on_create ?
-                           Category.list() :
-                           Category.listByActivity();
-      this.set('categories', categories);
-    }
-  },
-
-  @computed("rootNone", "rootNoneLabel")
-  none(rootNone, rootNoneLabel) {
-    if (this.siteSettings.allow_uncategorized_topics || this.get('allowUncategorized')) {
-      if (rootNone) {
-        return rootNoneLabel || "category.none";
-      } else {
-        return Category.findUncategorized();
-      }
-    } else {
-      return 'category.choose';
-    }
-  },
-
-  comboTemplate(item) {
-    let category;
-
-    // If we have no id, but text with the uncategorized name, we can use that badge.
-    if (Ember.isEmpty(item.id)) {
-      const uncat = Category.findUncategorized();
-      if (uncat && uncat.get('name') === item.text) {
-        category = uncat;
-      }
-    } else {
-      category = Category.findById(parseInt(item.id,10));
-    }
-
-    if (!category) return item.text;
-    let result = categoryBadgeHTML(category, {link: false, allowUncategorized: true, hideParent: true});
-    const parentCategoryId = category.get('parent_category_id');
-
-    if (parentCategoryId) {
-      result = categoryBadgeHTML(Category.findById(parentCategoryId), {link: false}) + "&nbsp;" + result;
-    }
-
-    result += ` <span class='topic-count'>&times; ${category.get('topic_count')}</span>`;
-
-    const description = category.get('description');
-    // TODO wtf how can this be null?;
-    if (description && description !== 'null') {
-      result += `<div class="category-desc">${description.substr(0, 200)}${description.length > 200 ? '&hellip;' : ''}</div>`;
-    }
-
-    return result;
-  }
-
-});
diff --git a/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/category-notifications-button.js.es6
deleted file mode 100644
index 0595b116fb3..00000000000
--- a/app/assets/javascripts/discourse/components/category-notifications-button.js.es6
+++ /dev/null
@@ -1,28 +0,0 @@
-import NotificationOptionsComponent from "discourse/components/notifications-button";
-import computed from "ember-addons/ember-computed-decorators";
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-export default NotificationOptionsComponent.extend({
-  classNames: ["category-notifications-button"],
-
-  hidden: Ember.computed.or("category.deleted", "site.isMobileDevice"),
-
-  i18nPrefix: "category.notifications",
-
-  value: Em.computed.alias("category.notification_level"),
-
-  @computed("value")
-  icon() {
-    return `${this._super()}${iconHTML("caret-down")}`.htmlSafe();
-  },
-
-  generatedHeadertext: null,
-
-  actions: {
-    onSelectRow(content) {
-      this._super(content);
-
-      this.get("category").setNotification(this.get("value"));
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/category-select-box.js.es6 b/app/assets/javascripts/discourse/components/category-select-box.js.es6
deleted file mode 100644
index e725a7cb1d1..00000000000
--- a/app/assets/javascripts/discourse/components/category-select-box.js.es6
+++ /dev/null
@@ -1,162 +0,0 @@
-import SelectBoxComponent from "discourse/components/select-box";
-import { categoryBadgeHTML } from "discourse/helpers/category-link";
-import { observes, on } from "ember-addons/ember-computed-decorators";
-import PermissionType from "discourse/models/permission-type";
-import Category from "discourse/models/category";
-
-export default SelectBoxComponent.extend({
-  classNames: ["category-select-box"],
-
-  selectBoxRowComponent: "category-select-box/category-select-box-row",
-
-  textKey: "name",
-
-  filterable: true,
-
-  castInteger: true,
-
-  clearable: true,
-
-  allowUncategorized: null,
-
-  init() {
-    this._super();
-
-    if (!Ember.isNone(this.get("categories"))) {
-      this.set("content", this.get("categories"));
-      this._scopeCategories();
-    }
-
-    if (Ember.isNone(this.get("value"))) {
-      if (this.siteSettings.allow_uncategorized_topics && this.get("allowUncategorized") !== false) {
-        this.set("value", Category.findUncategorized().id);
-      }
-    }
-  },
-
-  filterFunction: function(content) {
-    const _matchFunction = (filter, text) => {
-      return text.toLowerCase().indexOf(filter) > -1;
-    };
-
-    return (selectBox) => {
-      const filter = selectBox.get("filter").toLowerCase();
-      return _.filter(content, (c) => {
-        const category = Category.findById(c[selectBox.get("idKey")]);
-        const text = c[selectBox.get("textKey")];
-        if (category && category.get("parentCategory")) {
-          const categoryName = category.get("parentCategory.name");
-          return _matchFunction(filter, text) || _matchFunction(filter, categoryName);
-        } else {
-          return _matchFunction(filter, text);
-        }
-      });
-    };
-  },
-
-  @on("init")
-  @observes("selectedContent")
-  _setHeaderText: function() {
-    let headerText;
-
-    if (Ember.isNone(this.get("selectedContent"))) {
-      if (this.siteSettings.allow_uncategorized_topics) {
-        headerText = Ember.get(Category.findUncategorized(), this.get("textKey"));
-      } else {
-        headerText = I18n.t("category.choose").htmlSafe();
-      }
-    } else {
-      headerText = this.get("selectedContent.text");
-    }
-
-    this.set("headerText", headerText);
-  },
-
-  templateForRow: function() {
-    return (rowComponent) => this.rowContentTemplate(rowComponent.get("content"));
-  }.property(),
-
-  @observes("scopedCategoryId", "categories")
-  _scopeCategories() {
-    let scopedCategoryId = this.get("scopedCategoryId");
-    const categories = this.get("categories");
-
-    // Always scope to the parent of a category, if present
-    if (scopedCategoryId) {
-      const scopedCat = Category.findById(scopedCategoryId);
-      scopedCategoryId = scopedCat.get("parent_category_id") || scopedCat.get("id");
-    }
-
-    const excludeCategoryId = this.get("excludeCategoryId");
-
-    const filteredCategories = categories.filter(c => {
-      const categoryId = c.get("id");
-      if (scopedCategoryId && categoryId !== scopedCategoryId && c.get("parent_category_id") !== scopedCategoryId) { return false; }
-      if (excludeCategoryId === categoryId) { return false; }
-      if (this.get("allowUncategorized") === false && c.get("isUncategorizedCategory")) { return false; }
-      if (this.get("allowUncategorized") !== true) {
-        if (!this.siteSettings.allow_uncategorized_topics && c.get("isUncategorizedCategory")) {
-          return false;
-        }
-      }
-      return c.get("permission") === PermissionType.FULL;
-    });
-
-    this.set("content", filteredCategories);
-  },
-
-  @on("didRender")
-  _bindComposerResizing() {
-    this.appEvents.on("composer:resized", this, this.applyDirection);
-  },
-
-  @on("willDestroyElement")
-  _unbindComposerResizing() {
-    this.appEvents.off("composer:resized");
-  },
-
-  @on("init")
-  @observes("site.sortedCategories")
-  _updateCategories() {
-    if (!this.get("categories")) {
-      const categories = Discourse.SiteSettings.fixed_category_positions_on_create ?
-                        Category.list() :
-                        Category.listByActivity();
-      this.set("categories", categories);
-    }
-  },
-
-  rowContentTemplate(item) {
-    let category;
-
-    // If we have no id, but text with the uncategorized name, we can use that badge.
-    if (Ember.isEmpty(item.id)) {
-      const uncat = Category.findUncategorized();
-      if (uncat && uncat.get("name") === item.text) {
-        category = uncat;
-      }
-    } else {
-      category = Category.findById(parseInt(item.id,10));
-    }
-
-    if (!category) return item.text;
-    let result = categoryBadgeHTML(category, {link: false, allowUncategorized: true, hideParent: true});
-    const parentCategoryId = category.get("parent_category_id");
-
-    if (parentCategoryId) {
-      result = `<div class="category-status">${categoryBadgeHTML(Category.findById(parentCategoryId), {link: false})}&nbsp;${result}`;
-    } else {
-      result = `<div class="category-status">${result}`;
-    }
-
-    result += ` <span class="topic-count">&times; ${category.get("topic_count")}</span></div>`;
-
-    const description = category.get("description");
-    // TODO wtf how can this be null?;
-    if (description && description !== "null") {
-      result += `<div class="category-desc">${description.substr(0, 200)}${description.length > 200 ? '&hellip;' : ''}</div>`;
-    }
-
-    return result;
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6 b/app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6
deleted file mode 100644
index e676df08818..00000000000
--- a/app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6
+++ /dev/null
@@ -1,13 +0,0 @@
-import computed from 'ember-addons/ember-computed-decorators';
-import SelectBoxRowComponent from "discourse/components/select-box/select-box-row";
-import Category from "discourse/models/category";
-
-export default SelectBoxRowComponent.extend({
-  classNameBindings: ["isUncategorized"],
-
-  @computed("content")
-  isUncategorized(content) {
-    const category = Category.findById(content.id);
-    return category.get("isUncategorizedCategory");
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/dropdown-select-box.js.es6 b/app/assets/javascripts/discourse/components/dropdown-select-box.js.es6
deleted file mode 100644
index b268da2aa81..00000000000
--- a/app/assets/javascripts/discourse/components/dropdown-select-box.js.es6
+++ /dev/null
@@ -1,33 +0,0 @@
-import computed from "ember-addons/ember-computed-decorators";
-import SelectBoxComponent from "discourse/components/select-box";
-
-export default SelectBoxComponent.extend({
-  classNames: ["dropdown-select-box"],
-  wrapper: false,
-  verticalOffset: 3,
-  collectionHeight: "auto",
-  fullWidthOnMobile: true,
-  selectBoxHeaderComponent: "dropdown-select-box/dropdown-header",
-
-  @computed
-  templateForRow: function() {
-    return (rowComponent) => {
-      let template = "";
-      const content = rowComponent.get("content");
-
-      const icon = rowComponent.icon();
-      if (icon) {
-        template += `<div class="icons">${icon}</div>`;
-      }
-
-      template += `
-        <div class="texts">
-          <span class="title">${Handlebars.escapeExpression(Ember.get(content, this.get("textKey")))}</span>
-          <span class="desc">${Handlebars.escapeExpression(content.description)}</span>
-        </div>
-      `;
-
-      return template;
-    };
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/dropdown-select-box/dropdown-header.js.es6 b/app/assets/javascripts/discourse/components/dropdown-select-box/dropdown-header.js.es6
deleted file mode 100644
index 9e6499c04f2..00000000000
--- a/app/assets/javascripts/discourse/components/dropdown-select-box/dropdown-header.js.es6
+++ /dev/null
@@ -1,7 +0,0 @@
-import SelectBoxHeaderComponent from "discourse/components/select-box/select-box-header";
-
-export default SelectBoxHeaderComponent.extend({
-  layoutName: "components/dropdown-select-box/dropdown-header",
-
-  classNames: ["dropdown-header"]
-});
diff --git a/app/assets/javascripts/discourse/components/future-date-input-selector.js.es6 b/app/assets/javascripts/discourse/components/future-date-input-selector.js.es6
deleted file mode 100644
index df1b2e871c1..00000000000
--- a/app/assets/javascripts/discourse/components/future-date-input-selector.js.es6
+++ /dev/null
@@ -1,207 +0,0 @@
-import { iconHTML } from 'discourse-common/lib/icon-library';
-import { default as computed, observes } from "ember-addons/ember-computed-decorators";
-import Combobox from 'discourse-common/components/combo-box';
-import { CLOSE_STATUS_TYPE } from 'discourse/controllers/edit-topic-timer';
-
-const LATER_TODAY = 'later_today';
-const TOMORROW = 'tomorrow';
-const LATER_THIS_WEEK = 'later_this_week';
-const THIS_WEEKEND = 'this_weekend';
-const NEXT_WEEK = 'next_week';
-const TWO_WEEKS = 'two_weeks';
-const NEXT_MONTH = 'next_month';
-const FOREVER = 'forever';
-
-export const PICK_DATE_AND_TIME = 'pick_date_and_time';
-export const SET_BASED_ON_LAST_POST = 'set_based_on_last_post';
-
-export const FORMAT = 'YYYY-MM-DD HH:mm';
-
-export default Combobox.extend({
-  classNames: ['future-date-input-selector'],
-  isCustom: Ember.computed.equal("value", PICK_DATE_AND_TIME),
-
-  @computed()
-  content() {
-    const selections = [];
-    const now = moment();
-    const canScheduleToday = (24 - now.hour()) > 6;
-    const day = now.day();
-
-    if (canScheduleToday) {
-      selections.push({
-        id: LATER_TODAY,
-        name: I18n.t('topic.auto_update_input.later_today')
-      });
-    }
-
-    selections.push({
-      id: TOMORROW,
-      name: I18n.t('topic.auto_update_input.tomorrow')
-    });
-
-    if (!canScheduleToday && day < 4) {
-      selections.push({
-        id: LATER_THIS_WEEK,
-        name: I18n.t('topic.auto_update_input.later_this_week')
-      });
-    }
-
-    if (day < 5 && this.get('includeWeekend')) {
-      selections.push({
-        id: THIS_WEEKEND,
-        name: I18n.t('topic.auto_update_input.this_weekend')
-      });
-    }
-
-    if (day !== 7)  {
-      selections.push({
-        id: NEXT_WEEK,
-        name: I18n.t('topic.auto_update_input.next_week')
-      });
-    }
-
-    selections.push({
-      id: TWO_WEEKS,
-      name: I18n.t('topic.auto_update_input.two_weeks')
-    });
-
-    if (moment().endOf('month').date() !== now.date()) {
-      selections.push({
-        id: NEXT_MONTH,
-        name: I18n.t('topic.auto_update_input.next_month')
-      });
-    }
-
-    if (this.get('includeForever')) {
-      selections.push({
-        id: FOREVER,
-        name: I18n.t('topic.auto_update_input.forever')
-      });
-    }
-
-    selections.push({
-      id: PICK_DATE_AND_TIME,
-      name: I18n.t('topic.auto_update_input.pick_date_and_time')
-    });
-
-    if (this.get('statusType') === CLOSE_STATUS_TYPE) {
-      selections.push({
-        id: SET_BASED_ON_LAST_POST,
-        name: I18n.t('topic.auto_update_input.set_based_on_last_post')
-      });
-    }
-
-    return selections;
-  },
-
-  @observes('value')
-  _updateInput() {
-    if (this.get('isCustom')) return;
-    let input = null;
-    const { time } = this.get('updateAt');
-
-    if (time && !Ember.isEmpty(this.get('value'))) {
-      input = time.format(FORMAT);
-    }
-
-    this.set('input', input);
-  },
-
-  @computed('value')
-  updateAt(value) {
-    return this._updateAt(value);
-  },
-
-  comboTemplate(state) {
-    return this._format(state);
-  },
-
-  selectionTemplate(state) {
-    return this._format(state);
-  },
-
-  _format(state) {
-    let { time, icon } = this._updateAt(state.id);
-    let icons;
-
-    if (icon) {
-      icons = icon.split(',').map(i => iconHTML(i)).join(" ");
-    }
-
-    if (time) {
-      if (state.id === LATER_TODAY) {
-        time = time.format('h a');
-      } else if (state.id === NEXT_MONTH || state.id === TWO_WEEKS) {
-        time = time.format('MMM D');
-      } else {
-        time = time.format('ddd, h a');
-      }
-    }
-
-    let output = "";
-
-    if (!Ember.isEmpty(icons)) {
-      output += `<span class='future-date-input-selector-icons'>${icons}</span>`;
-    }
-
-    output += `<span>${state.text}</span>`;
-
-    if (time && state.id !== FOREVER) {
-      output += `<span class='future-date-input-selector-datetime'>${time}</span>`;
-    }
-
-    return output;
-  },
-
-  _updateAt(selection) {
-    let time = moment();
-    let icon;
-    const timeOfDay = this.get('statusType') !== CLOSE_STATUS_TYPE ? 8 : 18;
-
-    switch(selection) {
-      case LATER_TODAY:
-        time = time.hour(18).minute(0);
-        icon = 'moon-o';
-        break;
-      case TOMORROW:
-        time = time.add(1, 'day').hour(timeOfDay).minute(0);
-        icon = 'sun-o';
-        break;
-      case LATER_THIS_WEEK:
-        time = time.add(2, 'day').hour(timeOfDay).minute(0);
-        icon = 'briefcase';
-        break;
-      case THIS_WEEKEND:
-        time = time.day(6).hour(timeOfDay).minute(0);
-        icon = 'bed';
-        break;
-      case NEXT_WEEK:
-        time = time.add(1, 'week').day(1).hour(timeOfDay).minute(0);
-        icon = 'briefcase';
-        break;
-      case TWO_WEEKS:
-        time = time.add(2, 'week').hour(timeOfDay).minute(0);
-        icon = 'briefcase';
-        break;
-      case NEXT_MONTH:
-        time = time.add(1, 'month').startOf('month').hour(timeOfDay).minute(0);
-        icon = 'briefcase';
-        break;
-      case FOREVER:
-        time = time.add(1000, 'year').hour(timeOfDay).minute(0);
-        icon = 'gavel';
-        break;
-      case PICK_DATE_AND_TIME:
-        time = null;
-        icon = 'calendar-plus-o';
-        break;
-      case SET_BASED_ON_LAST_POST:
-        time = null;
-        icon = 'clock-o';
-        break;
-    }
-
-    return { time, icon };
-  },
-});
diff --git a/app/assets/javascripts/discourse/components/future-date-input.js.es6 b/app/assets/javascripts/discourse/components/future-date-input.js.es6
index c7f63d528db..ae0a14cfb0a 100644
--- a/app/assets/javascripts/discourse/components/future-date-input.js.es6
+++ b/app/assets/javascripts/discourse/components/future-date-input.js.es6
@@ -3,7 +3,7 @@ import {
   FORMAT,
   PICK_DATE_AND_TIME,
   SET_BASED_ON_LAST_POST
-} from "discourse/components/future-date-input-selector";
+} from "select-box-kit/components/future-date-input-selector";
 
 import { PUBLISH_TO_CATEGORY_STATUS_TYPE } from 'discourse/controllers/edit-topic-timer';
 
diff --git a/app/assets/javascripts/discourse/components/group-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/group-notifications-button.js.es6
index 3d597f8b56f..238e85b173d 100644
--- a/app/assets/javascripts/discourse/components/group-notifications-button.js.es6
+++ b/app/assets/javascripts/discourse/components/group-notifications-button.js.es6
@@ -8,7 +8,7 @@ export default NotificationOptionsComponent.extend({
   i18nPrefix: "groups.notifications",
 
   actions: {
-    onSelectRow(content) {
+    onSelect(content) {
       this._super(content);
 
       this.get("group").setNotification(this.get("value"), this.get("user.id"));
diff --git a/app/assets/javascripts/discourse/components/notifications-button.js.es6 b/app/assets/javascripts/discourse/components/notifications-button.js.es6
deleted file mode 100644
index 2c54defb292..00000000000
--- a/app/assets/javascripts/discourse/components/notifications-button.js.es6
+++ /dev/null
@@ -1,68 +0,0 @@
-import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import computed from "ember-addons/ember-computed-decorators";
-import { buttonDetails } from "discourse/lib/notification-levels";
-import { allLevels } from "discourse/lib/notification-levels";
-
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["notifications-button"],
-
-  i18nPrefix: "",
-  i18nPostfix: "",
-  textKey: "key",
-  showFullTitle: true,
-  fullWidthOnMobile: true,
-  content: allLevels,
-
-  value: Em.computed.alias("notificationLevel"),
-
-  @computed("selectedDetails")
-  icon(details) {
-    return iconHTML(details.icon, {class: details.key}).htmlSafe();
-  },
-
-  @computed("selectedDetails.key", "i18nPrefix")
-  selectedTitle(key, prefix) {
-    return I18n.t(`${prefix}.${key}.title`);
-  },
-
-  @computed("value")
-  selectedDetails(value) {
-    return buttonDetails(value);
-  },
-
-  @computed("selectedTitle", "showFullTitle")
-  generatedHeadertext(selectedTitle, showFullTitle) {
-    return showFullTitle ? selectedTitle : null;
-  },
-
-  @computed
-  titleForRow: function() {
-    return (rowComponent) => {
-      const notificationLevel = rowComponent.get(`content.${this.get("idKey")}`);
-      const details = buttonDetails(notificationLevel);
-      return I18n.t(`${this.get("i18nPrefix")}.${details.key}.title`);
-    };
-  },
-
-  @computed
-  templateForRow: function() {
-    return (rowComponent) => {
-      const content = rowComponent.get("content");
-      const start = `${this.get("i18nPrefix")}.${content.key}${this.get("i18nPostfix")}`;
-      const title = I18n.t(`${start}.title`);
-      const description = I18n.t(`${start}.description`);
-
-      return `
-        <div class="icons">
-          <span class="selection-indicator"></span>
-          ${iconHTML(content.icon, { class: content.key.dasherize() })}
-        </div>
-        <div class="texts">
-          <span class="title">${Handlebars.escapeExpression(title)}</span>
-          <span class="desc">${Handlebars.escapeExpression(description)}</span>
-        </div>
-      `;
-    };
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/pinned-options.js.es6 b/app/assets/javascripts/discourse/components/pinned-options.js.es6
deleted file mode 100644
index 2daf5bea988..00000000000
--- a/app/assets/javascripts/discourse/components/pinned-options.js.es6
+++ /dev/null
@@ -1,73 +0,0 @@
-import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
-import computed from "ember-addons/ember-computed-decorators";
-import { observes } from "ember-addons/ember-computed-decorators";
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["pinned-options"],
-
-  @computed("topic.pinned")
-  value(pinned) {
-    return pinned ? "pinned" : "unpinned";
-  },
-
-  @observes("topic.pinned")
-  _pinnedChanged() {
-    this.set("value", this.get("topic.pinned") ? "pinned" : "unpinned");
-  },
-
-  @computed("topic.pinned_globally")
-  content(pinnedGlobally) {
-    const globally = pinnedGlobally ? "_globally" : "";
-
-    return [
-      {
-        id: "pinned",
-        text: I18n.t("topic_statuses.pinned" + globally + ".title"),
-        description: I18n.t('topic_statuses.pinned' + globally + '.help'),
-        icon: "thumb-tack"
-      },
-      {
-        id: "unpinned",
-        text: I18n.t("topic_statuses.unpinned.title"),
-        icon: "thumb-tack",
-        description: I18n.t('topic_statuses.unpinned.help'),
-        iconClass: "unpinned"
-      }
-    ];
-  },
-
-  @computed("topic.pinned", "topic.pinned_globally")
-  icon(pinned, pinnedGlobally) {
-    const globally = pinnedGlobally ? "_globally" : "";
-    const state = pinned ? `pinned${globally}` : "unpinned";
-
-    return iconHTML(
-      "thumb-tack",
-      { class: (state === "unpinned" ? "unpinned" : null) }
-    );
-  },
-
-  @computed("topic.pinned", "topic.pinned_globally")
-  generatedHeadertext(pinned, pinnedGlobally) {
-    const globally = pinnedGlobally ? "_globally" : "";
-    const state = pinned ? `pinned${globally}` : "unpinned";
-    const title = I18n.t(`topic_statuses.${state}.title`);
-
-    return `${title}${iconHTML("caret-down")}`.htmlSafe();
-  },
-
-  actions: {
-    onSelectRow(content) {
-      this._super(content);
-
-      const topic = this.get("topic");
-
-      if (this.get("value") === "unpinned") {
-        topic.clearPin();
-      } else {
-        topic.rePin();
-      }
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/select-box.js.es6 b/app/assets/javascripts/discourse/components/select-box.js.es6
deleted file mode 100644
index 1a05f398078..00000000000
--- a/app/assets/javascripts/discourse/components/select-box.js.es6
+++ /dev/null
@@ -1,485 +0,0 @@
-import { on, observes } from "ember-addons/ember-computed-decorators";
-import computed from "ember-addons/ember-computed-decorators";
-
-export default Ember.Component.extend({
-  layoutName: "components/select-box",
-  classNames: "select-box",
-  classNameBindings: ["expanded:is-expanded", "hidden:is-hidden"],
-
-  expanded: false,
-  focused: false,
-  filterFocused: false,
-  renderBody: false,
-  wrapper: true,
-  hidden: false,
-  tabindex: 0,
-  scrollableParentSelector: ".modal-body",
-
-  caretUpIcon: "caret-up",
-  caretDownIcon: "caret-down",
-  headerText: I18n.t("select_box.default_header_text"),
-  dynamicHeaderText: true,
-  icon: null,
-  clearable: false,
-
-  value: null,
-  highlightedValue: null,
-  selectedContent: null,
-  noContentLabel: I18n.t("select_box.no_content"),
-  clearSelectionLabel: null,
-
-  idKey: "id",
-  textKey: "text",
-  iconKey: "icon",
-
-  filterable: false,
-  filter: "",
-  filterPlaceholder: I18n.t("select_box.filter_placeholder"),
-  filterIcon: "search",
-
-  selectBoxRowComponent: "select-box/select-box-row",
-  selectBoxFilterComponent: "select-box/select-box-filter",
-  selectBoxHeaderComponent: "select-box/select-box-header",
-  selectBoxCollectionComponent: "select-box/select-box-collection",
-
-  collectionHeight: 200,
-  verticalOffset: 0,
-  horizontalOffset: 0,
-  fullWidthOnMobile: false,
-
-  castInteger: false,
-
-  click(event) {
-    event.stopPropagation();
-  },
-
-  filterFunction: function(content) {
-    return (selectBox) => {
-      const filter = selectBox.get("filter").toLowerCase();
-      return _.filter(content, (c) => {
-        return c[selectBox.get("textKey")].toLowerCase().indexOf(filter) > -1;
-      });
-    };
-  },
-
-  @computed("textKey")
-  titleForRow(textKey) {
-    return (rowComponent) => {
-      return rowComponent.get(`content.${textKey}`);
-    };
-  },
-
-  @computed("idKey")
-  idForRow(idKey) {
-    return (rowComponent) => {
-      return rowComponent.get(`content.${idKey}`);
-    };
-  },
-
-  @computed
-  shouldHighlightRow: function() {
-    return (rowComponent) => {
-      const id = this._castInteger(rowComponent.get(`content.${this.get("idKey")}`));
-      return id === this.get("highlightedValue");
-    };
-  },
-
-  @computed("value", "idKey")
-  shouldSelectRow(value, idKey) {
-    return (rowComponent) => {
-      const id = this._castInteger(rowComponent.get(`content.${idKey}`));
-      return id === value;
-    };
-  },
-
-  @computed
-  templateForRow: function() {
-    return (rowComponent) => {
-      let template = "";
-
-      const icon = rowComponent.icon();
-      if (icon) {
-        template += icon;
-      }
-
-      const text = rowComponent.get(`content.${this.get("textKey")}`);
-      template += `<p class="text">${Handlebars.escapeExpression(text)}</p>`;
-
-      return template;
-    };
-  },
-
-  applyDirection() {
-    this.$().removeClass("is-above is-below is-left-aligned is-right-aligned");
-    let options = { left: "auto", bottom: "auto", left: "auto", top: "auto" };
-    const headerHeight = this.$(".select-box-header").outerHeight(false);
-    const filterHeight = this.$(".select-box-filter").outerHeight(false);
-    const bodyHeight = this.$(".select-box-body").outerHeight(false);
-    const windowWidth = $(window).width();
-    const windowHeight = $(window).height();
-    const boundingRect = this.$()[0].getBoundingClientRect();
-    const offsetTop = boundingRect.top;
-
-    if (this.get("fullWidthOnMobile") && this.site.isMobileDevice) {
-      const margin = 10;
-      const relativeLeft = this.$().offset().left - $(window).scrollLeft();
-      options.left = margin - relativeLeft;
-      options.width = windowWidth - margin * 2;
-      options.maxWidth = options.minWidth = "unset";
-    } else {
-      const offsetLeft = boundingRect.left;
-      const bodyWidth = this.$(".select-box-body").outerWidth(false);
-      const hasRightSpace = (windowWidth - (this.get("horizontalOffset") + offsetLeft + filterHeight + bodyWidth) > 0);
-
-      if (hasRightSpace) {
-        this.$().addClass("is-left-aligned");
-        options.left = this.get("horizontalOffset");
-      } else {
-        this.$().addClass("is-right-aligned");
-        options.right = this.get("horizontalOffset");
-      }
-    }
-
-    const componentHeight = this.get("verticalOffset") + bodyHeight + headerHeight;
-    const hasBelowSpace = windowHeight - offsetTop - componentHeight > 0;
-    if (hasBelowSpace) {
-      this.$().addClass("is-below");
-      options.top = headerHeight + this.get("verticalOffset");
-    } else {
-      this.$().addClass("is-above");
-      options.bottom = headerHeight + this.get("verticalOffset");
-    }
-
-    this.$(".select-box-body").css(options);
-  },
-
-  init() {
-    this._super();
-
-    const content = this.getWithDefault("content", []);
-    this.set("content", content);
-
-    if (this.site.isMobileDevice) {
-      this.set("filterable", false);
-    }
-
-    this.setProperties({
-      value: this._castInteger(this.get("value")),
-      componentId: this.elementId
-    });
-  },
-
-  @on("willDestroyElement")
-  _removeDocumentListeners: function() {
-    $(document).off("click.select-box");
-    $(window).off("resize.select-box");
-  },
-
-  @on("willDestroyElement")
-  _unbindEvents: function() {
-    this.$(".select-box-offscreen").off(
-      "focusin.select-box",
-      "focusout.select-box",
-      "keydown.select-box"
-    );
-    this.$(".filter-query").off("focusin.select-box", "focusout.select-box");
-  },
-
-  @on("didRender")
-  _configureSelectBoxDOM: function() {
-    if (this.get("scrollableParent").length === 1) {
-      this._removeFixedPosition();
-    }
-
-    const computedWidth = this.$().outerWidth(false);
-    const computedHeight = this.$().outerHeight(false);
-
-    this.$(".select-box-filter").css("height", computedHeight);
-
-    if (this.get("expanded")) {
-      if (this.get("scrollableParent").length === 1) {
-        this._applyFixedPosition(computedWidth, computedHeight);
-      }
-
-      this.$(".select-box-collection").css("max-height", this.get("collectionHeight"));
-
-      Ember.run.schedule("afterRender", () => {
-        this.applyDirection();
-        if (this.get("wrapper")) {
-          this._positionSelectBoxWrapper();
-        }
-      });
-    } else {
-      if (this.get("wrapper")) {
-        this.$(".select-box-wrapper").hide();
-      }
-    }
-  },
-
-  keyDown(event) {
-    const keyCode = event.keyCode || event.which;
-
-    if (this.get("expanded")) {
-      if ((keyCode === 13 || keyCode === 9) && Ember.isPresent(this.get("highlightedValue"))) {
-        event.preventDefault();
-        this.send("onSelectRow", this.get("highlightedContent"));
-      }
-
-      if (keyCode === 9) {
-        this.set("expanded", false);
-      }
-
-      if (keyCode === 27) {
-        this.set("expanded", false);
-        event.stopPropagation();
-      }
-
-      if (keyCode === 38) {
-        event.preventDefault();
-        const self = this;
-        Ember.run.throttle(self, this._handleUpArrow, 50);
-      }
-
-      if (keyCode === 40) {
-        event.preventDefault();
-        const self = this;
-        Ember.run.throttle(self, this._handleDownArrow, 50);
-      }
-    }
-  },
-
-  @on("didRender")
-  _setupDocumentListeners: function() {
-    $(document).off("click.select-box");
-
-    $(document)
-      .on("click.select-box", (event) => {
-        if (this.isDestroying || this.isDestroyed) { return; }
-
-        const $element = this.$();
-        const $target = $(event.target);
-
-        if (!$target.closest($element).length) {
-          this.set("expanded", false);
-        }
-      });
-
-    $(window).on("resize.select-box", () => this.set("expanded", false) );
-  },
-
-  @on("didInsertElement")
-  _bindEvents: function() {
-    this.$(".select-box-offscreen")
-      .on("focusin.select-box", () => this.set("focused", true) )
-      .on("focusout.select-box", () => this.set("focused", false) );
-
-    this.$(".filter-query")
-      .on("focusin.select-box", () => this.set("filterFocused", true) )
-      .on("focusout.select-box", () => this.set("filterFocused", false) );
-
-    this.$(".select-box-offscreen").on("keydown.select-box", (event) => {
-      const keyCode = event.keyCode || event.which;
-
-      if (keyCode === 13 || keyCode === 40) {
-        this.setProperties({ expanded: true, focused: false });
-        event.stopPropagation();
-      }
-
-      if (keyCode >= 65 && keyCode <= 90) {
-        this.setProperties({ expanded: true, focused: false });
-        Ember.run.schedule("afterRender", () => {
-          this.$(".filter-query").focus().val(String.fromCharCode(keyCode));
-        });
-      }
-    });
-  },
-
-  @observes("expanded")
-  _expandedChanged: function() {
-    if (this.get("expanded")) {
-      this.setProperties({ highlightedValue: null, renderBody: true, focused: false });
-
-      if (this.get("filterable")) {
-        Ember.run.schedule("afterRender", () => this.$(".filter-query").focus());
-      }
-    };
-  },
-
-  @computed("value", "content.[]", "idKey")
-  selectedContent(value, content, idKey) {
-    if (Ember.isNone(value)) {
-      return null;
-    }
-
-    return content.find((c) => {
-      return this._castInteger(Ember.get(c, idKey)) === value;
-    });
-  },
-
-  @computed("highlightedValue", "content.[]", "idKey")
-  highlightedContent(highlightedValue, content, idKey) {
-    if (Ember.isNone(highlightedValue)) {
-      return null;
-    }
-
-    return content.find((c) => {
-      return this._castInteger(Ember.get(c, idKey)) === highlightedValue;
-    });
-  },
-
-  @computed("headerText", "selectedContent", "textKey")
-  selectedTitle(headerText, selectedContent, textKey) {
-    if (Ember.isNone(selectedContent)) {
-      return headerText;
-    }
-
-    return selectedContent[textKey];
-  },
-
-  @computed("headerText", "dynamicHeaderText", "selectedContent", "textKey", "clearSelectionLabel")
-  generatedHeadertext(headerText, dynamic, selectedContent, textKey, clearSelectionLabel) {
-    if (dynamic && !Ember.isNone(selectedContent)) {
-      return selectedContent[textKey];
-    }
-
-    if (dynamic && Ember.isNone(selectedContent) && !Ember.isNone(clearSelectionLabel)) {
-      return I18n.t(clearSelectionLabel);
-    }
-
-    return headerText;
-  },
-
-  @computed("content.[]", "filter", "idKey")
-  filteredContent(content, filter, idKey) {
-    let filteredContent;
-
-    if (Ember.isEmpty(filter)) {
-      filteredContent = content;
-    } else {
-      filteredContent = this.filterFunction(content)(this);
-
-      if (!Ember.isEmpty(filteredContent)) {
-        this.set("highlightedValue", filteredContent[0][idKey]);
-      }
-    }
-
-    return filteredContent;
-  },
-
-  @computed("scrollableParentSelector")
-  scrollableParent(scrollableParentSelector) {
-    return this.$().parents(scrollableParentSelector).first();
-  },
-
-  actions: {
-    onToggle() {
-      this.toggleProperty("expanded");
-    },
-
-    onFilterChange(filter) {
-      this.set("filter", filter);
-    },
-
-    onHoverRow(content) {
-      const id = this._castInteger(Ember.get(content, this.get("idKey")));
-      this.set("highlightedValue", id);
-    },
-
-    onSelectRow(content) {
-      this.setProperties({
-        value: this._castInteger(Ember.get(content, this.get("idKey"))),
-        expanded: false
-      });
-    },
-
-    onClearSelection() {
-      this.setProperties({ value: null, expanded: false });
-    }
-  },
-
-  _positionSelectBoxWrapper() {
-    const headerHeight = this.$(".select-box-header").outerHeight(false);
-
-    this.$(".select-box-wrapper").css({
-      width: this.$().width(),
-      display: "block",
-      height: headerHeight + this.$(".select-box-body").outerHeight(false)
-    });
-  },
-
-  _castInteger(id) {
-    if (this.get("castInteger") === true && Ember.isPresent(id)) {
-      return parseInt(id, 10);
-    }
-
-    return id;
-  },
-
-  _applyFixedPosition(width, height) {
-    const $placeholder = $(`<div class='select-box-fixed-placeholder-${this.get("componentId")}' style='vertical-align: middle; height: ${height}px; width: ${width}px; line-height: ${height}px;display:inline-block'></div>`);
-
-    this.$()
-      .before($placeholder)
-      .css({
-        width,
-        position: "fixed",
-        "margin-top": -this.get("scrollableParent").scrollTop(),
-        "margin-left": -width
-      });
-
-    this.get("scrollableParent").on("scroll.select-box", () => this.set("expanded", false) );
-  },
-
-  _removeFixedPosition() {
-    $(`.select-box-fixed-placeholder-${this.get("componentId")}`).remove();
-    this.$().css({
-      top: "auto",
-      left: "auto",
-      "margin-left": "auto",
-      "margin-top": "auto",
-      position: "relative"
-    });
-
-    this.get("scrollableParent").off("scroll.select-box");
-  },
-
-  _handleDownArrow() {
-    this._handleArrow("down");
-  },
-
-  _handleUpArrow() {
-    this._handleArrow("up");
-  },
-
-  _handleArrow(direction) {
-    const content = this.get("filteredContent");
-    const idKey = this.get("idKey");
-    const selectedContent = content.findBy(idKey, this.get("highlightedValue"));
-    const currentIndex = content.indexOf(selectedContent);
-
-    if (direction === "down") {
-      if (currentIndex < 0) {
-        this.set("highlightedValue", this._castInteger(Ember.get(content[0], idKey)));
-      } else if(currentIndex + 1 < content.length) {
-        this.set("highlightedValue", this._castInteger(Ember.get(content[currentIndex + 1], idKey)));
-      }
-    } else {
-      if (currentIndex <= 0) {
-        this.set("highlightedValue", this._castInteger(Ember.get(content[0], idKey)));
-      } else if(currentIndex - 1 < content.length) {
-        this.set("highlightedValue", this._castInteger(Ember.get(content[currentIndex - 1], idKey)));
-      }
-    }
-
-    Ember.run.schedule("afterRender", () => {
-      const $highlightedRow = this.$(".select-box-row.is-highlighted");
-
-      if ($highlightedRow.length === 0) { return; }
-
-      const $collection = this.$(".select-box-collection");
-      const rowOffset = $highlightedRow.offset();
-      const bodyOffset = $collection.offset();
-      $collection.scrollTop(rowOffset.top - bodyOffset.top);
-    });
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/select-box/select-box-collection.js.es6 b/app/assets/javascripts/discourse/components/select-box/select-box-collection.js.es6
deleted file mode 100644
index 4b5fea95d5b..00000000000
--- a/app/assets/javascripts/discourse/components/select-box/select-box-collection.js.es6
+++ /dev/null
@@ -1,9 +0,0 @@
-export default Ember.Component.extend({
-  classNames: "select-box-collection",
-
-  actions: {
-    onClearSelection() {
-      this.sendAction("onClearSelection");
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/select-box/select-box-filter.js.es6 b/app/assets/javascripts/discourse/components/select-box/select-box-filter.js.es6
deleted file mode 100644
index 50c8474e5b4..00000000000
--- a/app/assets/javascripts/discourse/components/select-box/select-box-filter.js.es6
+++ /dev/null
@@ -1,5 +0,0 @@
-export default Ember.Component.extend({
-  classNames: "select-box-filter",
-
-  classNameBindings: ["focused:is-focused"]
-});
diff --git a/app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6 b/app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6
deleted file mode 100644
index 033af31237f..00000000000
--- a/app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6
+++ /dev/null
@@ -1,24 +0,0 @@
-export default Ember.Component.extend({
-  classNames: "select-box-header",
-
-  classNameBindings: ["focused:is-focused"],
-
-  didReceiveAttrs() {
-    this._super();
-
-    this._setCaretIcon();
-  },
-
-  click(event) {
-    this.sendAction("onToggle");
-    event.stopPropagation();
-  },
-
-  _setCaretIcon() {
-    if(this.get("expanded")) {
-      this.set("caretIcon", this.get("caretUpIcon"));
-    } else {
-      this.set("caretIcon", this.get("caretDownIcon"));
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6 b/app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6
deleted file mode 100644
index 247b95f5735..00000000000
--- a/app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6
+++ /dev/null
@@ -1,47 +0,0 @@
-import computed from 'ember-addons/ember-computed-decorators';
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-export default Ember.Component.extend({
-  layoutName: "components/select-box/select-box-row",
-
-  classNames: "select-box-row",
-
-  tagName: "li",
-
-  attributeBindings: ["title", "id:data-id"],
-
-  classNameBindings: ["isHighlighted:is-highlighted", "isSelected:is-selected"],
-
-  @computed("titleForRow")
-  title(titleForRow) { return titleForRow(this); },
-
-  @computed("idForRow")
-  id(idForRow) { return idForRow(this); },
-
-  @computed("templateForRow")
-  template(templateForRow) { return templateForRow(this); },
-
-  @computed("shouldHighlightRow", "highlightedValue")
-  isHighlighted(shouldHighlightRow) { return shouldHighlightRow(this); },
-
-  @computed("shouldSelectRow", "value")
-  isSelected(shouldSelectRow) { return shouldSelectRow(this); },
-
-  icon() {
-    if (this.get("content.icon")) {
-      const iconName = this.get("content.icon");
-      const iconClass = this.get("content.iconClass");
-      return iconHTML(iconName, { class: iconClass });
-    }
-
-    return null;
-  },
-
-  mouseEnter() {
-    this.sendAction("onHover", this.get("content"));
-  },
-
-  click() {
-    this.sendAction("onSelect", this.get("content"));
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6
deleted file mode 100644
index 267c40d3eed..00000000000
--- a/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6
+++ /dev/null
@@ -1,24 +0,0 @@
-import NotificationOptionsComponent from "discourse/components/notifications-button";
-import computed from "ember-addons/ember-computed-decorators";
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-export default NotificationOptionsComponent.extend({
-  classNames: ["tag-notifications-button"],
-
-  i18nPrefix: "tagging.notifications",
-
-  @computed("value")
-  icon() {
-    return `${this._super()}${iconHTML("caret-down")}`.htmlSafe();
-  },
-
-  generatedHeadertext: null,
-
-  actions: {
-    onSelectRow(content) {
-      this._super(content);
-
-      this.sendAction("action", this.get("value"));
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6 b/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6
deleted file mode 100644
index 2395e43c786..00000000000
--- a/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6
+++ /dev/null
@@ -1,78 +0,0 @@
-import { observes } from 'ember-addons/ember-computed-decorators';
-import SelectBoxComponent from "discourse/components/select-box";
-
-export default SelectBoxComponent.extend({
-  textKey: "name",
-
-  headerText: I18n.t("topic.controls"),
-
-  dynamicHeaderText: false,
-
-  collectionHeight: 300,
-
-  init() {
-    this._super();
-
-    this._createContent();
-  },
-
-  _createContent() {
-    const content = [];
-    const topic = this.get('topic');
-    const details = topic.get('details');
-
-    if (details.get('can_invite_to')) {
-      content.push({ id: 'invite', icon: 'users', name: I18n.t('topic.invite_reply.title') });
-    }
-
-    if (topic.get('bookmarked')) {
-      content.push({ id: 'bookmark', icon: 'bookmark', name: I18n.t('bookmarked.clear_bookmarks') });
-    } else {
-      content.push({ id: 'bookmark', icon: 'bookmark', name: I18n.t('bookmarked.title') });
-    }
-
-    content.push({ id: 'share', icon: 'link', name: I18n.t('topic.share.title') });
-
-    if (details.get('can_flag_topic')) {
-      content.push({ id: 'flag', icon: 'flag', name: I18n.t('topic.flag_topic.title') });
-    }
-
-    this.set('content', content);
-  },
-
-  @observes('value')
-  _valueChanged() {
-    this._super();
-
-    const value = this.get('value');
-    const topic = this.get('topic');
-
-    // In case it's not a valid topic
-    if (!topic.get('id')) {
-      return;
-    }
-
-    const refresh = () => {
-      this._createContent();
-      this.set('value', null);
-    };
-
-    switch(value) {
-      case 'invite':
-        this.attrs.showInvite();
-        refresh();
-        break;
-      case 'bookmark':
-        topic.toggleBookmark().then(() => refresh());
-        break;
-      case 'share':
-        this.appEvents.trigger('share:url', topic.get('shareUrl'), $('#topic-footer-buttons'));
-        refresh();
-        break;
-      case 'flag':
-        this.attrs.showFlagTopic();
-        refresh();
-        break;
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6
deleted file mode 100644
index c174495ba75..00000000000
--- a/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6
+++ /dev/null
@@ -1,9 +0,0 @@
-export default Ember.Component.extend({
-  layoutName: "components/topic-notifications-button",
-
-  classNames: ["topic-notifications-button"],
-
-  showFullTitle: true,
-
-  appendReason: true,
-});
diff --git a/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6 b/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6
deleted file mode 100644
index 03b4a175343..00000000000
--- a/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6
+++ /dev/null
@@ -1,52 +0,0 @@
-import NotificationOptionsComponent from "discourse/components/notifications-button";
-import { on } from "ember-addons/ember-computed-decorators";
-import computed from "ember-addons/ember-computed-decorators";
-import { topicLevels, buttonDetails } from "discourse/lib/notification-levels";
-
-export default NotificationOptionsComponent.extend({
-  classNames: ["topic-notifications-options"],
-
-  content: topicLevels,
-
-  i18nPrefix: "topic.notifications",
-
-  value: Ember.computed.alias("topic.details.notification_level"),
-
-  @on("didInsertElement")
-  _bindGlobalLevelChanged() {
-    this.appEvents.on("topic-notifications-button:changed", (msg) => {
-      if (msg.type === "notification") {
-        if (this.get("value") !== msg.id) {
-          this.get("topic.details").updateNotifications(msg.id);
-        }
-      }
-    });
-  },
-
-  @on("willDestroyElement")
-  _unbindGlobalLevelChanged() {
-    this.appEvents.off("topic-notifications-button:changed");
-  },
-
-  @computed("value", "showFullTitle")
-  generatedHeadertext(value, showFullTitle) {
-    if (showFullTitle) {
-      const details = buttonDetails(value);
-      return I18n.t(`topic.notifications.${details.key}.title`);
-    } else {
-      return null;
-    }
-  },
-
-  actions: {
-    onSelectRow(content) {
-      const notificationLevelId = Ember.get(content, this.get("idKey"));
-
-      if (notificationLevelId !== this.get("value")) {
-        this.get("topic.details").updateNotifications(notificationLevelId);
-      }
-
-      this._super(content);
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
index 43c70615f01..42777ed4f1e 100644
--- a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
+++ b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
@@ -147,7 +147,7 @@ function positioningWorkaround($fixedElement) {
 
     fixedElement.style.top = '0px';
 
-    composingTopic = $('#reply-control .category-select-box').length > 0;
+    composingTopic = $('#reply-control .category-chooser').length > 0;
 
     const height = calcHeight(composingTopic);
     fixedElement.style.height = height + "px";
diff --git a/app/assets/javascripts/discourse/templates/components/badge-title.hbs b/app/assets/javascripts/discourse/templates/components/badge-title.hbs
index f212e7c7f0e..8101829c4d1 100644
--- a/app/assets/javascripts/discourse/templates/components/badge-title.hbs
+++ b/app/assets/javascripts/discourse/templates/components/badge-title.hbs
@@ -10,7 +10,7 @@
     <div class="control-group">
       <label class="control-label"></label>
       <div class="controls">
-        {{combo-box valueAttribute="id" value=selectedUserBadgeId nameProperty="badge.name" content=selectableUserBadges}}
+        {{combo-box value=selectedUserBadgeId nameProperty="badge.name" content=selectableUserBadges}}
       </div>
     </div>
 
diff --git a/app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs b/app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs
deleted file mode 100644
index be525a9fd71..00000000000
--- a/app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<button
-  class="btn {{if text 'btn-icon-text' 'no-text btn-icon'}}"
-  aria-label="{{selectedTitle}}"
-  type="button"
-  title="{{selectedTitle}}">
-
-  {{{icon}}}
-
-  {{#if text}}
-    <span class="d-button-label">{{{text}}}</span>
-  {{/if}}
-</button>
diff --git a/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs b/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
index 2e0918becc3..c988d538694 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
@@ -19,8 +19,8 @@
         {{/each}}
       {{else}}
         <label>{{i18n 'category.parent'}}</label>
-        {{category-select-box
-          clearSelectionLabel="category.none"
+        {{category-chooser
+          none="category.none"
           value=category.parent_category_id
           categories=parentCategories
           allowUncategorized=false}}
diff --git a/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs b/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs
index 05f70e3b27a..f209d17af2b 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs
@@ -61,11 +61,13 @@
 <section class="field">
   <label>
     {{i18n "category.sort_order"}}
-    {{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
-    {{#unless isDefaultSortOrder}}
-      {{combo-box valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
-    {{/unless}}
   </label>
+  <div class="controls">
+  {{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
+  {{#unless isDefaultSortOrder}}
+    {{combo-box valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
+  {{/unless}}
+    </div>
 </section>
 
 <section class="field num-featured-topics-fields">
diff --git a/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs b/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
index e2310800812..c7929241b80 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
@@ -13,7 +13,7 @@
     {{else if publishToCategory}}
       <div class="control-group">
         <label>{{i18n 'topic.topic_status_update.publish_to'}}</label>
-        {{category-select-box
+        {{category-chooser
           value=topicTimer.category_id
           excludeCategoryId=excludeCategoryId}}
       </div>
diff --git a/app/assets/javascripts/discourse/templates/components/future-date-input.hbs b/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
index 62dd9782810..2bf53bee820 100644
--- a/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
+++ b/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
@@ -1,16 +1,13 @@
 <div class="future-date-input">
   <div class="control-group">
     <label>{{displayLabel}}</label>
-
     {{future-date-input-selector
-        valueAttribute="id"
         minimumResultsForSearch=-1
         statusType=statusType
         value=selection
         input=input
         includeWeekend=includeWeekend
         includeForever=includeForever
-        width="50%"
         none="topic.auto_update_input.none"}}
   </div>
 
diff --git a/app/assets/javascripts/discourse/templates/components/queued-post.hbs b/app/assets/javascripts/discourse/templates/components/queued-post.hbs
index 172275ce093..e0bbe42ac7f 100644
--- a/app/assets/javascripts/discourse/templates/components/queued-post.hbs
+++ b/app/assets/javascripts/discourse/templates/components/queued-post.hbs
@@ -24,7 +24,7 @@
       <span class="edit-title">
         {{text-field value=buffered.title maxlength=siteSettings.max_topic_title_length}}
       </span>
-      {{category-select-box value=buffered.category_id}}
+      {{category-chooser value=buffered.category_id}}
     {{else}}
       <span class='post-title'>
         {{i18n "queue.topic"}}
diff --git a/app/assets/javascripts/discourse/templates/components/select-box.hbs b/app/assets/javascripts/discourse/templates/components/select-box.hbs
deleted file mode 100644
index 129be626394..00000000000
--- a/app/assets/javascripts/discourse/templates/components/select-box.hbs
+++ /dev/null
@@ -1,55 +0,0 @@
-<input
-  class="select-box-offscreen"
-  type="text"
-  aria-haspopup="true"
-  role="button"
-  aria-labelledby="select-box-input-{{componentId}}"
-  tabindex={{tabindex}}
-/>
-
-{{component selectBoxHeaderComponent
-  text=generatedHeadertext
-  selectedTitle=selectedTitle
-  focused=focused
-  caretUpIcon=caretUpIcon
-  caretDownIcon=caretDownIcon
-  onToggle=(action "onToggle")
-  icon=icon
-  expanded=expanded
-  value=value
-}}
-
-<div class="select-box-body">
-  {{#if renderBody}}
-    {{#if filterable}}
-      {{component selectBoxFilterComponent
-        onFilterChange=(action "onFilterChange")
-        icon=filterIcon
-        focused=filterFocused
-        placeholder=filterPlaceholder
-        tabindex=tabindex
-      }}
-    {{/if}}
-
-    {{component selectBoxCollectionComponent
-      clearSelectionLabel=clearSelectionLabel
-      filteredContent=filteredContent
-      selectBoxRowComponent=selectBoxRowComponent
-      templateForRow=templateForRow
-      shouldHighlightRow=shouldHighlightRow
-      shouldSelectRow=shouldSelectRow
-      titleForRow=titleForRow
-      idForRow=idForRow
-      onSelectRow=(action "onSelectRow")
-      onHoverRow=(action "onHoverRow")
-      onClearSelection=(action "onClearSelection")
-      noContentLabel=noContentLabel
-      highlightedValue=highlightedValue
-      value=value
-    }}
-  {{/if}}
-</div>
-
-{{#if wrapper}}
-  <div class="select-box-wrapper"></div>
-{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs
deleted file mode 100644
index f6adcdf1acc..00000000000
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs
+++ /dev/null
@@ -1,28 +0,0 @@
-<ul class="collection">
-  {{#if clearSelectionLabel}}
-    <li {{action "onClearSelection" on="click"}} class="select-box-row clear-selection">
-      {{i18n clearSelectionLabel}}
-    </li>
-  {{/if}}
-
-  {{#each filteredContent as |content|}}
-    {{component selectBoxRowComponent
-      content=content
-      templateForRow=templateForRow
-      idForRow=idForRow
-      titleForRow=titleForRow
-      shouldHighlightRow=shouldHighlightRow
-      shouldSelectRow=shouldSelectRow
-      highlightedValue=highlightedValue
-      onSelect=onSelectRow
-      onHover=onHoverRow
-      value=value
-    }}
-  {{else}}
-    {{#if noContentLabel}}
-      <li class="select-box-row no-content">
-        {{noContentLabel}}
-      </li>
-    {{/if}}
-  {{/each}}
-</ul>
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs
deleted file mode 100644
index b07be580176..00000000000
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-{{#if icon}}
-  {{d-icon icon class="icon"}}
-{{/if}}
-
-<span class="current-selection" title={{selectedTitle}}>
-  {{text}}
-</span>
-
-{{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs
deleted file mode 100644
index fc329967e56..00000000000
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{{template}}}
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index c9e32dceaf8..98ad6257f1e 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -72,7 +72,7 @@
 
                   {{#if model.showCategoryChooser}}
                     <div class="category-input">
-                      {{category-select-box value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
+                      {{category-chooser value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
                       {{popup-input-tip validation=categoryValidation}}
                     </div>
                     {{#if model.archetype.hasOptions}}
diff --git a/app/assets/javascripts/discourse/templates/full-page-search.hbs b/app/assets/javascripts/discourse/templates/full-page-search.hbs
index d138f8ea438..1ce6a3f4c82 100644
--- a/app/assets/javascripts/discourse/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/templates/full-page-search.hbs
@@ -57,7 +57,7 @@
         <span class='desc'>
           {{i18n "search.sort_by"}}
         </span>
-        {{combo-box value=sortOrder content=sortOrders castInteger="true"}}
+        {{combo-box value=sortOrder content=sortOrders castInteger=true}}
       </div>
     </div>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs b/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs
index fd12a91835d..cc96a49d6f0 100644
--- a/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs
@@ -1,6 +1,6 @@
 <p>{{i18n "topics.bulk.choose_new_category"}}</p>
 
-<p>{{category-select-box value=newCategoryId}}</p>
+<p>{{category-chooser value=newCategoryId}}</p>
 
 {{#conditional-loading-spinner condition=loading}}
   {{d-button action="changeCategory" label="topics.bulk.change_category"}}
diff --git a/app/assets/javascripts/discourse/templates/modal/split-topic.hbs b/app/assets/javascripts/discourse/templates/modal/split-topic.hbs
index 84ffc1d00cd..219584343fd 100644
--- a/app/assets/javascripts/discourse/templates/modal/split-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/split-topic.hbs
@@ -6,7 +6,7 @@
     {{text-field value=topicName placeholderKey="composer.title_placeholder" elementId='split-topic-name'}}
 
     <label>{{i18n 'categories.category'}}</label>
-    {{category-select-box value=categoryId class="small"}}
+    {{category-chooser value=categoryId class="small"}}
   </form>
 {{/d-modal-body}}
 
diff --git a/app/assets/javascripts/discourse/templates/preferences/card-badge.hbs b/app/assets/javascripts/discourse/templates/preferences/card-badge.hbs
index d23c2682a4c..12f06094ea7 100644
--- a/app/assets/javascripts/discourse/templates/preferences/card-badge.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/card-badge.hbs
@@ -10,7 +10,7 @@
     <div class="control-group">
       <label class="control-label"></label>
       <div class="controls">
-      {{combo-box valueAttribute="id" value=selectedUserBadgeId nameProperty="badge.name" content=selectableUserBadges}}
+        {{combo-box value=selectedUserBadgeId nameProperty="badge.name" content=selectableUserBadges}}
       </div>
     </div>
 
diff --git a/app/assets/javascripts/discourse/templates/preferences/emails.hbs b/app/assets/javascripts/discourse/templates/preferences/emails.hbs
index 72e2f9a18a8..9d5f3b57665 100644
--- a/app/assets/javascripts/discourse/templates/preferences/emails.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/emails.hbs
@@ -2,7 +2,7 @@
   <label class="control-label">{{i18n 'user.email_settings'}}</label>
   <div class='controls controls-dropdown'>
     <label>{{i18n 'user.email_previous_replies.title'}}</label>
-    {{select-box idKey="value" textKey="name" content=previousRepliesOptions value=model.user_option.email_previous_replies}}
+    {{combo-box valueAttribute="value" content=previousRepliesOptions value=model.user_option.email_previous_replies}}
   </div>
   {{preference-checkbox labelKey="user.email_in_reply_to" checked=model.user_option.email_in_reply_to}}
   {{preference-checkbox labelKey="user.email_private_messages" checked=model.user_option.email_private_messages}}
@@ -25,7 +25,7 @@
     {{preference-checkbox labelKey="user.email_digests.title" disabled=model.user_option.mailing_list_mode checked=model.user_option.email_digests}}
     {{#if model.user_option.email_digests}}
       <div class='controls controls-dropdown'>
-        {{select-box idKey="value" filterable=true textKey="name" content=digestFrequencies value=model.user_option.digest_after_minutes}}
+        {{combo-box valueAttribute="value" filterable=true content=digestFrequencies value=model.user_option.digest_after_minutes}}
       </div>
       {{preference-checkbox labelKey="user.include_tl0_in_digests" disabled=model.user_option.mailing_list_mode checked=model.user_option.include_tl0_in_digests}}
     {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/interface.hbs b/app/assets/javascripts/discourse/templates/preferences/interface.hbs
index 4096ef0ad6a..5ea34031491 100644
--- a/app/assets/javascripts/discourse/templates/preferences/interface.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/interface.hbs
@@ -2,7 +2,7 @@
 <div class="control-group theme">
   <label class="control-label">{{i18n 'user.theme'}}</label>
   <div class="controls">
-    {{select-box textKey="name" content=userSelectableThemes value=themeKey}}
+    {{combo-box content=userSelectableThemes value=themeKey}}
   </div>
   <div class="controls">
     {{preference-checkbox labelKey="user.theme_default_on_all_devices" checked=makeThemeDefault}}
@@ -24,7 +24,7 @@
   <div class="control-group pref-locale">
     <label class="control-label">{{i18n 'user.locale.title'}}</label>
     <div class="controls">
-      {{combo-box valueAttribute="value" content=availableLocales value=model.locale none="user.locale.default"}}
+      {{combo-box filterable=true valueAttribute="value" content=availableLocales value=model.locale none="user.locale.default"}}
     </div>
     <div class='instructions'>
       {{i18n 'user.locale.instructions'}}
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index b35d45d2d65..f26c41d6414 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -19,7 +19,7 @@
           {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
           {{#if showCategoryChooser}}
             <br>
-            {{category-select-box class="small" value=buffered.category_id}}
+            {{category-chooser class="small" value=buffered.category_id}}
           {{/if}}
 
           {{#if canEditTags}}
diff --git a/app/assets/javascripts/select-box-kit/components/categories-admin-dropdown.js.es6 b/app/assets/javascripts/select-box-kit/components/categories-admin-dropdown.js.es6
new file mode 100644
index 00000000000..f39d219db68
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/categories-admin-dropdown.js.es6
@@ -0,0 +1,50 @@
+import DropdownSelectBoxComponent from "select-box-kit/components/dropdown-select-box";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import computed from "ember-addons/ember-computed-decorators";
+import { on } from "ember-addons/ember-computed-decorators";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: "categories-admin-dropdown",
+  actionNames: { create: "createCategory", reorder: "reorderCategories" },
+
+  @on("didReceiveAttrs")
+  _setComponentOptions() {
+    this.set("headerComponentOptions", Ember.Object.create({
+      shouldDisplaySelectedName: false,
+      icon: `${iconHTML('bars')}${iconHTML('caret-down')}`.htmlSafe(),
+    }));
+  },
+
+  @computed
+  content() {
+    const items = [
+      {
+        id: "create",
+        name: I18n.t("category.create"),
+        description: I18n.t("category.create_long"),
+        icon: "plus"
+      }
+    ];
+
+    const includeReorder = this.get("siteSettings.fixed_category_positions");
+    if (includeReorder) {
+      items.push({
+        id: "reorder",
+        name: I18n.t("categories.reorder.title"),
+        description: I18n.t("categories.reorder.title_long"),
+        icon: "random"
+      });
+    }
+
+    return items;
+  },
+
+  actions: {
+    onSelect(value) {
+      value = this.defaultOnSelect(value);
+
+      this.sendAction(`actionNames.${value}`);
+      this.set("value", null);
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/category-chooser.js.es6 b/app/assets/javascripts/select-box-kit/components/category-chooser.js.es6
new file mode 100644
index 00000000000..ee6e9b158ab
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/category-chooser.js.es6
@@ -0,0 +1,131 @@
+import ComboBoxComponent from "select-box-kit/components/combo-box";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import { on } from "ember-addons/ember-computed-decorators";
+import computed from "ember-addons/ember-computed-decorators";
+import PermissionType from "discourse/models/permission-type";
+import Category from "discourse/models/category";
+const { get, isNone, isEmpty } = Ember;
+
+export default ComboBoxComponent.extend({
+  classNames: "category-chooser",
+  filterable: true,
+  castInteger: true,
+  allowUncategorized: null,
+
+  filterFunction(computedContent) {
+    const _matchFunction = (filter, text) => {
+      return text.toLowerCase().indexOf(filter) > -1;
+    };
+
+    return (selectBox) => {
+      const filter = selectBox.get("filter").toLowerCase();
+      return _.filter(computedContent, c => {
+        const category = Category.findById(get(c, "value"));
+        const text = get(c, "name");
+        if (category && category.get("parentCategory")) {
+          const categoryName = category.get("parentCategory.name");
+          return _matchFunction(filter, text) || _matchFunction(filter, categoryName);
+        } else {
+          return _matchFunction(filter, text);
+        }
+      });
+    };
+  },
+
+  @computed("rootNone", "rootNoneLabel")
+  none(rootNone, rootNoneLabel) {
+    if (this.siteSettings.allow_uncategorized_topics || this.get("allowUncategorized")) {
+      if (!isNone(rootNone)) {
+        return rootNoneLabel || "category.none";
+      } else {
+        return Category.findUncategorized();
+      }
+    } else {
+      return "category.choose";
+    }
+  },
+
+  @computed
+  templateForRow() {
+    return rowComponent => this._rowContentTemplate(rowComponent.get("content"));
+  },
+
+  @computed
+  templateForNoneRow() {
+    return rowComponent => this._rowContentTemplate(rowComponent.get("content"));
+  },
+
+  @computed("scopedCategoryId", "content.[]")
+  computedContent(scopedCategoryId, categories) {
+    // Always scope to the parent of a category, if present
+    if (scopedCategoryId) {
+      const scopedCat = Category.findById(scopedCategoryId);
+      scopedCategoryId = scopedCat.get("parent_category_id") || scopedCat.get("id");
+    }
+
+    const excludeCategoryId = this.get("excludeCategoryId");
+
+    return categories.filter(c => {
+      const categoryId = get(c, "value");
+      if (scopedCategoryId && categoryId !== scopedCategoryId && get(c, "originalContent.parent_category_id") !== scopedCategoryId) {
+        return false;
+      }
+      if (get(c, 'originalContent.isUncategorizedCategory') || excludeCategoryId === categoryId) {
+        return false;
+      }
+      return get(c, 'originalContent.permission') === PermissionType.FULL;
+    });
+  },
+
+  @on("didRender")
+  _bindComposerResizing() {
+    this.appEvents.on("composer:resized", this, this.applyDirection);
+  },
+
+  @on("willDestroyElement")
+  _unbindComposerResizing() {
+    this.appEvents.off("composer:resized");
+  },
+
+  @computed("site.sortedCategories")
+  content() {
+    const categories =  Discourse.SiteSettings.fixed_category_positions_on_create ?
+                          Category.list() :
+                          Category.listByActivity();
+    return this.formatContents(categories);
+  },
+
+  _rowContentTemplate(content) {
+    let category;
+
+    // If we have no id, but text with the uncategorized name, we can use that badge.
+    if (isEmpty(get(content, "value"))) {
+      const uncat = Category.findUncategorized();
+      if (uncat && uncat.get("name") === get(content, "name")) {
+        category = uncat;
+      }
+    } else {
+      category = Category.findById(parseInt(get(content, "value"), 10));
+    }
+
+    if (!category) return get(content, "name");
+    let result = categoryBadgeHTML(category, {link: false, allowUncategorized: true, hideParent: true});
+    const parentCategoryId = category.get("parent_category_id");
+
+    if (parentCategoryId) {
+      result = `<div class="category-status">${categoryBadgeHTML(Category.findById(parentCategoryId), {link: false})}&nbsp;${result}`;
+    } else {
+      result = `<div class="category-status">${result}`;
+    }
+
+    result += ` <span class="topic-count">&times; ${category.get("topic_count")}</span></div>`;
+
+    const description = category.get("description");
+    // TODO wtf how can this be null?;
+    if (description && description !== "null") {
+      result += `<div class="category-desc">${description.substr(0, 200)}${description.length > 200 ? '&hellip;' : ''}</div>`;
+    }
+
+    return result;
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/category-notifications-button.js.es6 b/app/assets/javascripts/select-box-kit/components/category-notifications-button.js.es6
new file mode 100644
index 00000000000..24e5b312821
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/category-notifications-button.js.es6
@@ -0,0 +1,17 @@
+import NotificationOptionsComponent from "select-box-kit/components/notifications-button";
+
+export default NotificationOptionsComponent.extend({
+  classNames: "category-notifications-button",
+  isHidden: Ember.computed.or("category.deleted", "site.isMobileDevice"),
+  i18nPrefix: "category.notifications",
+  value: Ember.computed.alias("category.notification_level"),
+  headerComponent: "category-notifications-button/category-notifications-button-header",
+
+  actions: {
+    onSelect(value) {
+      value = this.defaultOnSelect(value);
+
+      this.get("category").setNotification(value);
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/category-notifications-button/category-notifications-button-header.js.es6 b/app/assets/javascripts/select-box-kit/components/category-notifications-button/category-notifications-button-header.js.es6
new file mode 100644
index 00000000000..8c5ef82fe39
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/category-notifications-button/category-notifications-button-header.js.es6
@@ -0,0 +1,13 @@
+import NotificationButtonHeader from "select-box-kit/components/notifications-button/notifications-button-header";
+import computed from "ember-addons/ember-computed-decorators";
+import { iconHTML } from 'discourse-common/lib/icon-library';
+
+export default NotificationButtonHeader.extend({
+  classNames: "category-notifications-button-header",
+  shouldDisplaySelectedName: false,
+
+  @computed("_selectedDetails.icon", "_selectedDetails.key")
+  icon() {
+    return `${this._super()}${iconHTML("caret-down")}`.htmlSafe();
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/combo-box.js.es6 b/app/assets/javascripts/select-box-kit/components/combo-box.js.es6
new file mode 100644
index 00000000000..60b11aa5155
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/combo-box.js.es6
@@ -0,0 +1,21 @@
+import SelectBoxKitComponent from "select-box-kit/components/select-box-kit";
+import { on } from "ember-addons/ember-computed-decorators";
+
+export default SelectBoxKitComponent.extend({
+  classNames: "combobox combo-box",
+  autoFilterable: true,
+  headerComponent: "combo-box/combo-box-header",
+
+  caretUpIcon: "caret-up",
+  caretDownIcon: "caret-down",
+  clearable: false,
+
+  @on("didReceiveAttrs")
+  _setComponentOptions() {
+    this.set("headerComponentOptions", Ember.Object.create({
+      caretUpIcon: this.get("caretUpIcon"),
+      caretDownIcon: this.get("caretDownIcon"),
+      clearable: this.get("clearable"),
+    }));
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/combo-box/combo-box-header.js.es6 b/app/assets/javascripts/select-box-kit/components/combo-box/combo-box-header.js.es6
new file mode 100644
index 00000000000..996ca1f4729
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/combo-box/combo-box-header.js.es6
@@ -0,0 +1,39 @@
+import SelectBoxKitHeaderComponent from "select-box-kit/components/select-box-kit/select-box-kit-header";
+import { default as computed } from "ember-addons/ember-computed-decorators";
+
+export default SelectBoxKitHeaderComponent.extend({
+  layoutName: "select-box-kit/templates/components/combo-box/combo-box-header",
+  classNames: "combo-box-header",
+
+  clearable: Ember.computed.alias("options.clearable"),
+  caretUpIcon: Ember.computed.alias("options.caretUpIcon"),
+  caretDownIcon: Ember.computed.alias("options.caretDownIcon"),
+  selectedName: Ember.computed.alias("options.selectedName"),
+
+  @computed("isExpanded", "caretUpIcon", "caretDownIcon")
+  caretIcon(isExpanded, caretUpIcon, caretDownIcon) {
+    return isExpanded === true ? caretUpIcon : caretDownIcon;
+  },
+
+  @computed("clearable", "selectedContent")
+  shouldDisplayClearableButton(clearable, selectedContent) {
+    return clearable === true && !Ember.isEmpty(selectedContent);
+  },
+
+  @computed("options.selectedName", "selectedContent.firstObject.name", "none.name")
+  selectedName(selectedName, name, noneName) {
+    if (Ember.isPresent(selectedName)) {
+      return selectedName;
+    }
+
+    if (Ember.isNone(name)) {
+      if (Ember.isNone(noneName)) {
+        return this._super();
+      } else {
+        return noneName;
+      }
+    } else {
+      return name;
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/dropdown-select-box.js.es6 b/app/assets/javascripts/select-box-kit/components/dropdown-select-box.js.es6
new file mode 100644
index 00000000000..8e2789aa1db
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/dropdown-select-box.js.es6
@@ -0,0 +1,24 @@
+import SelectBoxKitComponent from "select-box-kit/components/select-box-kit";
+
+export default SelectBoxKitComponent.extend({
+  classNames: "dropdown-select-box",
+  verticalOffset: 3,
+  fullWidthOnMobile: true,
+  filterable: false,
+  autoFilterable: false,
+  headerComponent: "dropdown-select-box/dropdown-select-box-header",
+  rowComponent: "dropdown-select-box/dropdown-select-box-row",
+
+  clickOutside() {
+    this.close();
+  },
+
+  actions: {
+    onSelect(value) {
+      value = this.defaultOnSelect(value);
+      this.set("value", value);
+
+      this.blur();
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6 b/app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6
new file mode 100644
index 00000000000..53dc082bdcc
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6
@@ -0,0 +1,6 @@
+import SelectBoxKitHeaderComponent from "select-box-kit/components/select-box-kit/select-box-kit-header";
+
+export default SelectBoxKitHeaderComponent.extend({
+  layoutName: "select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-header",
+  classNames: "dropdown-select-box-header",
+});
diff --git a/app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6 b/app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6
new file mode 100644
index 00000000000..38ce2a7aa03
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6
@@ -0,0 +1,9 @@
+import SelectBoxKitRowComponent from "select-box-kit/components/select-box-kit/select-box-kit-row";
+
+export default SelectBoxKitRowComponent.extend({
+  layoutName: "select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-row",
+  classNames: "dropdown-select-box-row",
+
+  name: Ember.computed.alias("content.name"),
+  description: Ember.computed.alias("content.originalContent.description")
+});
diff --git a/app/assets/javascripts/select-box-kit/components/future-date-input-selector.js.es6 b/app/assets/javascripts/select-box-kit/components/future-date-input-selector.js.es6
new file mode 100644
index 00000000000..8c291abc099
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/future-date-input-selector.js.es6
@@ -0,0 +1,118 @@
+import { default as computed, observes } from "ember-addons/ember-computed-decorators";
+import ComboBoxComponent from "select-box-kit/components/combo-box";
+import { CLOSE_STATUS_TYPE } from "discourse/controllers/edit-topic-timer";
+import DatetimeMixin from "select-box-kit/components/future-date-input-selector/mixin";
+
+export const LATER_TODAY = "later_today";
+export const TOMORROW = "tomorrow";
+export const LATER_THIS_WEEK = "later_this_week";
+export const THIS_WEEKEND = "this_weekend";
+export const NEXT_WEEK = "next_week";
+export const TWO_WEEKS = "two_weeks";
+export const NEXT_MONTH = "next_month";
+export const FOREVER = "forever";
+
+export const PICK_DATE_AND_TIME = "pick_date_and_time";
+export const SET_BASED_ON_LAST_POST = "set_based_on_last_post";
+
+export const FORMAT = "YYYY-MM-DD HH:mm";
+
+export default ComboBoxComponent.extend(DatetimeMixin, {
+  classNames: ["future-date-input-selector"],
+  isCustom: Ember.computed.equal("value", PICK_DATE_AND_TIME),
+  clearable: true,
+  rowComponent: "future-date-input-selector/future-date-input-selector-row",
+  headerComponent: "future-date-input-selector/future-date-input-selector-header",
+
+  @computed
+  content() {
+    const selections = [];
+    const now = moment();
+    const canScheduleToday = (24 - now.hour()) > 6;
+    const day = now.day();
+
+    if (canScheduleToday) {
+      selections.push({
+        id: LATER_TODAY,
+        name: I18n.t("topic.auto_update_input.later_today")
+      });
+    }
+
+    selections.push({
+      id: TOMORROW,
+      name: I18n.t("topic.auto_update_input.tomorrow")
+    });
+
+    if (!canScheduleToday && day < 4) {
+      selections.push({
+        id: LATER_THIS_WEEK,
+        name: I18n.t("topic.auto_update_input.later_this_week")
+      });
+    }
+
+    if (day < 5 && this.get("includeWeekend")) {
+      selections.push({
+        id: THIS_WEEKEND,
+        name: I18n.t("topic.auto_update_input.this_weekend")
+      });
+    }
+
+    if (day !== 7)  {
+      selections.push({
+        id: NEXT_WEEK,
+        name: I18n.t("topic.auto_update_input.next_week")
+      });
+    }
+
+    selections.push({
+      id: TWO_WEEKS,
+      name: I18n.t("topic.auto_update_input.two_weeks")
+    });
+
+    if (moment().endOf("month").date() !== now.date()) {
+      selections.push({
+        id: NEXT_MONTH,
+        name: I18n.t("topic.auto_update_input.next_month")
+      });
+    }
+
+    if (this.get("includeForever")) {
+      selections.push({
+        id: FOREVER,
+        name: I18n.t("topic.auto_update_input.forever")
+      });
+    }
+
+    selections.push({
+      id: PICK_DATE_AND_TIME,
+      name: I18n.t("topic.auto_update_input.pick_date_and_time")
+    });
+
+    if (this.get("statusType") === CLOSE_STATUS_TYPE) {
+      selections.push({
+        id: SET_BASED_ON_LAST_POST,
+        name: I18n.t("topic.auto_update_input.set_based_on_last_post")
+      });
+    }
+
+    return selections;
+  },
+
+  @observes("value")
+  _updateInput() {
+    if (this.get("isCustom")) return;
+    let input = null;
+    const { time } = this.get("updateAt");
+
+    if (time && !Ember.isEmpty(this.get("value"))) {
+      input = time.format(FORMAT);
+    }
+
+    this.set("input", input);
+  },
+
+  @computed("value")
+  updateAt(value) {
+    return this._updateAt(value);
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-header.js.es6 b/app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-header.js.es6
new file mode 100644
index 00000000000..e62e1276251
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-header.js.es6
@@ -0,0 +1,14 @@
+import ComboBoxHeaderComponent from "select-box-kit/components/combo-box/combo-box-header";
+import DatetimeMixin from "select-box-kit/components/future-date-input-selector/mixin";
+import computed from "ember-addons/ember-computed-decorators";
+
+export default ComboBoxHeaderComponent.extend(DatetimeMixin, {
+  layoutName: "select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-header",
+  classNames: "future-date-input-selector-header",
+
+  @computed("selectedContent.firstObject.value")
+  datetime(value) { return this._computeDatetimeForValue(value); },
+
+  @computed("selectedContent.firstObject.value")
+  icon(value) { return this._computeIconForValue(value); }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6 b/app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6
new file mode 100644
index 00000000000..be35212a761
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6
@@ -0,0 +1,14 @@
+import SelectBoxKitRowComponent from "select-box-kit/components/select-box-kit/select-box-kit-row";
+import DatetimeMixin from "select-box-kit/components/future-date-input-selector/mixin";
+import computed from "ember-addons/ember-computed-decorators";
+
+export default SelectBoxKitRowComponent.extend(DatetimeMixin, {
+  layoutName: "select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-row",
+  classNames: "future-date-input-selector-row",
+
+  @computed("content.value")
+  datetime(value) { return this._computeDatetimeForValue(value); },
+
+  @computed("content.value")
+  icon(value) { return this._computeIconForValue(value); }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/future-date-input-selector/mixin.js.es6 b/app/assets/javascripts/select-box-kit/components/future-date-input-selector/mixin.js.es6
new file mode 100644
index 00000000000..2046b0c4cfd
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/future-date-input-selector/mixin.js.es6
@@ -0,0 +1,101 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
+import { CLOSE_STATUS_TYPE } from 'discourse/controllers/edit-topic-timer';
+import {
+  LATER_TODAY,
+  TOMORROW,
+  LATER_THIS_WEEK,
+  THIS_WEEKEND,
+  NEXT_WEEK,
+  TWO_WEEKS,
+  NEXT_MONTH,
+  FOREVER,
+  PICK_DATE_AND_TIME,
+  SET_BASED_ON_LAST_POST,
+} from "select-box-kit/components/future-date-input-selector";
+
+export default Ember.Mixin.create({
+  _computeIconForValue(value) {
+    let {icon} = this._updateAt(value);
+
+    if (icon) {
+      return icon.split(",").map(i => iconHTML(i)).join(" ");
+    }
+
+    return null;
+  },
+
+  _computeDatetimeForValue(value) {
+    if (Ember.isNone(value)) {
+      return null;
+    }
+
+    let {time} = this._updateAt(value);
+
+    if (time) {
+      if (value === LATER_TODAY) {
+        time = time.format("h a");
+      } else if (value === NEXT_MONTH || value === TWO_WEEKS) {
+        time = time.format("MMM D");
+      } else {
+        time = time.format("ddd, h a");
+      }
+    }
+
+    if (time && value !== FOREVER) {
+      return time;
+    }
+
+    return null;
+  },
+
+  _updateAt(selection) {
+    let time = moment();
+    let icon;
+    const timeOfDay = this.get('statusType') !== CLOSE_STATUS_TYPE ? 8 : 18;
+
+    switch(selection) {
+      case LATER_TODAY:
+        time = time.hour(18).minute(0);
+        icon = 'moon-o';
+        break;
+      case TOMORROW:
+        time = time.add(1, 'day').hour(timeOfDay).minute(0);
+        icon = 'sun-o';
+        break;
+      case LATER_THIS_WEEK:
+        time = time.add(2, 'day').hour(timeOfDay).minute(0);
+        icon = 'briefcase';
+        break;
+      case THIS_WEEKEND:
+        time = time.day(6).hour(timeOfDay).minute(0);
+        icon = 'bed';
+        break;
+      case NEXT_WEEK:
+        time = time.add(1, 'week').day(1).hour(timeOfDay).minute(0);
+        icon = 'briefcase';
+        break;
+      case TWO_WEEKS:
+        time = time.add(2, 'week').hour(timeOfDay).minute(0);
+        icon = 'briefcase';
+        break;
+      case NEXT_MONTH:
+        time = time.add(1, 'month').startOf('month').hour(timeOfDay).minute(0);
+        icon = 'briefcase';
+        break;
+      case FOREVER:
+        time = time.add(1000, 'year').hour(timeOfDay).minute(0);
+        icon = 'gavel';
+        break;
+      case PICK_DATE_AND_TIME:
+        time = null;
+        icon = 'calendar-plus-o';
+        break;
+      case SET_BASED_ON_LAST_POST:
+        time = null;
+        icon = 'clock-o';
+        break;
+    }
+
+    return { time, icon };
+  },
+});
diff --git a/app/assets/javascripts/select-box-kit/components/multi-combo-box.js.es6 b/app/assets/javascripts/select-box-kit/components/multi-combo-box.js.es6
new file mode 100644
index 00000000000..6ce70b4e8e2
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/multi-combo-box.js.es6
@@ -0,0 +1,99 @@
+// Experimental
+import SelectBoxKitComponent from "select-box-kit/components/select-box-kit";
+import computed from "ember-addons/ember-computed-decorators";
+const { get, isNone } = Ember;
+
+export default SelectBoxKitComponent.extend({
+  classNames: "multi-combobox",
+  headerComponent: "multi-combo-box/multi-combo-box-header",
+  filterComponent: null,
+  headerText: "select_box.default_header_text",
+  value: [],
+  allowAny: true,
+
+  @computed("filter")
+  templateForCreateRow() {
+    return (rowComponent) => {
+      return `Create: ${rowComponent.get("content.name")}`;
+    };
+  },
+
+  keyDown(event) {
+    const keyCode = event.keyCode || event.which;
+    const $filterInput = this.$filterInput();
+
+    if (keyCode === 8) {
+      let $lastSelectedValue = $(this.$(".choices .selected-name").last());
+
+      if ($lastSelectedValue.is(":focus") || $(document.activeElement).is($lastSelectedValue)) {
+        this.send("onDeselect", $lastSelectedValue.data("value"));
+        $filterInput.focus();
+        return;
+      }
+
+      if ($filterInput.val() === "") {
+        if ($filterInput.is(":focus")) {
+          if ($lastSelectedValue.length > 0) {
+            $lastSelectedValue.focus();
+          }
+        } else {
+          if ($lastSelectedValue.length > 0) {
+            $lastSelectedValue.focus();
+          } else {
+            $filterInput.focus();
+          }
+        }
+      }
+    } else {
+      $filterInput.focus();
+      this._super(event);
+    }
+  },
+
+  @computed("none")
+  computedNone(none) {
+    if (!isNone(none)) {
+      this.set("none", { name: I18n.t(none), value: "" });
+    }
+  },
+
+  @computed("value.[]")
+  computedValue(value) {
+    return value.map(v => this._castInteger(v));
+  },
+
+  @computed("computedValue.[]", "computedContent.[]")
+  selectedContent(computedValue, computedContent) {
+    const contents = [];
+    computedValue.forEach(cv => {
+      contents.push(computedContent.findBy("value", cv));
+    });
+    return contents;
+  },
+
+  filterFunction(content) {
+    return (selectBox, computedValue) => {
+      const filter = selectBox.get("filter").toLowerCase();
+      return _.filter(content, c => {
+        return !computedValue.includes(get(c, "value")) &&
+          get(c, "name").toLowerCase().indexOf(filter) > -1;
+      });
+    };
+  },
+
+  actions: {
+    onClearSelection() {
+      this.send("onSelect", []);
+    },
+
+    onSelect(value) {
+      this.setProperties({ filter: "", highlightedValue: null });
+      this.get("value").pushObject(value);
+    },
+
+    onDeselect(value) {
+      this.defaultOnDeselect(value);
+      this.get("value").removeObject(value);
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/multi-combo-box/multi-combo-box-header.js.es6 b/app/assets/javascripts/select-box-kit/components/multi-combo-box/multi-combo-box-header.js.es6
new file mode 100644
index 00000000000..0b5f302e7b1
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/multi-combo-box/multi-combo-box-header.js.es6
@@ -0,0 +1,40 @@
+import { on } from "ember-addons/ember-computed-decorators";
+import computed from "ember-addons/ember-computed-decorators";
+import SelectBoxKitHeaderComponent from "select-box-kit/components/select-box-kit/select-box-kit-header";
+
+export default SelectBoxKitHeaderComponent.extend({
+  attributeBindings: ["names:data-name"],
+  classNames: "multi-combobox-header",
+  layoutName: "select-box-kit/templates/components/multi-combo-box/multi-combo-box-header",
+
+  @computed("filter", "selectedContent.[]", "isFocused", "selectBoxIsExpanded")
+  shouldDisplayFilterPlaceholder(filter, selectedContent, isFocused) {
+    if (Ember.isEmpty(selectedContent)) {
+      if (filter.length > 0) { return false; }
+      if (isFocused === true) { return false; }
+      return true;
+    }
+
+    return false;
+  },
+
+  @on("didRender")
+  _positionFilter() {
+    this.$(".filter").width(0);
+
+    const leftHeaderOffset = this.$().offset().left;
+    const leftFilterOffset = this.$(".filter").offset().left;
+    const offset = leftFilterOffset - leftHeaderOffset;
+    const width = this.$().outerWidth(false);
+    const availableSpace = width - offset;
+
+    // TODO: avoid magic number 8
+    // TODO: make sure the filter doesn’t end up being very small
+    this.$(".filter").width(availableSpace - 8);
+  },
+
+  @computed("selectedContent.[]")
+  names(selectedContent) {
+    return selectedContent.map(sc => sc.name).join(",");
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/notifications-button.js.es6 b/app/assets/javascripts/select-box-kit/components/notifications-button.js.es6
new file mode 100644
index 00000000000..88a1e71e982
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/notifications-button.js.es6
@@ -0,0 +1,40 @@
+import DropdownSelectBoxComponent from "select-box-kit/components/dropdown-select-box";
+import { default as computed, on } from "ember-addons/ember-computed-decorators";
+import { buttonDetails } from "discourse/lib/notification-levels";
+import { allLevels } from "discourse/lib/notification-levels";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: "notifications-button",
+  nameProperty: "key",
+  fullWidthOnMobile: true,
+  content: allLevels,
+  collectionHeight: "auto",
+  value: Ember.computed.alias("notificationLevel"),
+  castInteger: true,
+  autofilterable: false,
+  filterable: false,
+  rowComponent: "notifications-button/notifications-button-row",
+  headerComponent: "notifications-button/notifications-button-header",
+
+  i18nPrefix: "",
+  i18nPostfix: "",
+  showFullTitle: true,
+
+  @on("didReceiveAttrs", "didUpdateAttrs")
+  _setComponentOptions() {
+    this.set("headerComponentOptions", Ember.Object.create({
+      i18nPrefix: this.get("i18nPrefix"),
+      showFullTitle: this.get("showFullTitle"),
+    }));
+
+    this.set("rowComponentOptions", Ember.Object.create({
+      i18nPrefix: this.get("i18nPrefix"),
+      i18nPostfix: this.get("i18nPostfix")
+    }));
+  },
+
+  @computed("computedValue")
+  selectedDetails(computedValue) {
+    return buttonDetails(computedValue);
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-header.js.es6 b/app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-header.js.es6
new file mode 100644
index 00000000000..96b15534928
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-header.js.es6
@@ -0,0 +1,24 @@
+import DropdownSelectBoxHeaderComponent from "select-box-kit/components/dropdown-select-box/dropdown-select-box-header";
+import computed from "ember-addons/ember-computed-decorators";
+import { iconHTML } from 'discourse-common/lib/icon-library';
+import { buttonDetails } from "discourse/lib/notification-levels";
+
+export default DropdownSelectBoxHeaderComponent.extend({
+  classNames: "notifications-button-header",
+
+  i18nPrefix: Ember.computed.alias("options.i18nPrefix"),
+  shouldDisplaySelectedName: Ember.computed.alias("options.showFullTitle"),
+
+  @computed("_selectedDetails.icon", "_selectedDetails.key")
+  icon(icon, key) {
+    return iconHTML(icon, {class: key}).htmlSafe();
+  },
+
+  @computed("_selectedDetails.key", "i18nPrefix")
+  selectedName(key, prefix) {
+    return I18n.t(`${prefix}.${key}.title`);
+  },
+
+  @computed("selectedContent.firstObject.value")
+  _selectedDetails(value) { return buttonDetails(value); }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-row.js.es6 b/app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-row.js.es6
new file mode 100644
index 00000000000..6f3f257b439
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/notifications-button/notifications-button-row.js.es6
@@ -0,0 +1,37 @@
+import DropdownSelectBoxRoxComponent from "select-box-kit/components/dropdown-select-box/dropdown-select-box-row";
+import { buttonDetails } from "discourse/lib/notification-levels";
+import computed from "ember-addons/ember-computed-decorators";
+import { iconHTML } from 'discourse-common/lib/icon-library';
+
+export default DropdownSelectBoxRoxComponent.extend({
+  classNames: "notifications-button-row",
+
+  i18nPrefix: Ember.computed.alias("options.i18nPrefix"),
+  i18nPostfix: Ember.computed.alias("options.i18nPostfix"),
+
+  @computed("content.value", "i18nPrefix")
+  title(value, prefix) {
+    const key = buttonDetails(value).key;
+    return I18n.t(`${prefix}.${key}.title`);
+  },
+
+  @computed("content.name", "content.originalContent.icon")
+  icon(contentName, icon) {
+    return iconHTML(icon, { class: contentName.dasherize() });
+  },
+
+  @computed("_start")
+  description(_start) {
+    return Handlebars.escapeExpression(I18n.t(`${_start}.description`));
+  },
+
+  @computed("_start")
+  name(_start) {
+    return Handlebars.escapeExpression(I18n.t(`${_start}.title`));
+  },
+
+  @computed("i18nPrefix", "i18nPostfix", "content.name")
+  _start(prefix, postfix, contentName) {
+    return `${prefix}.${contentName}${postfix}`;
+  },
+});
diff --git a/app/assets/javascripts/discourse/components/pinned-button.js.es6 b/app/assets/javascripts/select-box-kit/components/pinned-button.js.es6
similarity index 75%
rename from app/assets/javascripts/discourse/components/pinned-button.js.es6
rename to app/assets/javascripts/select-box-kit/components/pinned-button.js.es6
index 3d287deb2ad..c36d53c2369 100644
--- a/app/assets/javascripts/discourse/components/pinned-button.js.es6
+++ b/app/assets/javascripts/select-box-kit/components/pinned-button.js.es6
@@ -2,10 +2,9 @@ import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
   descriptionKey: "help",
-
-  classNames: ["pinned-button"],
-
-  classNameBindings: ["hidden:is-hidden"],
+  classNames: "pinned-button",
+  classNameBindings: ["isHidden"],
+  layoutName: "select-box-kit/templates/components/pinned-button",
 
   @computed("topic.pinned_globally", "topic.pinned")
   reasonText(pinnedGlobally, pinned) {
@@ -16,7 +15,7 @@ export default Ember.Component.extend({
   },
 
   @computed("topic.pinned", "topic.deleted", "topic.unpinned")
-  hidden(pinned, deleted, unpinned) {
+  isHidden(pinned, deleted, unpinned) {
     return deleted || (!pinned && !unpinned);
   }
 });
diff --git a/app/assets/javascripts/select-box-kit/components/pinned-options.js.es6 b/app/assets/javascripts/select-box-kit/components/pinned-options.js.es6
new file mode 100644
index 00000000000..c1be2e6ab38
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/pinned-options.js.es6
@@ -0,0 +1,64 @@
+import DropdownSelectBoxComponent from "select-box-kit/components/dropdown-select-box";
+import computed from "ember-addons/ember-computed-decorators";
+import { observes } from "ember-addons/ember-computed-decorators";
+import { on } from "ember-addons/ember-computed-decorators";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: "pinned-options",
+
+  headerComponent: "pinned-options/pinned-options-header",
+
+  @on("didReceiveAttrs")
+  _setComponentOptions() {
+    this.set("headerComponentOptions", Ember.Object.create({
+      pinned: this.get("topic.pinned"),
+      pinnedGlobally: this.get("topic.pinned_globally")
+    }));
+  },
+
+  @computed("topic.pinned")
+  value(pinned) {
+    return pinned ? "pinned" : "unpinned";
+  },
+
+  @observes("topic.pinned")
+  _pinStateChanged() {
+    this.set("value", this.get("topic.pinned") ? "pinned" : "unpinned");
+    this._setComponentOptions();
+  },
+
+  @computed("topic.pinned_globally")
+  content(pinnedGlobally) {
+    const globally = pinnedGlobally ? "_globally" : "";
+
+    return [
+      {
+        id: "pinned",
+        name: I18n.t("topic_statuses.pinned" + globally + ".title"),
+        description: I18n.t('topic_statuses.pinned' + globally + '.help'),
+        icon: "thumb-tack"
+      },
+      {
+        id: "unpinned",
+        name: I18n.t("topic_statuses.unpinned.title"),
+        icon: "thumb-tack",
+        description: I18n.t('topic_statuses.unpinned.help'),
+        iconClass: "unpinned"
+      }
+    ];
+  },
+
+  actions: {
+    onSelect(value) {
+      value = this.defaultOnSelect(value);
+
+      const topic = this.get("topic");
+
+      if (value === "unpinned") {
+        topic.clearPin();
+      } else {
+        topic.rePin();
+      }
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/pinned-options/pinned-options-header.js.es6 b/app/assets/javascripts/select-box-kit/components/pinned-options/pinned-options-header.js.es6
new file mode 100644
index 00000000000..3f83e8bffda
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/pinned-options/pinned-options-header.js.es6
@@ -0,0 +1,30 @@
+import DropdownSelectBoxHeaderComponent from "select-box-kit/components/dropdown-select-box/dropdown-select-box-header";
+import computed from "ember-addons/ember-computed-decorators";
+import { iconHTML } from 'discourse-common/lib/icon-library';
+
+export default DropdownSelectBoxHeaderComponent.extend({
+  classNames: "pinned-options-header",
+
+  pinnedGlobally: Ember.computed.alias("options.pinnedGlobally"),
+  pinned: Ember.computed.alias("options.pinned"),
+
+  @computed("pinned", "pinnedGlobally")
+  icon(pinned, pinnedGlobally) {
+    const globally = pinnedGlobally ? "_globally" : "";
+    const state = pinned ? `pinned${globally}` : "unpinned";
+
+    return iconHTML(
+      "thumb-tack",
+      { class: (state === "unpinned" ? "unpinned" : null) }
+    );
+  },
+
+  @computed("pinned", "pinnedGlobally")
+  selectedName(pinned, pinnedGlobally) {
+    const globally = pinnedGlobally ? "_globally" : "";
+    const state = pinned ? `pinned${globally}` : "unpinned";
+    const title = I18n.t(`topic_statuses.${state}.title`);
+
+    return `${title}${iconHTML("caret-down")}`.htmlSafe();
+  },
+});
diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
new file mode 100644
index 00000000000..3b33ad9890a
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
@@ -0,0 +1,440 @@
+const { get, isNone, isEmpty, isPresent } = Ember;
+import { on, observes } from "ember-addons/ember-computed-decorators";
+import computed from "ember-addons/ember-computed-decorators";
+import UtilsMixin from "select-box-kit/mixins/utils";
+import DomHelpersMixin from "select-box-kit/mixins/dom-helpers";
+import KeyboardMixin from "select-box-kit/mixins/keyboard";
+
+export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin, {
+  layoutName: "select-box-kit/templates/components/select-box-kit",
+  classNames: "select-box-kit",
+  classNameBindings: [
+    "isFocused",
+    "isExpanded",
+    "isDisabled",
+    "isHidden",
+    "isAbove",
+    "isBelow",
+    "isLeftAligned",
+    "isRightAligned"
+  ],
+  isDisabled: false,
+  isExpanded: false,
+  isFocused: false,
+  isHidden: false,
+  renderBody: false,
+  tabindex: 0,
+  scrollableParentSelector: ".modal-body",
+  value: null,
+  none: null,
+  highlightedValue: null,
+  noContentLabel: "select_box.no_content",
+  valueAttribute: "id",
+  nameProperty: "name",
+  autoFilterable: false,
+  filterable: false,
+  filter: "",
+  filterPlaceholder: "select_box.filter_placeholder",
+  filterIcon: "search",
+  rowComponent: "select-box-kit/select-box-kit-row",
+  noneRowComponent: "select-box-kit/select-box-kit-none-row",
+  createRowComponent: "select-box-kit/select-box-kit-create-row",
+  filterComponent: "select-box-kit/select-box-kit-filter",
+  headerComponent: "select-box-kit/select-box-kit-header",
+  collectionComponent: "select-box-kit/select-box-kit-collection",
+  collectionHeight: 200,
+  verticalOffset: 0,
+  horizontalOffset: 0,
+  fullWidthOnMobile: false,
+  castInteger: false,
+  allowAny: false,
+
+  init() {
+    this._super();
+
+    if ($(window).outerWidth(false) <= 420) {
+      this.setProperties({ filterable: false, autoFilterable: false });
+    }
+
+    this._previousScrollParentOverflow = "auto";
+  },
+
+  close() {
+    this.setProperties({ isExpanded: false, isFocused: false });
+  },
+
+  focus() {
+    Ember.run.schedule("afterRender", () => this.$offscreenInput().select() );
+  },
+
+  blur() {
+    Ember.run.schedule("afterRender", () => this.$offscreenInput().blur() );
+  },
+
+  clickOutside(event) {
+    if ($(event.target).parents(".select-box-kit").length === 1) {
+      this.close();
+      return;
+    }
+
+    if (this.get("isExpanded") === true) {
+      this.set("isExpanded", false);
+      this.focus();
+    } else {
+      this.close();
+    }
+  },
+
+  createFunction(input) {
+    return (selectedBox) => {
+      const formatedContent = selectedBox.formatContent(input);
+      formatedContent.meta.generated = true;
+      return formatedContent;
+    };
+  },
+
+  filterFunction(content) {
+    return selectBox => {
+      const filter = selectBox.get("filter").toLowerCase();
+      return _.filter(content, c => {
+        return get(c, "name").toLowerCase().indexOf(filter) > -1;
+      });
+    };
+  },
+
+  nameForContent(content) {
+    if (isNone(content)) {
+      return null;
+    }
+
+    if (typeof content === "object") {
+      return get(content, this.get("nameProperty"));
+    }
+
+    return content;
+  },
+
+  valueForContent(content) {
+    switch (typeof content) {
+    case "string":
+      return this._castInteger(content);
+    default:
+      return this._castInteger(get(content, this.get("valueAttribute")));
+    }
+  },
+
+  formatContent(content) {
+    return {
+      value: this.valueForContent(content),
+      name: this.nameForContent(content),
+      originalContent: content,
+      meta: { generated: false }
+    };
+  },
+
+  formatContents(contents) {
+    return contents.map(content => this.formatContent(content));
+  },
+
+  @computed("filter", "filterable", "autoFilterable")
+  computedFilterable(filter, filterable, autoFilterable) {
+    if (filterable === true) {
+      return true;
+    }
+
+    if (filter.length > 0 && autoFilterable === true) {
+      return true;
+    }
+
+    return false;
+  },
+
+  @computed("computedFilterable", "filter", "allowAny")
+  shouldDisplayCreateRow(computedFilterable, filter, allow) {
+    return computedFilterable === true && filter.length > 0 && allow === true;
+  },
+
+  @computed("filter", "allowAny")
+  createRowContent(filter, allow) {
+    if (allow === true) {
+      return Ember.Object.create({ value: filter, name: filter });
+    }
+  },
+
+  @computed("content.[]")
+  computedContent(content) {
+    return this.formatContents(content || []);
+  },
+
+  @computed("value", "none", "computedContent.firstObject.value")
+  computedValue(value, none, firstContentValue) {
+    if (isNone(value) && isNone(none)) {
+      return this._castInteger(firstContentValue);
+    }
+
+    return this._castInteger(value);
+  },
+
+  @computed
+  templateForRow() { return () => null; },
+
+  @computed
+  templateForNoneRow() { return () => null; },
+
+  @computed
+  templateForCreateRow() { return () => null; },
+
+  @computed("none")
+  computedNone(none) {
+    if (isNone(none)) {
+      return null;
+    }
+
+    switch (typeof none) {
+    case "string":
+      return Ember.Object.create({ name: I18n.t(none), value: "" });
+    default:
+      return this.formatContent(none);
+    }
+  },
+
+  @computed("computedValue", "computedContent.[]")
+  selectedContent(computedValue, computedContent) {
+    if (isNone(computedValue)) {
+      return [];
+    }
+
+    return [ computedContent.findBy("value", this._castInteger(computedValue)) ];
+  },
+
+  @on("didRender")
+  _configureSelectBoxDOM() {
+    if (this.get("isExpanded") === true) {
+      Ember.run.schedule("afterRender", () => {
+        this.$collection().css("max-height", this.get("collectionHeight"));
+        this._applyDirection();
+        this._positionWrapper();
+      });
+    }
+  },
+
+  @on("willDestroyElement")
+  _cleanHandlers() {
+    $(window).off(`resize.${this.elementId}`);
+    this._removeFixedPosition();
+  },
+
+  @on("didInsertElement")
+  _setupResizeListener() {
+    $(window).on(`resize.${this.elementId}`, () => this.set("isExpanded", false) );
+  },
+
+  @observes("filter", "filteredContent.[]", "shouldDisplayCreateRow")
+  _setHighlightedValue() {
+    const filteredContent = this.get("filteredContent");
+    const display = this.get("shouldDisplayCreateRow");
+    const none = this.get("computedNone");
+
+    if (isNone(this.get("highlightedValue")) && !isEmpty(filteredContent)) {
+      this.set("highlightedValue", get(filteredContent, "firstObject.value"));
+      return;
+    }
+
+    if (display === true && isEmpty(filteredContent)) {
+      this.set("highlightedValue", this.get("filter"));
+    }
+    else if (!isEmpty(filteredContent)) {
+      this.set("highlightedValue", get(filteredContent, "firstObject.value"));
+    }
+    else if (isEmpty(filteredContent) && isPresent(none) && display === false) {
+      this.set("highlightedValue", get(none, "value"));
+    }
+  },
+
+  @observes("isExpanded")
+  _isExpandedChanged() {
+    if (this.get("isExpanded") === true) {
+      this._applyFixedPosition();
+
+      this.setProperties({
+        highlightedValue: this.get("computedValue"),
+        renderBody: true,
+        isFocused: true
+      });
+    } else {
+      this._removeFixedPosition();
+    }
+  },
+
+  @computed("filter", "computedFilterable", "computedContent.[]", "computedValue.[]")
+  filteredContent(filter, computedFilterable, computedContent, computedValue) {
+    if (computedFilterable === false) {
+      return computedContent;
+    }
+
+    return this.filterFunction(computedContent)(this, computedValue);
+  },
+
+  @computed("scrollableParentSelector")
+  scrollableParent(scrollableParentSelector) {
+    return this.$().parents(scrollableParentSelector).first();
+  },
+
+  actions: {
+    onToggle() {
+      this.toggleProperty("isExpanded");
+
+      if (this.get("isExpanded") === true) { this.focus(); }
+    },
+
+    onCreateContent(input) {
+      const content = this.createFunction(input)(this);
+      this.get("computedContent").pushObject(content);
+      this.send("onSelect", content.value);
+    },
+
+    onFilterChange(filter) {
+      this.set("filter", filter);
+    },
+
+    onHighlight(value) {
+      this.set("highlightedValue", value);
+    },
+
+    onClearSelection() {
+      this.send("onSelect", null);
+    },
+
+    onSelect(value) {
+      value = this.defaultOnSelect(value);
+      this.set("value", value);
+    },
+
+    onDeselect() {
+      this.defaultOnDeselect();
+      this.set("value", null);
+    }
+  },
+
+  defaultOnSelect(value) {
+    if (value === "") { value = null; }
+
+    this.setProperties({
+      highlightedValue: null,
+      isExpanded: false,
+      filter: ""
+    });
+
+    this.focus();
+
+    return value;
+  },
+
+  defaultOnDeselect(value) {
+    const content = this.get("computedContent").findBy("value", value);
+    if (!isNone(content) && get(content, "meta.generated") === true) {
+      this.get("computedContent").removeObject(content);
+    }
+  },
+
+  _applyDirection() {
+    let options = { left: "auto", bottom: "auto", top: "auto" };
+    const headerHeight = this.$header().outerHeight(false);
+    const filterHeight = this.$(".select-box-kit-filter").outerHeight(false);
+    const bodyHeight = this.$body().outerHeight(false);
+    const windowWidth = $(window).width();
+    const windowHeight = $(window).height();
+    const boundingRect = this.$()[0].getBoundingClientRect();
+    const offsetTop = boundingRect.top;
+
+    if (this.get("fullWidthOnMobile") && windowWidth <= 420) {
+      const margin = 10;
+      const relativeLeft = this.$().offset().left - $(window).scrollLeft();
+      options.left = margin - relativeLeft;
+      options.width = windowWidth - margin * 2;
+      options.maxWidth = options.minWidth = "unset";
+    } else {
+      const offsetLeft = boundingRect.left;
+      const bodyWidth = this.$body().outerWidth(false);
+      const hasRightSpace = (windowWidth - (this.get("horizontalOffset") + offsetLeft + filterHeight + bodyWidth) > 0);
+
+      if (hasRightSpace) {
+        this.setProperties({ isLeftAligned: true, isRightAligned: false });
+        options.left = this.get("horizontalOffset");
+      } else {
+        this.setProperties({ isLeftAligned: false, isRightAligned: true });
+        options.right = this.get("horizontalOffset");
+      }
+    }
+
+    const componentHeight = this.get("verticalOffset") + bodyHeight + headerHeight;
+    const hasBelowSpace = windowHeight - offsetTop - componentHeight > 0;
+    if (hasBelowSpace) {
+      this.setProperties({ isBelow: true, isAbove: false });
+      options.top = headerHeight + this.get("verticalOffset");
+    } else {
+      this.setProperties({ isBelow: false, isAbove: true });
+      options.bottom = headerHeight + this.get("verticalOffset");
+    }
+
+    this.$body().css(options);
+  },
+
+  _applyFixedPosition() {
+    const width = this.$().outerWidth(false);
+    const height = this.$header().outerHeight(false);
+
+    if (this.get("scrollableParent").length === 0) {
+      return;
+    }
+
+    const $placeholder = $(`<div class='select-box-kit-fixed-placeholder-${this.elementId}'></div>`);
+
+    this._previousScrollParentOverflow = this.get("scrollableParent").css("overflow");
+    this.get("scrollableParent").css({ overflow: "hidden" });
+
+    this.$()
+      .before($placeholder.css({
+        display: "inline-block",
+        width,
+        height,
+        "vertical-align": "middle"
+      }))
+      .css({
+        width,
+        direction: $("html").css("direction"),
+        position: "fixed",
+        "margin-top": -this.get("scrollableParent").scrollTop(),
+        "margin-left": -width
+      });
+  },
+
+  _removeFixedPosition() {
+    if (this.get("scrollableParent").length === 0) {
+      return;
+    }
+
+    $(`.select-box-kit-fixed-placeholder-${this.elementId}`).remove();
+
+    this.$().css({
+      top: "auto",
+      left: "auto",
+      "margin-left": "auto",
+      "margin-top": "auto",
+      position: "relative"
+    });
+
+    this.get("scrollableParent").css({
+      overflow: this._previousScrollParentOverflow
+    });
+  },
+
+  _positionWrapper() {
+    const headerHeight = this.$header().outerHeight(false);
+
+    this.$(".select-box-kit-wrapper").css({
+      width: this.$().width(),
+      height: headerHeight + this.$body().outerHeight(false)
+    });
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-collection.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-collection.js.es6
new file mode 100644
index 00000000000..ca378f5ef93
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-collection.js.es6
@@ -0,0 +1,5 @@
+export default Ember.Component.extend({
+  layoutName: "select-box-kit/templates/components/select-box-kit/select-box-kit-collection",
+  classNames: "select-box-kit-collection",
+  tagName: "ul"
+});
diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-create-row.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-create-row.js.es6
new file mode 100644
index 00000000000..fd686080ec9
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-create-row.js.es6
@@ -0,0 +1,10 @@
+import SelectBoxKitRowComponent from "select-box-kit/components/select-box-kit/select-box-kit-row";
+
+export default SelectBoxKitRowComponent.extend({
+  layoutName: "select-box-kit/templates/components/select-box-kit/select-box-kit-row",
+  classNames: "create",
+
+  click() {
+    this.sendAction("onCreateContent", this.get("content.name"));
+  },
+});
diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-filter.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-filter.js.es6
new file mode 100644
index 00000000000..9717b59f78a
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-filter.js.es6
@@ -0,0 +1,6 @@
+export default Ember.Component.extend({
+  layoutName: "select-box-kit/templates/components/select-box-kit/select-box-kit-filter",
+  classNames: "select-box-kit-filter",
+  classNameBindings: ["isFocused", "isHidden"],
+  isHidden: Ember.computed.not("filterable"),
+});
diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-header.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-header.js.es6
new file mode 100644
index 00000000000..b7797571ae3
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-header.js.es6
@@ -0,0 +1,28 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  layoutName: "select-box-kit/templates/components/select-box-kit/select-box-kit-header",
+  classNames: "select-box-kit-header",
+  classNameBindings: ["isFocused"],
+  attributeBindings: ["selectedName:data-name"],
+  shouldDisplaySelectedName: true,
+
+  @computed("options.shouldDisplaySelectedName")
+  shouldDisplaySelectedName(should) {
+    if (Ember.isNone(should)) { return true; }
+    return should;
+  },
+
+  @computed("options.selectedName", "selectedContent.firstObject.name")
+  selectedName(optionsSelectedName, firstSelectedContentName) {
+    if (Ember.isNone(optionsSelectedName)) {
+      return firstSelectedContentName;
+    }
+    return optionsSelectedName;
+  },
+
+  @computed("options.icon")
+  icon(optionsIcon) { return optionsIcon; },
+
+  click() { this.sendAction("onToggle"); }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-none-row.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-none-row.js.es6
new file mode 100644
index 00000000000..fbc07b312c6
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-none-row.js.es6
@@ -0,0 +1,10 @@
+import SelectBoxKitRowComponent from "select-box-kit/components/select-box-kit/select-box-kit-row";
+
+export default SelectBoxKitRowComponent.extend({
+  layoutName: "select-box-kit/templates/components/select-box-kit/select-box-kit-row",
+  classNames: "none",
+
+  click() {
+    this.sendAction("onClearSelection");
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6
new file mode 100644
index 00000000000..c8e4927d86c
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6
@@ -0,0 +1,59 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
+import { on } from 'ember-addons/ember-computed-decorators';
+import computed from 'ember-addons/ember-computed-decorators';
+const { run, isPresent } = Ember;
+import UtilsMixin from "select-box-kit/mixins/utils";
+
+export default Ember.Component.extend(UtilsMixin, {
+  layoutName: "select-box-kit/templates/components/select-box-kit/select-box-kit-row",
+  classNames: "select-box-kit-row",
+  tagName: "li",
+  attributeBindings: [
+    "title",
+    "content.value:data-value",
+    "content.name:data-name"
+  ],
+  classNameBindings: ["isHighlighted", "isSelected"],
+
+  title: Ember.computed.alias("content.name"),
+
+  @computed("templateForRow")
+  template(templateForRow) { return templateForRow(this); },
+
+  @on("didReceiveAttrs", "didUpdateAttrs")
+  _setSelectionState() {
+    const contentValue = this.get("content.value");
+    this.set("isSelected", this.get("value") === contentValue);
+    this.set("isHighlighted", this._castInteger(this.get("highlightedValue")) === this._castInteger(contentValue));
+  },
+
+  @on("willDestroyElement")
+  _clearDebounce() {
+    const hoverDebounce = this.get("hoverDebounce");
+
+    if (isPresent(hoverDebounce)) {
+      run.cancel(hoverDebounce);
+    }
+  },
+
+  @computed("content.originalContent.icon", "content.originalContent.iconClass")
+  icon(icon, cssClass) {
+    if (icon) {
+      return iconHTML(icon, { class: cssClass });
+    }
+
+    return null;
+  },
+
+  mouseEnter() {
+    this.set("hoverDebounce", run.debounce(this, this._sendOnHighlightAction, 32));
+  },
+
+  click() {
+    this.sendAction("onSelect", this.get("content.value"));
+  },
+
+  _sendOnHighlightAction() {
+    this.sendAction("onHighlight", this.get("content.value"));
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/tag-notifications-button.js.es6 b/app/assets/javascripts/select-box-kit/components/tag-notifications-button.js.es6
new file mode 100644
index 00000000000..c240832e1ed
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/tag-notifications-button.js.es6
@@ -0,0 +1,15 @@
+import NotificationOptionsComponent from "select-box-kit/components/notifications-button";
+
+export default NotificationOptionsComponent.extend({
+  classNames: "tag-notifications-button",
+  i18nPrefix: "tagging.notifications",
+  showFullTitle: false,
+  headerComponent: "tag-notifications-button/tag-notifications-button-header",
+
+  actions: {
+    onSelect(value) {
+      value = this.defaultOnSelect(value);
+      this.sendAction("action", value);
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/tag-notifications-button/tag-notifications-button-header.js.es6 b/app/assets/javascripts/select-box-kit/components/tag-notifications-button/tag-notifications-button-header.js.es6
new file mode 100644
index 00000000000..524c8b8585d
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/tag-notifications-button/tag-notifications-button-header.js.es6
@@ -0,0 +1,13 @@
+import NotificationButtonHeader from "select-box-kit/components/notifications-button/notifications-button-header";
+import computed from "ember-addons/ember-computed-decorators";
+import { iconHTML } from 'discourse-common/lib/icon-library';
+
+export default NotificationButtonHeader.extend({
+  classNames: "tag-notifications-button-header",
+  shouldDisplaySelectedName: false,
+
+  @computed("_selectedDetails.icon", "_selectedDetails.key")
+  icon() {
+    return `${this._super()}${iconHTML("caret-down")}`.htmlSafe();
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6 b/app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6
new file mode 100644
index 00000000000..3bac66778d8
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6
@@ -0,0 +1,75 @@
+import computed from "ember-addons/ember-computed-decorators";
+import ComboBoxComponent from "select-box-kit/components/combo-box";
+import { on } from "ember-addons/ember-computed-decorators";
+
+export default ComboBoxComponent.extend({
+  headerText: "topic.controls",
+  classNames: "topic-footer-mobile-dropdown",
+  filterable: false,
+  autoFilterable: false,
+
+  @on("didReceiveAttrs")
+  _setComponentOptions() {
+    this.set("headerComponentOptions", Ember.Object.create({
+      selectedName: I18n.t(this.get("headerText"))
+    }));
+  },
+
+  @computed("topic", "topic.details", "value")
+  content(topic, details) {
+    const content = [];
+
+    if (details.get("can_invite_to")) {
+      content.push({ id: "invite", icon: "users", name: I18n.t("topic.invite_reply.title") });
+    }
+
+    if (topic.get("bookmarked")) {
+      content.push({ id: "bookmark", icon: "bookmark", name: I18n.t("bookmarked.clear_bookmarks") });
+    } else {
+      content.push({ id: "bookmark", icon: "bookmark", name: I18n.t("bookmarked.title") });
+    }
+
+    content.push({ id: "share", icon: "link", name: I18n.t("topic.share.title") });
+
+    if (details.get("can_flag_topic")) {
+      content.push({ id: "flag", icon: "flag", name: I18n.t("topic.flag_topic.title") });
+    }
+
+    return content;
+  },
+
+  actions: {
+    onSelect(value) {
+      value = this.defaultOnSelect(value);
+
+      const topic = this.get("topic");
+
+      // In case it"s not a valid topic
+      if (!topic.get("id")) {
+        return;
+      }
+
+      this.set("value", value);
+
+      const refresh = () => this.set("value", null);
+
+      switch(value) {
+        case "invite":
+          this.attrs.showInvite();
+          refresh();
+          break;
+        case "bookmark":
+          topic.toggleBookmark().then(() => refresh() );
+          break;
+        case "share":
+          this.appEvents.trigger("share:url", topic.get("shareUrl"), $("#topic-footer-buttons"));
+          refresh();
+          break;
+        case "flag":
+          this.attrs.showFlagTopic();
+          refresh();
+          break;
+      }
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/components/topic-notifications-button.js.es6 b/app/assets/javascripts/select-box-kit/components/topic-notifications-button.js.es6
new file mode 100644
index 00000000000..3aeb9a9d980
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/topic-notifications-button.js.es6
@@ -0,0 +1,6 @@
+export default Ember.Component.extend({
+  layoutName: "select-box-kit/templates/components/topic-notifications-button",
+  classNames: "topic-notifications-button",
+  showFullTitle: true,
+  appendReason: true
+});
diff --git a/app/assets/javascripts/select-box-kit/components/topic-notifications-options.js.es6 b/app/assets/javascripts/select-box-kit/components/topic-notifications-options.js.es6
new file mode 100644
index 00000000000..d1da27684a0
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/components/topic-notifications-options.js.es6
@@ -0,0 +1,40 @@
+import NotificationOptionsComponent from "select-box-kit/components/notifications-button";
+import { on } from "ember-addons/ember-computed-decorators";
+import { topicLevels } from "discourse/lib/notification-levels";
+
+export default NotificationOptionsComponent.extend({
+  classNames: "topic-notifications-options",
+  content: topicLevels,
+  i18nPrefix: "topic.notifications",
+  value: Ember.computed.alias("topic.details.notification_level"),
+
+  @on("didInsertElement")
+  _bindGlobalLevelChanged() {
+    this.appEvents.on("topic-notifications-button:changed", (msg) => {
+      if (msg.type === "notification") {
+        if (this.get("computedValue") !== msg.id) {
+          this.get("topic.details").updateNotifications(msg.id);
+        }
+      }
+    });
+  },
+
+  @on("willDestroyElement")
+  _unbindGlobalLevelChanged() {
+    this.appEvents.off("topic-notifications-button:changed");
+  },
+
+  actions: {
+    onSelect(value) {
+      if (value !== this.get("computedValue")) {
+        this.get("topic.details").updateNotifications(value);
+      }
+
+      this.set("value", value);
+
+      this.defaultOnSelect(value);
+
+      this.blur();
+    }
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/mixins/dom-helpers.js.es6 b/app/assets/javascripts/select-box-kit/mixins/dom-helpers.js.es6
new file mode 100644
index 00000000000..d8caacb501e
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/mixins/dom-helpers.js.es6
@@ -0,0 +1,53 @@
+export default Ember.Mixin.create({
+  init() {
+    this._super();
+
+    this.offscreenInputSelector = ".select-box-kit-offscreen";
+    this.filterInputSelector = ".select-box-kit-filter-input";
+    this.rowSelector = ".select-box-kit-row";
+    this.collectionSelector = ".select-box-kit-collection";
+    this.headerSelector = ".select-box-kit-header";
+    this.bodySelector = ".select-box-kit-body";
+  },
+
+  $findRowByValue(value) {
+    return this.$(`${this.rowSelector}[data-value='${value}']`);
+  },
+
+  $header() {
+    return this.$(this.headerSelector);
+  },
+
+  $body() {
+    return this.$(this.bodySelector);
+  },
+
+  $collection() {
+    return this.$(this.collectionSelector);
+  },
+
+  $rows() {
+    return this.$(this.rowSelector);
+  },
+
+  $highlightedRow() {
+    return this.$rows().filter(".is-highlighted");
+  },
+
+  $selectedRow() {
+    return this.$rows().filter(".is-selected");
+  },
+
+  $offscreenInput() {
+    return this.$(this.offscreenInputSelector);
+  },
+
+  $filterInput() {
+    return this.$(this.filterInputSelector);
+  },
+
+  _killEvent(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/mixins/keyboard.js.es6 b/app/assets/javascripts/select-box-kit/mixins/keyboard.js.es6
new file mode 100644
index 00000000000..d6c8d18aab6
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/mixins/keyboard.js.es6
@@ -0,0 +1,196 @@
+const { isEmpty } = Ember;
+
+export default Ember.Mixin.create({
+  init() {
+    this._super();
+
+    this.keys = {
+      TAB: 9,
+      ENTER: 13,
+      ESC: 27,
+      SPACE: 32,
+      LEFT: 37,
+      UP: 38,
+      RIGHT: 39,
+      DOWN: 40,
+      SHIFT: 16,
+      CTRL: 17,
+      ALT: 18,
+      PAGE_UP: 33,
+      PAGE_DOWN: 34,
+      HOME: 36,
+      END: 35,
+      BACKSPACE: 8
+    };
+  },
+
+  willDestroyElement() {
+    this._super();
+
+    $(document).off(
+      "click.select-box-kit mousedown.select-box-kit touchstart.select-box-kit"
+    );
+
+    this.$offscreenInput()
+      .off("focus.select-box-kit focusin.select-box-kit blur.select-box-kit keydown.select-box-kit");
+
+    this.$filterInput().off(`keydown.select-box-kit`);
+  },
+
+  didInsertElement() {
+    this._super();
+
+    $(document).on(
+      "click.select-box-kit mousedown.select-box-kit touchstart.select-box-kit", event => {
+        if (this.$()[0].contains(event.target)) { return; }
+        this.clickOutside(event);
+    });
+
+    this.$offscreenInput()
+      .on(`blur.select-box-kit`, () => {
+        if (this.get("isExpanded") === false && this.get("isFocused") === true) {
+          this.close();
+        }
+      })
+      .on(`focus.select-box-kit`, (event) => {
+        this.set("isFocused", true);
+        this._killEvent(event);
+      })
+      .on(`focusin.select-box-kit`, (event) => {
+        this.set("isFocused", true);
+        this._killEvent(event);
+      })
+      .on(`keydown.select-box-kit`, (event) => {
+        const keyCode = event.keyCode || event.which;
+
+        switch (keyCode) {
+          case this.keys.UP:
+          case this.keys.DOWN:
+            if (this.get("isExpanded") === false) {
+              this.set("isExpanded", true);
+            }
+
+            Ember.run.schedule("actions", () => {
+              this._handleArrowKey(keyCode);
+            });
+
+            this._killEvent(event);
+
+            return;
+          case this.keys.ENTER:
+            if (this.get("isExpanded") === false) {
+              this.set("isExpanded", true);
+            } else {
+              this.send("onSelect", this.$highlightedRow().data("value"));
+            }
+
+            this._killEvent(event);
+
+            return;
+          case this.keys.TAB:
+            if (this.get("isExpanded") === false) {
+              return true;
+            } else {
+              this.send("onSelect", this.$highlightedRow().data("value"));
+              return;
+            }
+          case this.keys.ESC:
+            this.close();
+            this._killEvent(event);
+            return;
+          case this.keys.BACKSPACE:
+            this._killEvent(event);
+            return;
+        }
+
+        if (this._isSpecialKey(keyCode) === false && event.metaKey === false) {
+          this.setProperties({
+            isExpanded: true,
+            filter: String.fromCharCode(keyCode)
+          });
+
+          Ember.run.schedule("afterRender", () => this.$filterInput().focus() );
+        }
+      });
+
+    this.$filterInput()
+      .on(`keydown.select-box-kit`, (event) => {
+        const keyCode = event.keyCode || event.which;
+
+        if ([
+            this.keys.RIGHT,
+            this.keys.LEFT,
+            this.keys.BACKSPACE,
+            this.keys.SPACE,
+          ].includes(keyCode) || event.metaKey === true) {
+          return true;
+        }
+
+        if (this._isSpecialKey(keyCode) === true) {
+          this.$offscreenInput().focus().trigger(event);
+        }
+
+        return true;
+      });
+  },
+
+  _handleArrowKey(keyCode) {
+    if (isEmpty(this.get("filteredContent"))) {
+      return;
+    }
+
+    Ember.run.schedule("afterRender", () => {
+      switch (keyCode) {
+        case 38:
+          Ember.run.throttle(this, this._handleUpArrow, 32);
+          break;
+        default:
+          Ember.run.throttle(this, this._handleDownArrow, 32);
+      }
+    });
+  },
+
+  _moveHighlight(direction) {
+    const $rows = this.$rows();
+    const currentIndex = $rows.index(this.$highlightedRow());
+
+    let nextIndex = 0;
+
+    if (currentIndex < 0) {
+      nextIndex = 0;
+    } else if (currentIndex + direction < $rows.length) {
+      nextIndex = currentIndex + direction;
+    }
+
+    this._rowSelection($rows, nextIndex);
+  },
+
+  _handleDownArrow() { this._moveHighlight(1); },
+
+  _handleUpArrow() { this._moveHighlight(-1); },
+
+  _rowSelection($rows, nextIndex) {
+    const highlightableValue = $rows.eq(nextIndex).data("value");
+    const $highlightableRow = this.$findRowByValue(highlightableValue);
+    this.send("onHighlight", highlightableValue);
+
+    Ember.run.schedule("afterRender", () => {
+      const $collection = this.$collection();
+      const currentOffset = $collection.offset().top +
+                            $collection.outerHeight(false);
+      const nextBottom = $highlightableRow.offset().top +
+                         $highlightableRow.outerHeight(false);
+      const nextOffset = $collection.scrollTop() + nextBottom - currentOffset;
+
+      if (nextIndex === 0) {
+        $collection.scrollTop(0);
+      } else if (nextBottom > currentOffset) {
+        $collection.scrollTop(nextOffset);
+      }
+    });
+  },
+
+  _isSpecialKey(keyCode) {
+    return Object.values(this.keys).includes(keyCode);
+  },
+});
diff --git a/app/assets/javascripts/select-box-kit/mixins/utils.js.es6 b/app/assets/javascripts/select-box-kit/mixins/utils.js.es6
new file mode 100644
index 00000000000..05d896a832b
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/mixins/utils.js.es6
@@ -0,0 +1,9 @@
+export default Ember.Mixin.create({
+  _castInteger(value) {
+    if (this.get("castInteger") === true && Ember.isPresent(value)) {
+      return parseInt(value, 10);
+    }
+
+    return Ember.isNone(value) ? value : value.toString();
+  }
+});
diff --git a/app/assets/javascripts/select-box-kit/templates/components/combo-box/combo-box-header.hbs b/app/assets/javascripts/select-box-kit/templates/components/combo-box/combo-box-header.hbs
new file mode 100644
index 00000000000..38e070fa345
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/combo-box/combo-box-header.hbs
@@ -0,0 +1,15 @@
+{{#if icon}}
+  {{{icon}}}
+{{/if}}
+
+<span class="selected-name" title={{selectedName}}>
+  {{{selectedName}}}
+</span>
+
+{{#if shouldDisplayClearableButton}}
+  <button class="btn-clear" {{action onClearSelection bubbles=false}}>
+    {{d-icon 'times'}}
+  </button>
+{{/if}}
+
+{{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs b/app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
new file mode 100644
index 00000000000..0ffbeb4f860
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
@@ -0,0 +1,17 @@
+<button
+  class="btn {{if shouldDisplaySelectedName 'btn-icon-text' 'no-text btn-icon'}}"
+  aria-label="{{selectedName}}"
+  type="button"
+  tabindex="-1"
+  title="{{selectedName}}">
+
+  {{#if icon}}
+    {{{icon}}}
+  {{/if}}
+
+  {{#if shouldDisplaySelectedName}}
+    <span class="d-button-label selected-name">
+      {{selectedName}}
+    </span>
+  {{/if}}
+</button>
diff --git a/app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs b/app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs
new file mode 100644
index 00000000000..0fe1813c8a6
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs
@@ -0,0 +1,15 @@
+{{#if template}}
+  {{{template}}}
+{{else}}
+  {{#if icon}}
+    <div class="icons">
+      <span class="selection-indicator"></span>
+      {{{icon}}}
+    </div>
+  {{/if}}
+
+  <div class="texts">
+    <span class="name">{{{name}}}</span>
+    <span class="desc">{{{description}}}</span>
+  </div>
+{{/if}}
diff --git a/app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs b/app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
new file mode 100644
index 00000000000..5e175c5ee7d
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
@@ -0,0 +1,23 @@
+{{#if icon}}
+  <div class="future-date-input-selector-icons">
+    {{{icon}}}
+  </div>
+{{/if}}
+
+<span class="selected-name" title={{selectedName}}>
+  {{{selectedName}}}
+</span>
+
+{{#if datetime}}
+  <span class="future-date-input-selector-datetime">
+    {{datetime}}
+  </span>
+{{/if}}
+
+{{#if shouldDisplayClearableButton}}
+  <button class="btn-clear" {{action onClearSelection bubbles=false}}>
+    {{d-icon 'times'}}
+  </button>
+{{/if}}
+
+{{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs b/app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs
new file mode 100644
index 00000000000..dc936cbe690
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs
@@ -0,0 +1,13 @@
+{{#if icon}}
+  <div class="future-date-input-selector-icons">
+    {{{icon}}}
+  </div>
+{{/if}}
+
+<span class="name">{{content.name}}</span>
+
+{{#if datetime}}
+  <span class="future-date-input-selector-datetime">
+    {{datetime}}
+  </span>
+{{/if}}
diff --git a/app/assets/javascripts/select-box-kit/templates/components/multi-combo-box/multi-combo-box-header.hbs b/app/assets/javascripts/select-box-kit/templates/components/multi-combo-box/multi-combo-box-header.hbs
new file mode 100644
index 00000000000..13cf6c3f6d5
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/multi-combo-box/multi-combo-box-header.hbs
@@ -0,0 +1,30 @@
+<ul class="choices">
+  {{#each selectedContent as |selectedContent|}}
+    <li tabindex="-1" data-value={{selectedContent.value}} data-name={{selectedContent.name}} class="selected-name">
+      <span class="delete-icon" {{action onDeselect selectedContent.value bubbles=false}}>
+        {{d-icon "times"}}
+      </span>
+      <span class="name">
+        {{selectedContent.name}}
+      </span>
+    </li>
+  {{else}}
+    {{#if shouldDisplayFilterPlaceholder}}
+      <li class="choice-placeholder">
+        {{text}}
+      </li>
+    {{/if}}
+  {{/each}}
+
+  <li class="filter">
+    {{input
+      class="select-box-kit-filter-input"
+      key-up=onFilterChange
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck=false
+      value=filter
+    }}
+  </li>
+</ul>
diff --git a/app/assets/javascripts/discourse/templates/components/pinned-button.hbs b/app/assets/javascripts/select-box-kit/templates/components/pinned-button.hbs
similarity index 100%
rename from app/assets/javascripts/discourse/templates/components/pinned-button.hbs
rename to app/assets/javascripts/select-box-kit/templates/components/pinned-button.hbs
diff --git a/app/assets/javascripts/select-box-kit/templates/components/select-box-kit.hbs b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit.hbs
new file mode 100644
index 00000000000..6575daf8843
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit.hbs
@@ -0,0 +1,65 @@
+<input
+  class="select-box-kit-offscreen"
+  type="text"
+  aria-haspopup="true"
+  role="button"
+  aria-labelledby="select-box-kit-offscreen-{{elementId}}"
+  tabindex={{tabindex}}
+  name={{name}}
+  value={{computedValue}}
+  readonly=true
+/>
+
+{{component headerComponent
+  none=computedNone
+  isFocused=isFocused
+  isExpanded=isExpanded
+  selectedContent=selectedContent
+  onDeselect=(action "onDeselect")
+  onToggle=(action "onToggle")
+  onFilterChange=(action "onFilterChange")
+  onClearSelection=(action "onClearSelection")
+  options=headerComponentOptions
+}}
+
+<div class="select-box-kit-body">
+  {{component filterComponent
+    onFilterChange=(action "onFilterChange")
+    icon=filterIcon
+    filter=filter
+    filterable=computedFilterable
+    isFocused=isFocused
+    placeholder=(i18n filterPlaceholder)
+    tabindex=tabindex
+  }}
+
+  {{#if renderBody}}
+    {{component collectionComponent
+      shouldDisplayCreateRow=shouldDisplayCreateRow
+      none=computedNone
+      createRowContent=createRowContent
+      selectedContent=selectedContent
+      filteredContent=filteredContent
+      rowComponent=rowComponent
+      noneRowComponent=noneRowComponent
+      createRowComponent=createRowComponent
+      iconForRow=iconForRow
+      templateForRow=templateForRow
+      templateForNoneRow=templateForNoneRow
+      templateForCreateRow=templateForCreateRow
+      shouldHighlightRow=shouldHighlightRow
+      shouldSelectRow=shouldSelectRow
+      titleForRow=titleForRow
+      onClearSelection=(action "onClearSelection")
+      onSelect=(action "onSelect")
+      onHighlight=(action "onHighlight")
+      onCreateContent=(action "onCreateContent")
+      noContentLabel=noContentLabel
+      highlightedValue=highlightedValue
+      computedValue=computedValue
+      rowComponentOptions=rowComponentOptions
+    }}
+  {{/if}}
+</div>
+
+<div class="select-box-kit-wrapper"></div>
diff --git a/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-collection.hbs b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-collection.hbs
new file mode 100644
index 00000000000..73f80e2608a
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-collection.hbs
@@ -0,0 +1,49 @@
+{{#if none}}
+  {{#if selectedContent}}
+    {{component noneRowComponent
+      content=none
+      templateForRow=templateForNoneRow
+      titleForRow=titleForRow
+      iconForRow=iconForRow
+      highlightedValue=highlightedValue
+      onClearSelection=onClearSelection
+      onHighlight=onHighlight
+      value=computedValue
+      options=rowComponentOptions
+    }}
+  {{/if}}
+{{/if}}
+
+{{#if shouldDisplayCreateRow}}
+  {{component createRowComponent
+    content=createRowContent
+    templateForRow=templateForCreateRow
+    titleForRow=titleForRow
+    iconForRow=iconForRow
+    highlightedValue=highlightedValue
+    onHighlight=onHighlight
+    onCreateContent=onCreateContent
+    value=computedValue
+    options=rowComponentOptions
+  }}
+{{/if}}
+
+{{#each filteredContent as |content|}}
+  {{component rowComponent
+    content=content
+    templateForRow=templateForRow
+    titleForRow=titleForRow
+    iconForRow=iconForRow
+    highlightedValue=highlightedValue
+    onSelect=onSelect
+    onHighlight=onHighlight
+    value=computedValue
+    options=rowComponentOptions
+  }}
+{{else}}
+  {{#if noContentLabel}}
+    <li class="select-box-kit-row no-content">
+      {{i18n noContentLabel}}
+    </li>
+  {{/if}}
+{{/each}}
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-filter.hbs
similarity index 71%
rename from app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs
rename to app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-filter.hbs
index c9a06c3fc5e..74d12880749 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs
+++ b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-filter.hbs
@@ -1,12 +1,13 @@
 {{input
   tabindex=tabindex
-  class="filter-query"
+  class="select-box-kit-filter-input"
   placeholder=placeholder
-  key-up=onFilterChange
+  key-down=onFilterChange
   autocomplete="off"
   autocorrect="off"
   autocapitalize="off"
   spellcheck=false
+  value=filter
 }}
 
 {{#if icon}}
diff --git a/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-header.hbs b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-header.hbs
new file mode 100644
index 00000000000..b0cea9f9134
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-header.hbs
@@ -0,0 +1,7 @@
+{{#if icon}}
+  {{{icon}}}
+{{/if}}
+
+<span class="selected-name" title={{selectedName}}>
+  {{{selectedName}}}
+</span>
diff --git a/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-row.hbs b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-row.hbs
new file mode 100644
index 00000000000..1786cfb5538
--- /dev/null
+++ b/app/assets/javascripts/select-box-kit/templates/components/select-box-kit/select-box-kit-row.hbs
@@ -0,0 +1,9 @@
+{{#if template}}
+  {{{template}}}
+{{else}}
+  {{#if icon}}
+    {{{icon}}}
+  {{/if}}
+
+  <span class="name">{{content.name}}</span>
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/components/topic-notifications-button.hbs b/app/assets/javascripts/select-box-kit/templates/components/topic-notifications-button.hbs
similarity index 100%
rename from app/assets/javascripts/discourse/templates/components/topic-notifications-button.hbs
rename to app/assets/javascripts/select-box-kit/templates/components/topic-notifications-button.hbs
diff --git a/app/assets/javascripts/wizard-application.js b/app/assets/javascripts/wizard-application.js
index e69ccaf616f..9baf2c224ba 100644
--- a/app/assets/javascripts/wizard-application.js
+++ b/app/assets/javascripts/wizard-application.js
@@ -3,6 +3,7 @@
 //= require ./ember-addons/macro-alias
 //= require ./ember-addons/ember-computed-decorators
 //= require_tree ./discourse-common
+//= require_tree ./select-box-kit
 //= require wizard/router
 //= require wizard/wizard
 //= require_tree ./wizard/templates
diff --git a/app/assets/javascripts/wizard/templates/components/invite-list.hbs b/app/assets/javascripts/wizard/templates/components/invite-list.hbs
index 718ef5bd16f..7fec1dcfa1b 100644
--- a/app/assets/javascripts/wizard/templates/components/invite-list.hbs
+++ b/app/assets/javascripts/wizard/templates/components/invite-list.hbs
@@ -12,7 +12,7 @@
     {{input class="invite-email wizard-focusable" value=inviteEmail placeholder="user@example.com" tabindex="9"}}
   </div>
 
-  {{combo-box value=inviteRole content=roles nameProperty="label" width="200px"}}
+  {{combo-box value=inviteRole content=roles nameProperty="label"}}
 
   <button class="wizard-btn small add-user" {{action "addUser"}}>
     {{d-icon "plus"}}{{i18n "wizard.invites.add_user"}}
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
index 06e7034c148..f95625b7a81 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
@@ -3,5 +3,4 @@
             value=field.value
             content=field.choices
             nameProperty="label"
-            width="400px"
             tabindex="9"}}
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index abb6e9bfa80..b4d00edc0c9 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -6,6 +6,7 @@
 @import "vendor/select2";
 @import "common/foundation/mixins";
 @import "common/foundation/variables";
+@import "common/select-box-kit/*";
 @import "common/components/*";
 @import "common/input_tip";
 @import "common/topic-entrance";
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index f9e4f5bce93..d47a59c5be0 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -211,6 +211,14 @@ $mobile-breakpoint: 700px;
 
 .admin-container {
   margin-top: 20px;
+
+  .select-box-kit {
+    width: 350px;
+  }
+
+  .select-box-kit-header {
+    height: 28px;
+  }
 }
 
 .admin-container .controls {
@@ -442,7 +450,7 @@ $mobile-breakpoint: 700px;
         width: 100%;
         padding-right: 0;
       }
-      .select2-container {
+      .select-box-kit {
         width: 100% !important; // Needs !important to override hard-coded value
         @media (max-width: $mobile-breakpoint) {
           width: 100% !important; // !important overrides hard-coded mobile width of 68px
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index b381960d5ee..241494a1d9c 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -15,7 +15,7 @@
     }
   }
 
-  .select-box {
+  .select-box-kit {
     align-self: center;
 
     &.categories-admin-dropdown, &.category-notifications-button, &.tag-notifications-button {
diff --git a/app/assets/stylesheets/common/base/combobox.scss b/app/assets/stylesheets/common/base/combobox.scss
deleted file mode 100644
index 08f1f155fdb..00000000000
--- a/app/assets/stylesheets/common/base/combobox.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-.select2-results .select2-highlighted {
-    background: $highlight-medium;
-    color: $primary;
-}
-
-.category-combobox, .select2-drop {
-
-  .badge-category {
-    display: inline-block;
-  }
-  .topic-count {
-    font-size: 11px;
-    color: $primary;
-    display: inline-block;
-  }
-  .highlighted .topic-count, .select2-highlighted .category-desc {
-    color: $primary;
-  }
-  .category-desc {
-    color: $primary;
-    font-size: 0.857em;
-    line-height: 16px;
-  }
-}
-
-.select2-drop {
-  background: $secondary;
-  .d-icon {
-    color: dark-light-choose($primary-medium, $secondary-medium);
-  }
-}
-
-.select2-search input {
-  background: image-url("select2.png") no-repeat 100% -22px, $secondary 0 0
-}
-
-.select2-container {
-  border-radius: 3px;
-  border: 1px solid $primary-low; 
-  min-width: 200px;
-
-  &.select2-dropdown-open {
-    border: 0;
-    margin-bottom: 2px;
-  }
-  &.select2-container-active {
-    border-color: $tertiary;
-  }
-  &.select2-container-disabled .select2-chosen {
-    color: blend-primary-secondary(50%);
-  }
-}
-
-.select2-container-multi .select2-choices {
-  background-color: $secondary;
-}
-.select2-container-multi .select2-choices .select2-search-field input.select2-active {
-  background: $secondary image-url("select2-spinner.gif") no-repeat 100% !important;
-}
-
-.select2-container a.select2-choice {
-  background: $secondary;
-  border-radius: 3px;
-  border-color: $secondary;
-  color: $primary;
-}
-
-.select2-dropdown-open a.select2-choice {
-  box-shadow: none;
-  border-radius: 3px 3px 0 0;
-  border-color: $tertiary;
-}
-.select2-drop {
-  color: $primary;
-}
-.select2-drop-active {
-  border: 1px solid $tertiary;
-  border-top: 0;
-}
-
-.select2-container-active {
-  box-shadow:  $tertiary 0px 0px 6px 0px;
-}
-
-.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit {
-  background: $secondary;
-  color: $primary;
-}
diff --git a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
index 3a9424ca478..f535f9a3f77 100644
--- a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
@@ -3,6 +3,10 @@
     max-height: none;
   }
 
+  .select-box-kit {
+    width: 50%;
+  }
+
   input.date-picker, input[type="time"] {
     width: 150px;
     text-align: left;
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index d782185c68a..b9f3e8b217f 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -17,7 +17,7 @@
 }
 
 .modal-header {
-  border-bottom: 1px solid $primary-low; 
+  border-bottom: 1px solid $primary-low;
 }
 
 .modal-backdrop {
@@ -74,6 +74,10 @@
   margin: 0 auto;
   background-color: $secondary;
   background-clip: padding-box;
+
+  .select-box-kit {
+    width: 220px;
+  }
 }
 
 .create-account.in .modal-inner-container,
@@ -102,7 +106,7 @@
 }
 .modal-footer {
   padding: 14px 15px 15px;
-  border-top: 1px solid $primary-low; 
+  border-top: 1px solid $primary-low;
 }
 .modal-footer:before,
 .modal-footer:after {
@@ -128,7 +132,7 @@
     li > a {
       font-size: 1em;
     }
-    border-bottom: 1px solid $primary-low; 
+    border-bottom: 1px solid $primary-low;
 
   }
 
@@ -359,7 +363,7 @@
       font-weight: bold;
     }
     &:focus {
-      outline: 2px solid $primary-low; 
+      outline: 2px solid $primary-low;
     }
   }
   .incoming-email-tabs {
@@ -370,7 +374,7 @@
     textarea, .incoming-email-html-part {
       height: 95%;
       border: none;
-      border-top: 1px solid $primary-low; 
+      border-top: 1px solid $primary-low;
       padding-top: 10px;
     }
     textarea {
diff --git a/app/assets/stylesheets/common/components/categories-admin-dropdown.scss b/app/assets/stylesheets/common/components/categories-admin-dropdown.scss
deleted file mode 100644
index de32ec0a6ff..00000000000
--- a/app/assets/stylesheets/common/components/categories-admin-dropdown.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.categories-admin-dropdown.categories-admin-dropdown.categories-admin-dropdown {
-  .select-box-body {
-    min-width: auto;
-    width: 250px;
-  }
-}
diff --git a/app/assets/stylesheets/common/components/category-select-box.scss b/app/assets/stylesheets/common/components/category-select-box.scss
deleted file mode 100644
index 58d303ac762..00000000000
--- a/app/assets/stylesheets/common/components/category-select-box.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.category-select-box.category-select-box {
-  .select-box-row {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: flex-start;
-        -ms-flex-align: flex-start;
-            align-items: flex-start;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-
-    &.is-uncategorized {
-      .topic-count {
-        display: none;
-      }
-    }
-
-    .topic-count {
-      font-size: 11px;
-      color: $primary;
-    }
-
-    .category-status {
-      color: $primary;
-      -webkit-box-flex: 0;
-          -ms-flex: 1 1 auto;
-              flex: 1 1 auto;
-    }
-
-    .category-desc {
-      -webkit-box-flex: 0;
-          -ms-flex: 1 1 auto;
-              flex: 1 1 auto;
-      color: #919191;
-      font-size: 0.857em;
-      line-height: 16px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/common/components/dropdown-select-box.scss b/app/assets/stylesheets/common/components/dropdown-select-box.scss
deleted file mode 100644
index 2172969ff94..00000000000
--- a/app/assets/stylesheets/common/components/dropdown-select-box.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.dropdown-select-box.dropdown-select-box {
-  display: inline-flex;
-  height: 30px;
-  min-width: auto;
-
-  &.is-expanded {
-    .collection,
-    .select-box-collection,
-    .select-box-body {
-      border-radius: 0;
-    }
-  }
-
-  .select-box-body {
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-    background-clip: padding-box;
-    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-    max-width: 300px;
-    width: 300px;
-  }
-
-  .select-box-row {
-    margin: 0;
-    padding: 10px 5px;
-
-    .icons {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      align-self: flex-start;
-      margin-right: 10px;
-      margin-top: 2px;
-      width: 30px;
-
-      .d-icon {
-        font-size: 1.286em;
-        align-self: center;
-        margin-right: 0;
-        opacity: 1;
-        color: dark-light-choose($primary-high, $secondary-medium);
-      }
-    }
-
-    .texts {
-      line-height: 18px;
-      flex: 1;
-      align-items: flex-start;
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: column;
-
-      .title {
-        flex: 1;
-        font-weight: bold;
-        display: block;
-        font-size: 1em;
-        color: $primary;
-        padding: 0;
-      }
-
-      .desc {
-        flex: 1;
-        font-size: 0.857em;
-        font-weight: normal;
-        color: dark-light-choose($primary-medium, $secondary-medium);;
-        white-space: normal;
-      }
-    }
-
-    &.is-highlighted {
-      background: $tertiary-low;
-    }
-
-    &:hover {
-      background: $highlight-medium;
-    }
-  }
-
-  .select-box-collection {
-    padding: 0;
-  }
-
-  .dropdown-header {
-    padding: 0;
-    border: 0;
-    outline: 0;
-    justify-content: flex-start;
-    background: none;
-
-    .d-icon + .d-icon {
-      margin-left: 5px;
-    }
-
-    .btn {
-      align-items: center;
-      justify-content: space-between;
-      flex-direction: row;
-      display: inline-flex;
-      height: 100%;
-      margin: 0;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/common/components/future-date-input-selector.scss b/app/assets/stylesheets/common/components/future-date-input-selector.scss
deleted file mode 100644
index 60bab06f26b..00000000000
--- a/app/assets/stylesheets/common/components/future-date-input-selector.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.future-date-input-selector-datetime {
-  float: right;
-  color: lighten($primary, 40%);
-  font-size: 13px;
-}
-
-.future-date-input-selector-icons {
-  margin-right: 10px;
-}
diff --git a/app/assets/stylesheets/common/components/notifications-button.scss b/app/assets/stylesheets/common/components/notifications-button.scss
deleted file mode 100644
index df613a7a048..00000000000
--- a/app/assets/stylesheets/common/components/notifications-button.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.notifications-button.notifications-button.notifications-button {
-  .select-box-body {
-    min-width: 550px;
-    max-width: 550px;
-  }
-
-  .select-box-row {
-    .icons {
-      align-self: flex-start;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/common/select-box-kit/categories-admin-dropdown.scss b/app/assets/stylesheets/common/select-box-kit/categories-admin-dropdown.scss
new file mode 100644
index 00000000000..9a7a2e522e9
--- /dev/null
+++ b/app/assets/stylesheets/common/select-box-kit/categories-admin-dropdown.scss
@@ -0,0 +1,12 @@
+.select-box-kit {
+  &.categories-admin-dropdown {
+    .select-box-kit-select-box-kit-body {
+      min-width: auto;
+      width: 250px;
+    }
+
+    .select-box-kit-header .d-icon {
+      justify-content: space-between;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-box-kit/category-chooser.scss b/app/assets/stylesheets/common/select-box-kit/category-chooser.scss
new file mode 100644
index 00000000000..e5f30989c07
--- /dev/null
+++ b/app/assets/stylesheets/common/select-box-kit/category-chooser.scss
@@ -0,0 +1,46 @@
+.select-box-kit {
+  &.combo-box {
+    &.category-chooser {
+      width: 300px;
+      .select-box-kit-row {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: flex-start;
+            -ms-flex-align: flex-start;
+                align-items: flex-start;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+
+        &.none {
+          .topic-count {
+            display: none;
+          }
+        }
+
+        .topic-count {
+          font-size: 11px;
+          color: $primary;
+        }
+
+        .category-status {
+          color: $primary;
+          -webkit-box-flex: 0;
+              -ms-flex: 1 1 auto;
+                  flex: 1 1 auto;
+        }
+
+        .category-desc {
+          -webkit-box-flex: 0;
+              -ms-flex: 1 1 auto;
+                  flex: 1 1 auto;
+          color: #919191;
+          font-size: 0.857em;
+          line-height: 16px;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-box-kit/combo-box.scss b/app/assets/stylesheets/common/select-box-kit/combo-box.scss
new file mode 100644
index 00000000000..2c93026e4bc
--- /dev/null
+++ b/app/assets/stylesheets/common/select-box-kit/combo-box.scss
@@ -0,0 +1,85 @@
+.select-box-kit {
+  &.combo-box {
+    border-radius: 3px;
+
+    .select-box-kit-body {
+      width: 100%;
+    }
+
+    .select-box-kit-row {
+      margin: 5px;
+      min-height: 1px;
+      padding: 5px;
+    }
+
+    .select-box-kit-filter {
+      line-height: 18px;
+      padding: 5px 10px;
+      border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+
+      .select-box-kit-filter-input {
+        margin-right: 5px;
+      }
+    }
+
+    .select-box-kit-header {
+      background: $secondary;
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-radius: 3px;
+      padding: 5px 10px;
+      font-weight: 500;
+      font-size: 1em;
+      line-height: 18px;
+
+      &.is-focused {
+        border: 1px solid $tertiary;
+        border-radius: 3px;
+        -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
+                box-shadow: $tertiary 0px 0px 6px 0px;
+      }
+    }
+
+    &.is-disabled {
+      .select-box-kit-header {
+        background: #e9e9e9;
+        border-color: #ddd;
+      }
+    }
+
+    &.is-highlighted {
+      .select-box-kit-header {
+        border: 1px solid $tertiary;
+        -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
+                box-shadow: $tertiary 0px 0px 6px 0px;
+      }
+    }
+
+    &.is-expanded {
+      .select-box-kit-wrapper {
+        display: block;
+        border: 1px solid $tertiary;
+        border-radius: 3px;
+        -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
+                box-shadow: $tertiary 0px 0px 6px 0px;
+      }
+
+      .select-box-kit-header {
+        border-radius: 3px 3px 0 0;
+        border-color: transparent;
+        -webkit-box-shadow: none;
+                box-shadow: none;
+      }
+
+      .select-box-kit-body {
+        border-radius: 3px 3px 0 0;
+      }
+    }
+
+    &.is-expanded.is-above {
+      .select-box-kit-header {
+        border-radius: 0 0 3px 3px;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-box-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-box-kit/dropdown-select-box.scss
new file mode 100644
index 00000000000..363af0d7958
--- /dev/null
+++ b/app/assets/stylesheets/common/select-box-kit/dropdown-select-box.scss
@@ -0,0 +1,153 @@
+.select-box-kit {
+  &.dropdown-select-box {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    min-width: auto;
+
+    &.is-expanded {
+      .select-box-kit-collection,
+      .select-box-kit-body {
+        border-radius: 0;
+      }
+    }
+
+    .select-box-kit-body {
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      background-clip: padding-box;
+      -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+              box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+      max-width: 300px;
+      width: 300px;
+    }
+
+    .select-box-kit-row {
+      margin: 0;
+      padding: 10px 5px;
+
+      .icons {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: start;
+            -ms-flex-align: start;
+                align-items: flex-start;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        -ms-flex-item-align: start;
+            align-self: flex-start;
+        margin-right: 10px;
+        margin-top: 2px;
+        width: 30px;
+
+        .d-icon {
+          font-size: 1.286em;
+          -ms-flex-item-align: center;
+              align-self: center;
+          margin-right: 0;
+          opacity: 1;
+          color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
+        }
+      }
+
+      .texts {
+        line-height: 18px;
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+        -webkit-box-align: start;
+            -ms-flex-align: start;
+                align-items: flex-start;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+
+        .name {
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+          font-weight: bold;
+          font-size: 1em;
+          color: $primary;
+          padding: 0;
+        }
+
+        .desc {
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+          font-size: 0.857em;
+          font-weight: normal;
+          color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));;
+          white-space: normal;
+        }
+      }
+
+      &.is-highlighted {
+        background: $tertiary-low;
+      }
+
+      &:hover {
+        background: $highlight-medium;
+      }
+    }
+
+    .select-box-kit-collection {
+      padding: 0;
+    }
+
+    .dropdown-select-box-header {
+      -webkit-box-sizing: border-box;
+         -moz-box-sizing: border-box;
+              box-sizing: border-box;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start;
+      background: none;
+      height: 30px;
+
+      &.is-focused {
+        .btn {
+          border: 1px solid $tertiary;
+          -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
+                  box-shadow: $tertiary 0px 0px 6px 0px;
+        }
+      }
+
+      .d-icon + .d-icon {
+        margin-left: 5px;
+        font-size: 1.143em;
+        line-height: 18px;
+      }
+
+      .btn {
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        -webkit-box-pack: justify;
+            -ms-flex-pack: justify;
+                justify-content: space-between;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        height: 100%;
+        margin: 0;
+        border: 1px solid transparent
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-box-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-box-kit/future-date-input-selector.scss
new file mode 100644
index 00000000000..60683bddc42
--- /dev/null
+++ b/app/assets/stylesheets/common/select-box-kit/future-date-input-selector.scss
@@ -0,0 +1,22 @@
+.select-box-kit {
+  &.combobox {
+    &.future-date-input-selector {
+      min-width: 50%;
+
+      .future-date-input-selector-datetime {
+        color: lighten($primary, 40%);
+        font-size: 13px;
+      }
+
+      .future-date-input-selector-icons {
+        width: 25px;
+      }
+
+      .future-date-input-selector-row {
+        .future-date-input-selector-icons {
+          color: lighten($primary, 40%);
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-box-kit/multi-combobox.scss b/app/assets/stylesheets/common/select-box-kit/multi-combobox.scss
new file mode 100644
index 00000000000..87235fa8f3a
--- /dev/null
+++ b/app/assets/stylesheets/common/select-box-kit/multi-combobox.scss
@@ -0,0 +1,131 @@
+.multi-combobox {
+  width: 300px;
+  background: $secondary;
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+
+  .select-box-kit-body {
+    width: 100%;
+  }
+
+  .select-box-kit-row {
+    margin: 5px;
+    min-height: 1px;
+    padding: 5px;
+  }
+
+  .select-box-kit-filter {
+    border-top: 1px solid $primary-low;
+  }
+
+  .select-box-kit-header {
+    background: $secondary;
+    border-bottom: 1px solid transparent;
+
+    &.is-focused {
+      border-bottom: 1px solid $primary-low;
+      box-shadow: $tertiary 0px 0px 6px 0px;
+    }
+  }
+
+  &.is-disabled {
+    .select-box-kit-header {
+      background: #e9e9e9;
+      border-color: #ddd;
+    }
+  }
+
+  &.is-highlighted {
+    .select-box-kit-header {
+      border: 1px solid $tertiary;
+      box-shadow: $tertiary 0px 0px 6px 0px;
+    }
+  }
+
+  &.is-expanded {
+    .select-box-kit-wrapper {
+      display: block;
+      border: 1px solid $tertiary;
+      box-shadow: $tertiary 0px 0px 6px 0px;
+    }
+
+    .select-box-kit-header {
+      border-radius: 3px 3px 0 0;
+    }
+
+    .select-box-kit-body {
+      border-radius: 3px 3px 0 0;
+    }
+  }
+
+  .choices {
+    list-style: none;
+    margin: 0;
+    padding: 5px;
+  }
+
+  .choice-placeholder {
+    padding: 0 5px;
+    margin: 2px 0;
+    border: 1px solid transparent;
+    display: inline-flex;
+    flex: 1;
+  }
+
+  .filter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  .select-box-kit-filter-input, .select-box-kit-filter-input:focus {
+    border: none;
+    background: none;
+    display: inline-block;
+    width: 100%;
+    outline: none;
+    min-width: auto;
+    padding: 0;
+    margin: 0;
+    outline: 0;
+    border: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  .selected-name {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 5px;
+    margin: 2px 0;
+    color: $primary;
+    cursor: default;
+    border: 1px solid $primary-medium;
+    border-radius: 3px;
+    box-shadow: 0 0 2px $secondary inset, 0 1px 0 rgba(0,0,0,0.05);
+    background-clip: padding-box;
+    -webkit-touch-callout: none;
+    user-select: none;
+    background-color: $primary-low;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+
+    .d-icon {
+      margin-right: 5px;
+      color: $primary-medium;
+      cursor: pointer;
+      font-size: 12px;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-box-kit/notifications-button.scss b/app/assets/stylesheets/common/select-box-kit/notifications-button.scss
new file mode 100644
index 00000000000..877cf815ab8
--- /dev/null
+++ b/app/assets/stylesheets/common/select-box-kit/notifications-button.scss
@@ -0,0 +1,17 @@
+.select-box-kit {
+  &.dropdown-select-box {
+    &.notifications-button {
+      .select-box-kit-body {
+        min-width: 550px;
+        max-width: 550px;
+      }
+
+      .select-box-kit-row {
+        .icons {
+          -ms-flex-item-align: start;
+              align-self: flex-start;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/components/pinned-button.scss b/app/assets/stylesheets/common/select-box-kit/pinned-button.scss
similarity index 56%
rename from app/assets/stylesheets/common/components/pinned-button.scss
rename to app/assets/stylesheets/common/select-box-kit/pinned-button.scss
index 642db6e4832..a75a596c6a3 100644
--- a/app/assets/stylesheets/common/components/pinned-button.scss
+++ b/app/assets/stylesheets/common/select-box-kit/pinned-button.scss
@@ -19,18 +19,26 @@
 }
 
 .pinned-button {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin: 0;
   min-width: auto;
 
   .pinned-options {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
     display: inline-flex;
   }
 
-  .pinned-options.pinned-options.pinned-options {
-    .select-box-body {
+  .pinned-options {
+    .select-box-kit-body {
       min-width: unset;
       max-width: unset;
       width: 550px;
diff --git a/app/assets/stylesheets/common/components/select-box.scss b/app/assets/stylesheets/common/select-box-kit/select-box-kit.scss
similarity index 62%
rename from app/assets/stylesheets/common/components/select-box.scss
rename to app/assets/stylesheets/common/select-box-kit/select-box-kit.scss
index 6cbf831bad1..56ccf609ab8 100644
--- a/app/assets/stylesheets/common/components/select-box.scss
+++ b/app/assets/stylesheets/common/select-box-kit/select-box-kit.scss
@@ -1,9 +1,9 @@
-.mobile-view .select-box.is-expanded {
+.mobile-view .select-box-kit.is-expanded {
   z-index: 1000;
 }
 
-.select-box {
-  border-radius: 3px;
+.select-box-kit {
+  min-width: 220px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: inline-block;
@@ -12,29 +12,25 @@
       -ms-flex-direction: column;
           flex-direction: column;
   position: relative;
-  height: 34px;
-  min-width: 220px;
+  vertical-align: middle;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 
   &.is-hidden {
     display: none;
   }
 
-  &.small {
-    height: 28px;
+  &.is-disabled {
+    pointer-events: none;
   }
 
   &.is-expanded {
     z-index: 999;
 
-    .select-box-wrapper {
-      border: 1px solid $tertiary;
-      border-radius: 3px;
-      -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
-              box-shadow: $tertiary 0px 0px 6px 0px;
-    }
-
-    .select-box-body {
-      border-radius: 3px 3px 0 0;
+    .select-box-kit-body {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
@@ -47,36 +43,18 @@
       top: 0;
     }
 
-    .collection, {
+    .select-box-kit-collection, {
       border-radius: inherit;
     }
-
-    .select-box-header {
-      border-radius: 3px 3px 0 0;
-    }
-
-    &.is-above {
-      .select-box-header {
-        border-radius: 0 0 3px 3px;
-      }
-    }
-  }
-
-  &.is-highlighted {
-    .select-box-header {
-      border: 1px solid $tertiary;
-      -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
-              box-shadow: $tertiary 0px 0px 6px 0px;
-    }
   }
 
   &.is-above {
-    .select-box-body {
+    .select-box-kit-body {
       bottom: 0;
       top: auto;
     }
 
-    .select-box-wrapper {
+    .select-box-kit-wrapper {
       bottom: 0;
       top: auto;
     }
@@ -86,14 +64,14 @@
     opacity: 0.7;
   }
 
-  .select-box-header {
-    background: $secondary;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-    border-radius: 3px;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+  .select-box-kit-header {
+    -webkit-transition: all .25s;
+    -o-transition: all .25s;
+    transition: all .25s;
     cursor: pointer;
     outline: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -106,28 +84,25 @@
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
-    padding-left: 10px;
-    padding-right: 10px;
-    height: inherit;
 
-    &.is-focused {
-      border: 1px solid $tertiary;
-      border-radius: 3px;
-      -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
-              box-shadow: $tertiary 0px 0px 6px 0px;
-    }
-
-    .current-selection {
+    .selected-name {
       text-align: left;
-      -webkit-box-flex: 1;
-          -ms-flex: 1;
-              flex: 1;
-      text-overflow: ellipsis;
+      -webkit-box-flex: 10;
+          -ms-flex: 10;
+              flex: 10;
+      -o-text-overflow: ellipsis;
+         text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       color: inherit;
     }
 
+    .btn-clear {
+      padding: 0px 10px;
+      border: 0;
+      background: none;
+    }
+
     .icon {
       margin-right: 5px;
     }
@@ -138,8 +113,12 @@
     }
 
     .d-button-label {
+      display: -webkit-box;
+      display: -ms-flexbox;
       display: flex;
-      align-items: center;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
       white-space: nowrap;
       overflow: hidden;
 
@@ -150,30 +129,32 @@
     }
   }
 
-  .select-box-body {
+  .select-box-kit-body {
     display: none;
-    width: 100%;
     background: $secondary;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
   }
 
-  .select-box-row {
-    margin: 5px;
-    min-height: 1px;
+  .select-box-kit-row {
     cursor: pointer;
     outline: none;
-    padding: 5px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    align-items: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     -webkit-box-pack: start;
         -ms-flex-pack: start;
             justify-content: flex-start;
 
-    .text {
+    .name {
       margin: 0;
+      overflow: hidden;
+      -o-text-overflow: ellipsis;
+         text-overflow: ellipsis;
+      flex: 10;
     }
 
     .d-icon {
@@ -191,34 +172,25 @@
     &.is-selected.is-highlighted {
       background: $tertiary-low;
     }
+
+    &.none:not(.is-highlighted) {
+      background: $primary-low;
+    }
   }
 
-  .select-box-collection {
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-flex: 0;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+  .select-box-kit-collection {
     background: $secondary;
     overflow-x: hidden;
     overflow-y: auto;
     border-radius: inherit;
-    margin: 0;
-    padding: 0;
     -webkit-overflow-scrolling: touch;
+    margin: 0;
 
-    .collection {
+    .select-box-kit-collection {
       padding: 0;
       margin: 0;
 
-      &:hover .select-box-row.is-highlighted:hover {
+      &:hover .select-box-kit-row.is-highlighted:hover {
         background: $tertiary-low;
       }
     }
@@ -240,9 +212,7 @@
     }
   }
 
-  .select-box-filter {
-    border-bottom: 1px solid $primary-low;
-    background: $secondary;
+  .select-box-kit-filter {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -252,24 +222,38 @@
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
-    padding: 0 10px;
 
-    .filter-query, .filter-query:focus, .filter-query:active {
+    .select-box-kit-filter-input, .select-box-kit-filter-input:focus, .select-box-kit-filter-input:active {
       background: none;
       margin: 0;
+      padding: 0;
       -webkit-box-flex: 1;
           -ms-flex: 1;
               flex: 1;
       outline: none;
       border: 0;
+      border-radius: 0;
       -webkit-box-shadow: none;
               box-shadow: none;
       width: 100%;
-      padding: 5px 0;
+    }
+
+    &.is-hidden {
+      clip: rect(0 0 0 0);
+      width: 1px;
+      height: 1px;
+      border: 0;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      position: fixed;
+      outline: 0;
+      left: 0px;
+      top: 0px;
     }
   }
 
-  .select-box-wrapper {
+  .select-box-kit-wrapper {
     position: absolute;
     top: 0;
     left: 0;
@@ -281,7 +265,7 @@
     border: 1px solid transparent;
   }
 
-  .select-box-offscreen, .select-box .select-box-offscreen:focus {
+  .select-box-kit-offscreen, .select-box-kit-offscreen:focus {
     clip: rect(0 0 0 0);
     width: 1px;
     height: 1px;
@@ -289,7 +273,7 @@
     margin: 0;
     padding: 0;
     overflow: hidden;
-    position: absolute;
+    position: fixed;
     outline: 0;
     left: 0px;
     top: 0px;
diff --git a/app/assets/stylesheets/common/components/topic-notifications-button.scss b/app/assets/stylesheets/common/select-box-kit/topic-notifications-button.scss
similarity index 58%
rename from app/assets/stylesheets/common/components/topic-notifications-button.scss
rename to app/assets/stylesheets/common/select-box-kit/topic-notifications-button.scss
index cf9f0819904..c9a994089bf 100644
--- a/app/assets/stylesheets/common/components/topic-notifications-button.scss
+++ b/app/assets/stylesheets/common/select-box-kit/topic-notifications-button.scss
@@ -19,12 +19,20 @@
 }
 
 .topic-notifications-button {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
   display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin: 0;
 
   .topic-notifications-options {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
     display: inline-flex;
   }
 }
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index c673cb913cb..ea905523cd0 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -239,10 +239,14 @@
       position: relative;
       display: inline-block;
 
-      .category-input .category-select-box {
+      .category-input .category-chooser {
         width: 430px;
         @include medium-width { width: 285px; }
         @include small-width { width: 220px; }
+
+        .select-box-kit-header {
+          padding: 7px 10px;
+        }
       }
     }
     .edit-reason-input {
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index ddede9fca82..58ec3a04655 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -16,7 +16,7 @@
   height: auto;
   margin: -250px 0 0 -305px;
   background-color: $secondary;
-  border: 1px solid $primary-low; 
+  border: 1px solid $primary-low;
 
   box-shadow: 0 3px 7px rgba(0,0,0, .8);
   background-clip: padding-box;
@@ -70,8 +70,8 @@
 }
 
 .modal {
-  .category-select-box {
-    width: 430px;
+  .category-chooser {
+    width: 50%;
   }
 
   .category-combobox {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index a55c8363475..8a24d21d2f6 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -26,7 +26,7 @@
     margin-top: 6px;
     margin-right: 6px;
   }
-  #edit-title, .category-select-box {
+  #edit-title, .category-chooser {
     width: 500px;
   }
   h1 {
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 45664c752be..00ff9c9c736 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -149,7 +149,7 @@ input[type=radio], input[type=checkbox] {
       .category-input {
         margin-top: 3px;
 
-        .category-select-box {
+        .category-chooser {
           width: 100%;
         }
       }
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 8b00bd6cd23..806ab8cb1a7 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -53,7 +53,7 @@
     }
   }
 
-  .select-box {
+  .select-box-kit {
     &.categories-admin-dropdown, &.category-notifications-button, &.tag-notifications-button {
       margin-top: 5px;
     }
@@ -152,9 +152,9 @@
 
   tbody {
     tr {
-      border-bottom: 1px solid $primary-low; 
+      border-bottom: 1px solid $primary-low;
       &:first-of-type {
-        border-top: 3px solid $primary-low; 
+        border-top: 3px solid $primary-low;
       }
     }
     .category {
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 6b292ff8fa0..4886a6f2a31 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -194,7 +194,7 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
     margin-top: 8px;
     width: 95% !important;
   }
-  .category-select-box {
+  .category-chooser {
     margin-top: 8px;
     width: 95%;
   }
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 922f5afe5db..7d84bb53aef 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -2,6 +2,9 @@
 @import "vendor/font_awesome/font-awesome";
 @import "vendor/select2";
 @import "vendor/sweetalert";
+@import "common/foundation/colors";
+@import "common/foundation/variables";
+@import "common/select-box-kit/*";
 
 body.wizard {
   background-color: #fff;
@@ -479,18 +482,18 @@ body.wizard {
 }
 
 /* fix wizard for mobile -- iPhone 5 default width */
-@media only screen and (max-device-width: 568px) {  
+@media only screen and (max-device-width: 568px) {
   h1 { font-size: 1.3em !important; }
   .wizard-column { margin: auto !important; }
   .wizard-step-contents { min-height: auto !important; }
   .wizard-step-banner { width: 100% !important; margin-bottom: 1em !important; }
   .select2-container { width: 100% !important; }
   .wizard-step-footer { display: block !important; }
-  .wizard-progress { margin-bottom: 10px !important; }  
+  .wizard-progress { margin-bottom: 10px !important; }
   .wizard-buttons { text-align: right !important; }
   .wizard-footer { display: none !important; }
   .wizard-field { margin-bottom: 1em !important; }
-  .wizard-step-description { margin-bottom: 1em !important; }  
+  .wizard-step-description { margin-bottom: 1em !important; }
   .wizard-column-contents { padding: 1em !important; }
   .emoji-preview img { width: 16px !important; height: 16px !important; }
   .invite-list .new-user { flex-direction: column !important; align-items: inherit !important; }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 422283e4008..82db49a2ed5 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1567,7 +1567,7 @@ en:
         public_timer_types: Topic Timers
         private_timer_types: User Topic Timers
       auto_update_input:
-        none: ""
+        none: "Select a timeframe"
         later_today: "Later today"
         tomorrow: "Tomorrow"
         later_this_week: "Later this week"
diff --git a/plugins/discourse-narrative-bot/public/public b/plugins/discourse-narrative-bot/public/public
new file mode 120000
index 00000000000..4171325404b
--- /dev/null
+++ b/plugins/discourse-narrative-bot/public/public
@@ -0,0 +1 @@
+/Users/joffreyjaffeux/Projects/pr-discourse/plugins/discourse-narrative-bot/public
\ No newline at end of file
diff --git a/test/javascripts/acceptance/admin-suspend-user-test.js.es6 b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
index b122e5a8267..4c3d43feeb3 100644
--- a/test/javascripts/acceptance/admin-suspend-user-test.js.es6
+++ b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
@@ -43,8 +43,9 @@ QUnit.test("suspend, then unsuspend a user", assert => {
 
   andThen(() => {
     assert.equal(find('.perform-suspend[disabled]').length, 1, 'disabled by default');
-    find('.suspend-until .combobox').select2('val', 'tomorrow');
-    find('.suspend-until .combobox').trigger('change', 'tomorrow');
+
+    expandSelectBox('.suspend-until .combobox');
+    selectBoxSelectRow('tomorrow', { selector: '.suspend-until .combobox'});
   });
 
   fillIn('.suspend-reason', "for breaking the rules");
@@ -63,4 +64,3 @@ QUnit.test("suspend, then unsuspend a user", assert => {
     assert.ok(!exists('.suspension-info'));
   });
 });
-
diff --git a/test/javascripts/acceptance/category-select-box-test.js.es6 b/test/javascripts/acceptance/category-chooser-test.js.es6
similarity index 60%
rename from test/javascripts/acceptance/category-select-box-test.js.es6
rename to test/javascripts/acceptance/category-chooser-test.js.es6
index 7d8b9157778..de39c870945 100644
--- a/test/javascripts/acceptance/category-select-box-test.js.es6
+++ b/test/javascripts/acceptance/category-chooser-test.js.es6
@@ -1,6 +1,6 @@
 import { acceptance } from "helpers/qunit-helpers";
 
-acceptance("CategorySelectBox", {
+acceptance("CategoryChooser", {
   loggedIn: true,
   settings: {
     allow_uncategorized_topics: false
@@ -11,9 +11,10 @@ QUnit.test("does not display uncategorized if not allowed", assert => {
   visit("/");
   click('#create-topic');
 
-  click(".category-select-box .select-box-header");
+  expandSelectBox('.category-chooser');
+
   andThen(() => {
-    assert.ok(!exists('.category-select-box .select-box-row[title="uncategorized"]'));
+    assert.ok(selectBox('.category-chooser').rowByIndex(0).name() !== 'uncategorized');
   });
 });
 
@@ -21,6 +22,6 @@ QUnit.test("prefill category when category_id is set", assert => {
   visit("/new-topic?category_id=1");
 
   andThen(() => {
-    assert.equal(find('.category-select-box .current-selection').html().trim(), "bug");
+    assert.equal(selectBox('.category-chooser').header.name(), 'bug');
   });
 });
diff --git a/test/javascripts/acceptance/category-edit-test.js.es6 b/test/javascripts/acceptance/category-edit-test.js.es6
index 24c2ada061b..d3a99c3a35e 100644
--- a/test/javascripts/acceptance/category-edit-test.js.es6
+++ b/test/javascripts/acceptance/category-edit-test.js.es6
@@ -75,9 +75,9 @@ QUnit.test("Subcategory list settings", assert => {
 
   click('.edit-category-general');
 
-  expandSelectBox('.edit-category-tab-general .category-select-box');
+  expandSelectBox('.edit-category-tab-general .category-chooser');
 
-  selectBoxSelectRow(3, {selector: '.edit-category-tab-general .category-select-box'});
+  selectBoxSelectRow(3, {selector: '.edit-category-tab-general .category-chooser'});
 
   click('.edit-category-settings');
   andThen(() => {
diff --git a/test/javascripts/acceptance/category-hashtag-test.js.es6 b/test/javascripts/acceptance/category-hashtag-test.js.es6
index 813578712c7..bd410abc18d 100644
--- a/test/javascripts/acceptance/category-hashtag-test.js.es6
+++ b/test/javascripts/acceptance/category-hashtag-test.js.es6
@@ -16,4 +16,4 @@ QUnit.test("category hashtag is cooked properly", assert => {
   andThen(() => {
     assert.equal(find('.topic-post:last .cooked p').html().trim(), "this is a category hashtag <a href=\"/c/bugs\" class=\"hashtag\">#<span>bug</span></a>");
   });
-});
\ No newline at end of file
+});
diff --git a/test/javascripts/acceptance/queued-posts-test.js.es6 b/test/javascripts/acceptance/queued-posts-test.js.es6
index d3a561c71e4..8c41899fc04 100644
--- a/test/javascripts/acceptance/queued-posts-test.js.es6
+++ b/test/javascripts/acceptance/queued-posts-test.js.es6
@@ -20,7 +20,7 @@ QUnit.test("For topics: body of post, title, category and tags are all editbale"
   andThen(() => {
     assert.ok(exists(".d-editor-container"), "the body should be editable");
     assert.ok(exists(".edit-title .ember-text-field"), "the title should be editable");
-    assert.ok(exists(".category-select-box"), "category should be editbale");
+    assert.ok(exists(".category-chooser"), "category should be editbale");
     assert.ok(exists(".tag-chooser"), "tags should be editable");
   });
 });
@@ -41,7 +41,7 @@ QUnit.test("For replies: only the body of post is editbale", assert => {
   andThen(() => {
     assert.ok(exists(".d-editor-container"), "the body should be editable");
     assert.notOk(exists(".edit-title .ember-text-field"), "title should not be editbale");
-    assert.notOk(exists(".category-select-box"), "category should not be editable");
+    assert.notOk(exists(".category-chooser"), "category should not be editable");
     assert.notOk(exists("div.tag-chooser"), "tags should not be editable");
   });
 });
diff --git a/test/javascripts/acceptance/search-full-test.js.es6 b/test/javascripts/acceptance/search-full-test.js.es6
index a7f480df9c2..b64ca86dec4 100644
--- a/test/javascripts/acceptance/search-full-test.js.es6
+++ b/test/javascripts/acceptance/search-full-test.js.es6
@@ -256,11 +256,13 @@ QUnit.test("update in filter through advanced search ui", assert => {
   visit("/search");
   fillIn('.search input.full-page-search', 'none');
   click('.search-advanced-btn');
-  selectDropdown('.search-advanced-options #s2id_in', 'bookmarks');
-  fillIn('.search-advanced-options #in', 'bookmarks');
+
+  expandSelectBox('.search-advanced-options .select-box-kit#in');
+  selectBoxSelectRow('bookmarks', { selector: '.search-advanced-options .select-box-kit#in' });
+  fillIn('.search-advanced-options .select-box-kit#in', 'bookmarks');
 
   andThen(() => {
-    assert.ok(exists('.search-advanced-options #s2id_in .select2-choice .select2-chosen:contains("I\'ve bookmarked")'), 'has "I\'ve bookmarked" populated');
+    assert.ok(exists(selectBox('.search-advanced-options .select-box-kit#in').rowByName("I\'ve bookmarked").el), 'has "I\'ve bookmarked" populated');
     assert.equal(find('.search input.full-page-search').val(), "none in:bookmarks", 'has updated search term to "none in:bookmarks"');
   });
 });
@@ -269,11 +271,12 @@ QUnit.test("update status through advanced search ui", assert => {
   visit("/search");
   fillIn('.search input.full-page-search', 'none');
   click('.search-advanced-btn');
-  selectDropdown('.search-advanced-options #s2id_status', 'closed');
-  fillIn('.search-advanced-options #status', 'closed');
+  expandSelectBox('.search-advanced-options .select-box-kit#status');
+  selectBoxSelectRow('closed', { selector: '.search-advanced-options .select-box-kit#status' });
+  fillIn('.search-advanced-options .select-box-kit#status', 'closed');
 
   andThen(() => {
-    assert.ok(exists('.search-advanced-options #s2id_status .select2-choice .select2-chosen:contains("are closed")'), 'has "are closed" populated');
+    assert.ok(exists(selectBox('.search-advanced-options .select-box-kit#status').rowByName("are closed").el), 'has "are closed" populated');
     assert.equal(find('.search input.full-page-search').val(), "none status:closed", 'has updated search term to "none status:closed"');
   });
 });
@@ -283,11 +286,12 @@ QUnit.test("update post time through advanced search ui", assert => {
   fillIn('.search input.full-page-search', 'none');
   click('.search-advanced-btn');
   fillIn('#search-post-date', '2016-10-05');
-  selectDropdown('.search-advanced-options #s2id_postTime', 'after');
-  fillIn('.search-advanced-options #postTime', 'after');
+  expandSelectBox('.search-advanced-options .select-box-kit#postTime');
+  selectBoxSelectRow('after', { selector: '.search-advanced-options .select-box-kit#postTime' });
+  fillIn('.search-advanced-options .select-box-kit#postTime', 'after');
 
   andThen(() => {
-    assert.ok(exists('.search-advanced-options #s2id_postTime .select2-choice .select2-chosen:contains("after")'), 'has "after" populated');
+    assert.ok(exists(selectBox('.search-advanced-options .select-box-kit#postTime').rowByName("after").el), 'has "after" populated');
     assert.equal(find('.search-advanced-options #search-post-date').val(), "2016-10-05", 'has "2016-10-05" populated');
     assert.equal(find('.search input.full-page-search').val(), "none after:2016-10-05", 'has updated search term to "none after:2016-10-05"');
   });
diff --git a/test/javascripts/acceptance/search-test.js.es6 b/test/javascripts/acceptance/search-test.js.es6
index 346c53b7236..c449d17ccce 100644
--- a/test/javascripts/acceptance/search-test.js.es6
+++ b/test/javascripts/acceptance/search-test.js.es6
@@ -89,18 +89,20 @@ QUnit.test("Search with context", assert => {
 QUnit.test("Right filters are shown to anonymous users", assert => {
   visit("/search?expanded=true");
 
-  andThen(() => {
-    assert.ok(exists('select#in option[value=first]'));
-    assert.ok(exists('select#in option[value=pinned]'));
-    assert.ok(exists('select#in option[value=unpinned]'));
-    assert.ok(exists('select#in option[value=wiki]'));
-    assert.ok(exists('select#in option[value=images]'));
+  expandSelectBox(".select-box-kit#in");
 
-    assert.notOk(exists('select#in option[value=unseen]'));
-    assert.notOk(exists('select#in option[value=posted]'));
-    assert.notOk(exists('select#in option[value=watching]'));
-    assert.notOk(exists('select#in option[value=tracking]'));
-    assert.notOk(exists('select#in option[value=bookmarks]'));
+  andThen(() => {
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=first]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=pinned]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=unpinned]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=wiki]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=images]'));
+
+    assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=unseen]'));
+    assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=posted]'));
+    assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=watching]'));
+    assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=tracking]'));
+    assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=bookmarks]'));
 
     assert.notOk(exists('.search-advanced-options .in-likes'));
     assert.notOk(exists('.search-advanced-options .in-private'));
@@ -113,18 +115,20 @@ QUnit.test("Right filters are shown to logged-in users", assert => {
   Discourse.reset();
   visit("/search?expanded=true");
 
-  andThen(() => {
-    assert.ok(exists('select#in option[value=first]'));
-    assert.ok(exists('select#in option[value=pinned]'));
-    assert.ok(exists('select#in option[value=unpinned]'));
-    assert.ok(exists('select#in option[value=wiki]'));
-    assert.ok(exists('select#in option[value=images]'));
+  expandSelectBox(".select-box-kit#in");
 
-    assert.ok(exists('select#in option[value=unseen]'));
-    assert.ok(exists('select#in option[value=posted]'));
-    assert.ok(exists('select#in option[value=watching]'));
-    assert.ok(exists('select#in option[value=tracking]'));
-    assert.ok(exists('select#in option[value=bookmarks]'));
+  andThen(() => {
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=first]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=pinned]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=unpinned]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=wiki]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=images]'));
+
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=unseen]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=posted]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=watching]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=tracking]'));
+    assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=bookmarks]'));
 
     assert.ok(exists('.search-advanced-options .in-likes'));
     assert.ok(exists('.search-advanced-options .in-private'));
diff --git a/test/javascripts/acceptance/topic-notifications-button-test.js.es6 b/test/javascripts/acceptance/topic-notifications-button-test.js.es6
index 6585b4b206b..353ac651501 100644
--- a/test/javascripts/acceptance/topic-notifications-button-test.js.es6
+++ b/test/javascripts/acceptance/topic-notifications-button-test.js.es6
@@ -23,17 +23,18 @@ QUnit.test("Updating topic notification level", assert => {
 
   andThen(() => {
     assert.ok(
-      exists(`${notificationOptions} .tracking`),
+      exists(`${notificationOptions}`),
       "it should display the notification options button in the topic's footer"
     );
   });
 
-  click(`${notificationOptions} .tracking`);
-  click(`${notificationOptions} .select-box-collection .select-box-row[title=Tracking]`);
+  expandSelectBox(notificationOptions);
+  selectBoxSelectRow("3", { selector: notificationOptions});
 
   andThen(() => {
-    assert.ok(
-      exists(`${notificationOptions} .watching`),
+    assert.equal(
+      selectBox(notificationOptions).selectedRow.name(),
+      "watching",
       "it should display the right notification level"
     );
 
diff --git a/test/javascripts/acceptance/topic-test.js.es6 b/test/javascripts/acceptance/topic-test.js.es6
index 530ea1cad35..b1f7d80d6d5 100644
--- a/test/javascripts/acceptance/topic-test.js.es6
+++ b/test/javascripts/acceptance/topic-test.js.es6
@@ -53,9 +53,9 @@ QUnit.test("Updating the topic title and category", assert => {
 
   fillIn('#edit-title', 'this is the new title');
 
-  expandSelectBox('.title-wrapper .category-select-box');
+  expandSelectBox('.title-wrapper .category-chooser');
 
-  selectBoxSelectRow(4, {selector: '.title-wrapper .category-select-box'});
+  selectBoxSelectRow(4, {selector: '.title-wrapper .category-chooser'});
 
   click('#topic-title .submit-edit');
 
@@ -103,7 +103,7 @@ QUnit.test("Reply as new topic", assert => {
       "it fills composer with the ring string"
     );
     assert.equal(
-      selectBox('.category-select-box').header.text(), "feature",
+      selectBox('.category-chooser').header.name(), "feature",
       "it fills category selector with the right category"
     );
   });
diff --git a/test/javascripts/components/categories-admin-dropdown-test.js.es6 b/test/javascripts/components/categories-admin-dropdown-test.js.es6
new file mode 100644
index 00000000000..9816850677d
--- /dev/null
+++ b/test/javascripts/components/categories-admin-dropdown-test.js.es6
@@ -0,0 +1,19 @@
+import componentTest from 'helpers/component-test';
+moduleForComponent('categories-admin-dropdown', {integration: true});
+
+componentTest('default', {
+  template: '{{categories-admin-dropdown}}',
+
+  test(assert) {
+    const $selectBox = selectBox('.categories-admin-dropdown');
+
+    assert.equal($selectBox.el.find(".d-icon-bars").length, 1);
+    assert.equal($selectBox.el.find(".d-icon-caret-down").length, 1);
+
+    expandSelectBox('.categories-admin-dropdown');
+
+    andThen(() => {
+      assert.equal($selectBox.rowByValue("create").name(), "New Category");
+    });
+  }
+});
diff --git a/test/javascripts/components/category-chooser-test.js.es6 b/test/javascripts/components/category-chooser-test.js.es6
new file mode 100644
index 00000000000..f5ebfe2685c
--- /dev/null
+++ b/test/javascripts/components/category-chooser-test.js.es6
@@ -0,0 +1,139 @@
+import componentTest from 'helpers/component-test';
+
+moduleForComponent('category-chooser', {integration: true});
+
+componentTest('with value', {
+  template: '{{category-chooser value=2}}',
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "feature");
+    });
+  }
+});
+
+componentTest('with excludeCategoryId', {
+  template: '{{category-chooser excludeCategoryId=2}}',
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').rowByValue(2).el.length, 0);
+    });
+  }
+});
+
+componentTest('with scopedCategoryId', {
+  template: '{{category-chooser scopedCategoryId=2}}',
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').rowByIndex(0).name(), "feature");
+      assert.equal(selectBox('.category-chooser').rowByIndex(1).name(), "spec");
+      assert.equal(selectBox('.category-chooser').el.find(".select-box-kit-row").length, 2);
+    });
+  }
+});
+
+componentTest('with allowUncategorized=null', {
+  template: '{{category-chooser allowUncategorized=null}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = false;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "Select a category&hellip;");
+    });
+  }
+});
+
+componentTest('with allowUncategorized=null rootNone=true', {
+  template: '{{category-chooser allowUncategorized=null rootNone=true}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = false;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "Select a category&hellip;");
+    });
+  }
+});
+
+componentTest('with disallowed uncategorized, rootNone and rootNoneLabel', {
+  template: '{{category-chooser allowUncategorized=null rootNone=true rootNoneLabel="test.root"}}',
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {root: 'root none label'};
+    this.siteSettings.allow_uncategorized_topics = false;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "Select a category&hellip;");
+    });
+  }
+});
+
+componentTest('with allowed uncategorized', {
+  template: '{{category-chooser allowUncategorized=true}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = true;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "uncategorized");
+    });
+  }
+});
+
+componentTest('with allowed uncategorized and rootNone', {
+  template: '{{category-chooser allowUncategorized=true rootNone=true}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = true;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "(no category)");
+    });
+  }
+});
+
+componentTest('with allowed uncategorized rootNone and rootNoneLabel', {
+  template: '{{category-chooser allowUncategorized=true rootNone=true rootNoneLabel="test.root"}}',
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {root: 'root none label'};
+    this.siteSettings.allow_uncategorized_topics = true;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "root none label");
+    });
+  }
+});
diff --git a/test/javascripts/components/combo-box-test.js.es6 b/test/javascripts/components/combo-box-test.js.es6
index 285d817e3a7..40e2b916fee 100644
--- a/test/javascripts/components/combo-box-test.js.es6
+++ b/test/javascripts/components/combo-box-test.js.es6
@@ -1,74 +1,173 @@
 import componentTest from 'helpers/component-test';
 moduleForComponent('combo-box', {integration: true});
 
-componentTest('with objects', {
-  template: '{{combo-box content=items value=value}}',
+componentTest('default', {
+  template: '{{combo-box content=items}}',
   beforeEach() {
     this.set('items', [{id: 1, name: 'hello'}, {id: 2, name: 'world'}]);
   },
 
   test(assert) {
-    assert.equal(this.get('value'), 1);
-    assert.ok(this.$('.combobox').length);
-    assert.equal(this.$("select option[value='1']").text(), 'hello');
-    assert.equal(this.$("select option[value='2']").text(), 'world');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(1).name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(2).name(), "world");
+    });
   }
 });
 
-componentTest('with objects and valueAttribute', {
+componentTest('with valueAttribute', {
   template: '{{combo-box content=items valueAttribute="value"}}',
   beforeEach() {
     this.set('items', [{value: 0, name: 'hello'}, {value: 1, name: 'world'}]);
   },
 
   test(assert) {
-    assert.ok(this.$('.combobox').length);
-    assert.equal(this.$("select option[value='0']").text(), 'hello');
-    assert.equal(this.$("select option[value='1']").text(), 'world');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
+    });
   }
 });
 
-componentTest('with an array', {
+componentTest('with nameProperty', {
+  template: '{{combo-box content=items nameProperty="text"}}',
+  beforeEach() {
+    this.set('items', [{id: 0, text: 'hello'}, {id: 1, text: 'world'}]);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
+    });
+  }
+});
+
+componentTest('with an array as content', {
   template: '{{combo-box content=items value=value}}',
   beforeEach() {
     this.set('items', ['evil', 'trout', 'hat']);
   },
 
   test(assert) {
-    assert.equal(this.get('value'), 'evil');
-    assert.ok(this.$('.combobox').length);
-    assert.equal(this.$("select option[value='evil']").text(), 'evil');
-    assert.equal(this.$("select option[value='trout']").text(), 'trout');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').rowByValue('evil').name(), "evil");
+      assert.equal(selectBox('.combobox').rowByValue('trout').name(), "trout");
+    });
   }
 });
 
-componentTest('with none', {
+componentTest('with value and none as a string', {
   template: '{{combo-box content=items none="test.none" value=value}}',
   beforeEach() {
     I18n.translations[I18n.locale].js.test = {none: 'none'};
     this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', 'trout');
   },
 
   test(assert) {
-    assert.equal(this.$("select option:eq(0)").text(), 'none');
-    assert.equal(this.$("select option:eq(0)").val(), '');
-    assert.equal(this.$("select option:eq(1)").text(), 'evil');
-    assert.equal(this.$("select option:eq(2)").text(), 'trout');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').noneRow.name(), 'none');
+      assert.equal(selectBox('.combobox').rowByValue("evil").name(), "evil");
+      assert.equal(selectBox('.combobox').rowByValue("trout").name(), "trout");
+      assert.equal(selectBox('.combobox').header.name(), 'trout');
+      assert.equal(this.get('value'), 'trout');
+    });
+
+    selectBoxSelectRow('', {selector: '.combobox' });
+
+    andThen(() => {
+      assert.equal(this.get('value'), null);
+    });
   }
 });
 
-componentTest('with Object none', {
-  template: '{{combo-box content=items none=none value=value selected="something"}}',
+componentTest('with value and none as an object', {
+  template: '{{combo-box content=items none=none value=value}}',
   beforeEach() {
     this.set('none', { id: 'something', name: 'none' });
     this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', 'evil');
   },
 
   test(assert) {
-    assert.equal(this.get('value'), 'something');
-    assert.equal(this.$("select option:eq(0)").text(), 'none');
-    assert.equal(this.$("select option:eq(0)").val(), 'something');
-    assert.equal(this.$("select option:eq(1)").text(), 'evil');
-    assert.equal(this.$("select option:eq(2)").text(), 'trout');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').noneRow.name(), 'none');
+      assert.equal(selectBox('.combobox').rowByValue("evil").name(), "evil");
+      assert.equal(selectBox('.combobox').rowByValue("trout").name(), "trout");
+      assert.equal(selectBox('.combobox').header.name(), 'evil');
+      assert.equal(this.get('value'), 'evil');
+    });
+
+    selectBoxSelectNoneRow({ selector: '.combobox' });
+
+    andThen(() => {
+      assert.equal(this.get('value'), null);
+    });
+  }
+});
+
+componentTest('with no value and none as an object', {
+  template: '{{combo-box content=items none=none value=value}}',
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('none', { id: 'something', name: 'none' });
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', null);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), 'none');
+    });
+  }
+});
+
+componentTest('with no value and none string', {
+  template: '{{combo-box content=items none=none value=value}}',
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('none', 'test.none');
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', null);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), 'none');
+    });
+  }
+});
+
+componentTest('with no value and no none', {
+  template: '{{combo-box content=items value=value}}',
+  beforeEach() {
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', null);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');
+    });
   }
 });
diff --git a/test/javascripts/components/dropdown-select-box-test.js.es6 b/test/javascripts/components/dropdown-select-box-test.js.es6
deleted file mode 100644
index 97d4f8fc281..00000000000
--- a/test/javascripts/components/dropdown-select-box-test.js.es6
+++ /dev/null
@@ -1,23 +0,0 @@
-import componentTest from 'helpers/component-test';
-
-moduleForComponent('dropdown-select-box', { integration: true });
-
-componentTest('the header has a title', {
-  template: '{{dropdown-select-box content=content value=value}}',
-
-  beforeEach() {
-    this.set("value", 1);
-    this.set("content", [{ id: 1, text: "apple" }, { id: 2, text: "peach" }]);
-  },
-
-  test(assert) {
-    andThen(() => {
-      assert.equal(find(".select-box-header .btn").attr("title"), "apple", "it has the correct title");
-    });
-
-    andThen(() => {
-      this.set("value", 2);
-      assert.equal(find(".select-box-header .btn").attr("title"), "peach", "it correctly changes the title");
-    });
-  }
-});
diff --git a/test/javascripts/components/multi-combo-box-test.js.es6 b/test/javascripts/components/multi-combo-box-test.js.es6
new file mode 100644
index 00000000000..9dbe3b5ffec
--- /dev/null
+++ b/test/javascripts/components/multi-combo-box-test.js.es6
@@ -0,0 +1,17 @@
+import componentTest from 'helpers/component-test';
+moduleForComponent('multi-combo-box', {integration: true});
+
+componentTest('with objects and values', {
+  template: '{{multi-combo-box content=items value=value}}',
+
+  beforeEach() {
+    this.set('items', [{id: 1, name: 'hello'}, {id: 2, name: 'world'}]);
+    this.set('value', [1, 2]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.propEqual(selectBox(".multi-combobox").header.name(), 'hello,world');
+    });
+  }
+});
diff --git a/test/javascripts/components/pinned-button-test.js.es6 b/test/javascripts/components/pinned-button-test.js.es6
index 0e41d4056d4..eba26d40eb0 100644
--- a/test/javascripts/components/pinned-button-test.js.es6
+++ b/test/javascripts/components/pinned-button-test.js.es6
@@ -25,11 +25,11 @@ componentTest('updating the content refreshes the list', {
 
     expandSelectBox();
 
-    andThen(() => assert.equal(selectBox().selectedRow.el().find(".title").text(), "Pinned") );
+    andThen(() => assert.equal(selectBox().selectedRow.name(), "Pinned") );
 
     andThen(() => {
       this.set("topic.pinned", false);
-      assert.equal(selectBox().selectedRow.el().find(".title").text(), "Unpinned");
+      assert.equal(selectBox().selectedRow.name(), "Unpinned");
     });
 
     andThen(() => {
diff --git a/test/javascripts/components/select-box-test.js.es6 b/test/javascripts/components/select-box-test.js.es6
index 4365e6a9371..7aa9a812555 100644
--- a/test/javascripts/components/select-box-test.js.es6
+++ b/test/javascripts/components/select-box-test.js.es6
@@ -1,31 +1,31 @@
 import componentTest from 'helpers/component-test';
 
-moduleForComponent('select-box', { integration: true });
+moduleForComponent('select-box-kit', { integration: true });
 
 componentTest('updating the content refreshes the list', {
-  template: '{{select-box value=1 content=content}}',
+  template: '{{select-box-kit value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
+    this.set("content", [{ id: 1, name: "robin" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      assert.equal(selectBox().row(1).text(), "robin");
-      this.set("content", [{ id: 1, text: "regis" }]);
-      assert.equal(selectBox().row(1).text(), "regis");
+      assert.equal(selectBox().rowByValue(1).name(), "robin");
+      this.set("content", [{ id: 1, name: "regis" }]);
+      assert.equal(selectBox().rowByValue(1).name(), "regis");
     });
   }
 });
 
 componentTest('accepts a value by reference', {
-  template: '{{select-box value=value content=content}}',
+  template: '{{select-box-kit value=value content=content}}',
 
   beforeEach() {
     this.set("value", 1);
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
@@ -33,7 +33,7 @@ componentTest('accepts a value by reference', {
 
     andThen(() => {
       assert.equal(
-        selectBox().selectedRow.text(), "robin",
+        selectBox().selectedRow.name(), "robin",
         "it highlights the row corresponding to the value"
       );
     });
@@ -47,16 +47,16 @@ componentTest('accepts a value by reference', {
 });
 
 componentTest('select-box can be filtered', {
-  template: '{{select-box filterable=true value=1 content=content}}',
+  template: '{{select-box-kit filterable=true value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin"}, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin"}, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => assert.equal(find(".filter-query").length, 1, "it has a search input"));
+    andThen(() => assert.equal(find(".select-box-kit-filter-input").length, 1, "it has a search input"));
 
     selectBoxFillInFilter("regis");
 
@@ -74,35 +74,27 @@ componentTest('select-box can be filtered', {
 });
 
 componentTest('no default icon', {
-  template: '{{select-box}}',
+  template: '{{select-box-kit}}',
 
   test(assert) {
     assert.equal(selectBox().header.icon().length, 0, "it doesn’t have an icon if not specified");
   }
 });
 
-componentTest('customisable icon', {
-  template: '{{select-box icon="shower"}}',
-
-  test(assert) {
-    assert.ok(selectBox().header.icon().hasClass("d-icon-shower"), "it has a the correct icon");
-  }
-});
-
 componentTest('default search icon', {
-  template: '{{select-box filterable=true}}',
+  template: '{{select-box-kit filterable=true}}',
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      assert.ok(selectBox().filter.icon().hasClass("d-icon-search"), "it has a the correct icon");
+      assert.ok(exists(selectBox().filter.icon), "it has a the correct icon");
     });
   }
 });
 
 componentTest('with no search icon', {
-  template: '{{select-box filterable=true filterIcon=null}}',
+  template: '{{select-box-kit filterable=true filterIcon=null}}',
 
   test(assert) {
     expandSelectBox();
@@ -114,7 +106,7 @@ componentTest('with no search icon', {
 });
 
 componentTest('custom search icon', {
-  template: '{{select-box filterable=true filterIcon="shower"}}',
+  template: '{{select-box-kit filterable=true filterIcon="shower"}}',
 
   test(assert) {
     expandSelectBox();
@@ -125,17 +117,8 @@ componentTest('custom search icon', {
   }
 });
 
-componentTest('not filterable by default', {
-  template: '{{select-box}}',
-  test(assert) {
-    expandSelectBox();
-
-    andThen(() => assert.notOk(selectBox().filter.exists()) );
-  }
-});
-
 componentTest('select-box is expandable', {
-  template: '{{select-box}}',
+  template: '{{select-box-kit}}',
   test(assert) {
     expandSelectBox();
 
@@ -147,46 +130,46 @@ componentTest('select-box is expandable', {
   }
 });
 
-componentTest('accepts custom id/text keys', {
-  template: '{{select-box value=value content=content idKey="identifier" textKey="name"}}',
+componentTest('accepts custom value/name keys', {
+  template: '{{select-box-kit value=value nameProperty="item" content=content valueAttribute="identifier"}}',
 
   beforeEach() {
     this.set("value", 1);
-    this.set("content", [{ identifier: 1, name: "robin" }]);
+    this.set("content", [{ identifier: 1, item: "robin" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      assert.equal(selectBox().selectedRow.text(), "robin");
+      assert.equal(selectBox().selectedRow.name(), "robin");
     });
   }
 });
 
 componentTest('doesn’t render collection content before first expand', {
-  template: '{{select-box value=1 content=content idKey="identifier" textKey="name"}}',
+  template: '{{select-box-kit value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ identifier: 1, name: "robin" }]);
+    this.set("content", [{ value: 1, name: "robin" }]);
   },
 
   test(assert) {
-    assert.notOk(exists(find(".collection")));
+    assert.notOk(exists(find(".select-box-kit-collection")));
 
     expandSelectBox();
 
     andThen(() => {
-      assert.ok(exists(find(".collection")));
+      assert.ok(exists(find(".select-box-kit-collection")));
     });
   }
 });
 
-componentTest('persists filter state when expandind/collapsing', {
-  template: '{{select-box value=1 content=content filterable=true}}',
+componentTest('persists filter state when expanding/collapsing', {
+  template: '{{select-box-kit value=1 content=content filterable=true}}',
 
   beforeEach() {
-    this.set("content", [{id:1, text:"robin"}, {id:2, text:"régis"}]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "régis" }]);
   },
 
   test(assert) {
@@ -207,126 +190,88 @@ componentTest('persists filter state when expandind/collapsing', {
 });
 
 componentTest('supports options to limit size', {
-  template: '{{select-box collectionHeight=20 content=content}}',
+  template: '{{select-box-kit collectionHeight=20 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
+    this.set("content", [{ id: 1, name: "robin" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      const body = find(".select-box-body");
-      assert.equal(parseInt(body.height()), 20, "it limits the height");
-    });
-  }
-});
-
-componentTest('supports custom row template', {
-  template: '{{select-box content=content templateForRow=templateForRow}}',
-
-  beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
-    this.set("templateForRow", (rowComponent) => {
-      return `<b>${rowComponent.get("content.text")}</b>`;
-    });
-  },
-
-  test(assert) {
-    expandSelectBox();
-
-    andThen(() => assert.equal(selectBox().row(1).el().html().trim(), "<b>robin</b>") );
-  }
-});
-
-componentTest('supports converting select value to integer', {
-  template: '{{select-box value=value content=content castInteger=true}}',
-
-  beforeEach() {
-    this.set("value", 2);
-    this.set("content", [{ id: "1", text: "robin"}, {id: "2", text: "régis" }]);
-  },
-
-  test(assert) {
-    expandSelectBox();
-
-    andThen(() => assert.equal(selectBox().selectedRow.text(), "régis") );
-
-    andThen(() => {
-      this.set("value", 3);
-      this.set("content", [{ id: "3", text: "jeff" }]);
-    });
-
-    andThen(() => {
-      assert.equal(selectBox().selectedRow.text(), "jeff", "it works with dynamic content");
+      const height = find(".select-box-kit-collection").height();
+      assert.equal(parseInt(height, 10), 20, "it limits the height");
     });
   }
 });
 
 componentTest('dynamic headerText', {
-  template: '{{select-box value=1 content=content}}',
+  template: '{{select-box-kit value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => assert.equal(selectBox().header.text(), "robin") );
+    andThen(() => assert.equal(selectBox().header.name(), "robin") );
 
     selectBoxSelectRow(2);
 
     andThen(() => {
-      assert.equal(selectBox().header.text(), "regis", "it changes header text");
+      assert.equal(selectBox().header.name(), "regis", "it changes header text");
     });
   }
 });
 
-componentTest('static headerText', {
-  template: '{{select-box value=1 content=content dynamicHeaderText=false headerText=headerText}}',
+componentTest('supports custom row template', {
+  template: '{{select-box-kit content=content templateForRow=templateForRow}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
-    this.set("headerText", "Choose...");
+    this.set("content", [{ id: 1, name: "robin" }]);
+    this.set("templateForRow", rowComponent => {
+      return `<b>${rowComponent.get("content.name")}</b>`;
+    });
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => {
-      assert.equal(selectBox().header.text(), "Choose...");
-    });
-
-    selectBoxSelectRow(2);
-
-    andThen(() => {
-      assert.equal(selectBox().header.text(), "Choose...", "it doesn’t change header text");
-    });
+    andThen(() => assert.equal(selectBox().rowByValue(1).el.html().trim(), "<b>robin</b>") );
   }
 });
 
-componentTest('supports custom row title', {
-  template: '{{select-box content=content titleForRow=titleForRow}}',
+componentTest('supports converting select value to integer', {
+  template: '{{select-box-kit value=value content=content castInteger=true}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
-    this.set("titleForRow", () => "sam" );
+    this.set("value", 2);
+    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => assert.equal(selectBox().row(1).title(), "sam") );
+    andThen(() => assert.equal(selectBox().selectedRow.name(), "régis") );
+
+    andThen(() => {
+      this.set("value", 3);
+      this.set("content", [{ id: "3", name: "jeff" }]);
+    });
+
+    andThen(() => {
+      assert.equal(selectBox().selectedRow.name(), "jeff", "it works with dynamic content");
+    });
   }
 });
 
 componentTest('supports keyboard events', {
-  template: '{{select-box content=content filterable=true}}',
+  template: '{{select-box-kit content=content filterable=true}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
@@ -335,31 +280,25 @@ componentTest('supports keyboard events', {
     selectBox().keyboard.down();
 
     andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the first row");
+      assert.equal(selectBox().highlightedRow.title(), "regis", "the next row is highlighted");
     });
 
     selectBox().keyboard.down();
 
     andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the next row");
-    });
-
-    selectBox().keyboard.down();
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "regis", "it keeps highlighting the last row when reaching the end");
+      assert.equal(selectBox().highlightedRow.title(), "robin", "it returns to the first row");
     });
 
     selectBox().keyboard.up();
 
     andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the previous row");
+      assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the last row");
     });
 
     selectBox().keyboard.enter();
 
     andThen(() => {
-      assert.equal(selectBox().selectedRow.title(), "robin", "it selects the row when pressing enter");
+      assert.equal(selectBox().selectedRow.title(), "regis", "it selects the row when pressing enter");
       assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
     });
 
diff --git a/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6 b/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6
new file mode 100644
index 00000000000..87f72e9e9b8
--- /dev/null
+++ b/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6
@@ -0,0 +1,28 @@
+import componentTest from 'helpers/component-test';
+import Topic from 'discourse/models/topic';
+
+const buildTopic = function() {
+  return Topic.create({
+    id: 1234,
+    title: 'Qunit Test Topic'
+  });
+};
+
+moduleForComponent('topic-footer-mobile-dropdown', {integration: true});
+
+componentTest('default', {
+  template: '{{topic-footer-mobile-dropdown topic=topic}}',
+  beforeEach() {
+    this.set("topic", buildTopic());
+  },
+
+  test(assert) {
+    expandSelectBox();
+
+    andThen(() => {
+      assert.equal(selectBox().header.name(), "Topic Controls");
+      assert.equal(selectBox().rowByIndex(0).name(), "Bookmark");
+      assert.equal(selectBox().rowByIndex(1).name(), "Share");
+    });
+  }
+});
diff --git a/test/javascripts/components/topic-notifications-button-test.js.es6 b/test/javascripts/components/topic-notifications-button-test.js.es6
index eda38dca1ff..67fd3ad70ec 100644
--- a/test/javascripts/components/topic-notifications-button-test.js.es6
+++ b/test/javascripts/components/topic-notifications-button-test.js.es6
@@ -23,12 +23,12 @@ componentTest('the header has a localized title', {
 
   test(assert) {
     andThen(() => {
-      assert.equal(find(".select-box-header .btn").attr("title"), "Normal", "it has the correct title");
+      assert.equal(selectBox().header.name(), "Normal", "it has the correct title");
     });
 
     andThen(() => {
       this.set("topic.details.notification_level", 2);
-      assert.equal(find(".select-box-header .btn").attr("title"), "Tracking", "it correctly changes the title");
+      assert.equal(selectBox().header.name(), "Tracking", "it correctly changes the title");
     });
   }
 });
diff --git a/test/javascripts/helpers/select-box-helper.js b/test/javascripts/helpers/select-box-helper.js
index e6fc96fd7dd..546148531ab 100644
--- a/test/javascripts/helpers/select-box-helper.js
+++ b/test/javascripts/helpers/select-box-helper.js
@@ -11,56 +11,68 @@ function checkSelectBoxIsNotCollapsed(selectBoxSelector) {
 }
 
 Ember.Test.registerAsyncHelper('expandSelectBox', function(app, selectBoxSelector) {
-  selectBoxSelector = selectBoxSelector || '.select-box';
+  selectBoxSelector = selectBoxSelector || '.select-box-kit';
 
   checkSelectBoxIsNotExpanded(selectBoxSelector);
 
-  click(selectBoxSelector + ' .select-box-header');
+  click(selectBoxSelector + ' .select-box-kit-header');
 });
 
 Ember.Test.registerAsyncHelper('collapseSelectBox', function(app, selectBoxSelector) {
-  selectBoxSelector = selectBoxSelector || '.select-box';
+  selectBoxSelector = selectBoxSelector || '.select-box-kit';
 
   checkSelectBoxIsNotCollapsed(selectBoxSelector);
 
-  click(selectBoxSelector + ' .select-box-header');
+  click(selectBoxSelector + ' .select-box-kit-header');
 });
 
-Ember.Test.registerAsyncHelper('selectBoxSelectRow', function(app, rowId, options) {
+Ember.Test.registerAsyncHelper('selectBoxSelectRow', function(app, rowValue, options) {
   options = options || {};
-  options.selector = options.selector || '.select-box';
+  options.selector = options.selector || '.select-box-kit';
 
   checkSelectBoxIsNotCollapsed(options.selector);
 
-  click(options.selector + " .select-box-row[data-id='" + rowId + "']");
+  click(options.selector + " .select-box-kit-row[data-value='" + rowValue + "']");
+});
+
+Ember.Test.registerAsyncHelper('selectBoxSelectNoneRow', function(app, options) {
+  options = options || {};
+  options.selector = options.selector || '.select-box-kit';
+
+  checkSelectBoxIsNotCollapsed(options.selector);
+
+  click(options.selector + " .select-box-kit-row.none");
 });
 
 Ember.Test.registerAsyncHelper('selectBoxFillInFilter', function(app, filter, options) {
   options = options || {};
-  options.selector = options.selector || '.select-box';
+  options.selector = options.selector || '.select-box-kit';
 
   checkSelectBoxIsNotCollapsed(options.selector);
 
-  var filterQuerySelector = options.selector + ' .filter-query';
+  var filterQuerySelector = options.selector + ' .select-box-kit-filter-input';
   fillIn(filterQuerySelector, filter);
   triggerEvent(filterQuerySelector, 'keyup');
 });
 
 function selectBox(selector) { // eslint-disable-line no-unused-vars
-  selector = selector || '.select-box';
+  selector = selector || '.select-box-kit';
 
   function rowHelper(row) {
     return {
-      text: function() { return row.find('.text').text().trim(); },
+      name: function() { return row.attr('data-name'); },
       icon: function() { return row.find('.d-icon'); },
       title: function() { return row.attr('title'); },
-      el: function() { return row; }
+      value: function() { return row.attr('data-value'); },
+      el: row
     };
   }
 
   function headerHelper(header) {
     return {
-      text: function() { return header.find('.current-selection').text().trim(); },
+      name: function() {
+        return header.attr('data-name');
+      },
       icon: function() { return header.find('.icon'); },
       title: function() { return header.attr('title'); },
       el: header
@@ -77,9 +89,8 @@ function selectBox(selector) { // eslint-disable-line no-unused-vars
 
   function keyboardHelper() {
     function createEvent(target, keyCode) {
-      if (typeof target !== 'undefined') {
-        selector = find(selector).find(target);
-      }
+      target = target || ".select-box-kit-filter-input";
+      selector = find(selector).find(target);
 
       andThen(function() {
         var event = jQuery.Event('keydown');
@@ -104,18 +115,30 @@ function selectBox(selector) { // eslint-disable-line no-unused-vars
 
     isHidden: find(selector).hasClass('is-hidden'),
 
-    header: headerHelper(find(selector).find('.select-box-header')),
+    header: headerHelper(find(selector).find('.select-box-kit-header')),
 
-    filter: filterHelper(find(selector).find('.select-box-filter')),
+    filter: filterHelper(find(selector).find('.select-box-kit-filter')),
 
-    rows: find(selector).find('.select-box-row'),
+    rows: find(selector).find('.select-box-kit-row'),
 
-    row: function(id) {
-      return rowHelper(find(selector).find('.select-box-row[data-id="' + id + '"]'));
+    rowByValue: function(value) {
+      return rowHelper(find(selector).find('.select-box-kit-row[data-value="' + value + '"]'));
     },
 
-    selectedRow: rowHelper(find(selector).find('.select-box-row.is-selected')),
+    rowByName: function(name) {
+      return rowHelper(find(selector).find('.select-box-kit-row[data-name="' + name + '"]'));
+    },
 
-    highlightedRow: rowHelper(find(selector).find('.select-box-row.is-highlighted'))
+    rowByIndex: function(index) {
+      return rowHelper(find(selector).find('.select-box-kit-row:eq(' + index + ')'));
+    },
+
+    el: find(selector),
+
+    noneRow: rowHelper(find(selector).find('.select-box-kit-row.none')),
+
+    selectedRow: rowHelper(find(selector).find('.select-box-kit-row.is-selected')),
+
+    highlightedRow: rowHelper(find(selector).find('.select-box-kit-row.is-highlighted'))
   };
 }