Introduces select-kit

* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:

```
computeValue()
computeContent()
mutateValue()
```

test/javascripts/components/categories-admin-dropdown-test.js.es6

@@ -5,15 +5,15 @@ componentTest('default', {
   template: '{{categories-admin-dropdown}}',
 
   test(assert) {
-    const $selectBox = selectBox('.categories-admin-dropdown');
+    const $selectKit = selectKit('.categories-admin-dropdown');
 
-    assert.equal($selectBox.el.find(".d-icon-bars").length, 1);
-    assert.equal($selectBox.el.find(".d-icon-caret-down").length, 1);
+    assert.equal($selectKit.el.find(".d-bars").length, 1);
+    assert.equal($selectKit.el.find(".d-caret-down").length, 1);
 
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal($selectBox.rowByValue("create").name(), "New Category");
+      assert.equal($selectKit.rowByValue("create").name(), "New Category");
     });
   }
 });

test/javascripts/components/category-chooser-test.js.es6

@@ -6,10 +6,10 @@ componentTest('with value', {
   template: '{{category-chooser value=2}}',
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').header.name(), "feature");
+      assert.equal(selectKit('.category-chooser').header.name(), "feature");
     });
   }
 });
@@ -18,10 +18,10 @@ componentTest('with excludeCategoryId', {
   template: '{{category-chooser excludeCategoryId=2}}',
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').rowByValue(2).el.length, 0);
+      assert.equal(selectKit('.category-chooser').rowByValue(2).el.length, 0);
     });
   }
 });
@@ -30,12 +30,12 @@ componentTest('with scopedCategoryId', {
   template: '{{category-chooser scopedCategoryId=2}}',
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     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);
+      assert.equal(selectKit('.category-chooser').rowByIndex(0).name(), "feature");
+      assert.equal(selectKit('.category-chooser').rowByIndex(1).name(), "spec");
+      assert.equal(selectKit('.category-chooser').el.find(".select-kit-row").length, 2);
     });
   }
 });
@@ -48,10 +48,10 @@ componentTest('with allowUncategorized=null', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
+      assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
     });
   }
 });
@@ -64,10 +64,10 @@ componentTest('with allowUncategorized=null rootNone=true', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
+      assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
     });
   }
 });
@@ -81,10 +81,10 @@ componentTest('with disallowed uncategorized, rootNone and rootNoneLabel', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
+      assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
     });
   }
 });
@@ -97,10 +97,10 @@ componentTest('with allowed uncategorized', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').header.name(), "uncategorized");
+      assert.equal(selectKit('.category-chooser').header.name(), "uncategorized");
     });
   }
 });
@@ -113,10 +113,10 @@ componentTest('with allowed uncategorized and rootNone', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').header.name(), "(no category)");
+      assert.equal(selectKit('.category-chooser').header.name(), "(no category)");
     });
   }
 });
@@ -130,10 +130,10 @@ componentTest('with allowed uncategorized rootNone and rootNoneLabel', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.category-chooser').header.name(), "root none label");
+      assert.equal(selectKit('.category-chooser').header.name(), "root none label");
     });
   }
 });

test/javascripts/components/categpry-selector-test.js.es6

@@ -0,0 +1,67 @@
+import componentTest from 'helpers/component-test';
+import Category from "discourse/models/category";
+
+moduleForComponent('category-selector', {integration: true});
+
+componentTest('default', {
+  template: '{{category-selector categories=categories}}',
+
+  beforeEach() {
+    this.set('categories', [ Category.findById(2) ]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.propEqual(selectKit().header.name(), 'feature');
+      assert.ok(!exists(".select-kit .select-kit-row[data-value='2']"), "selected categories are not in the list");
+    });
+  }
+});
+
+componentTest('with blacklist', {
+  template: '{{category-selector categories=categories blacklist=blacklist}}',
+
+  beforeEach() {
+    this.set('categories', [ Category.findById(2) ]);
+    this.set('blacklist', [ Category.findById(8) ]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.ok(exists(".select-kit .select-kit-row[data-value='6']"), "not blacklisted categories are in the list");
+      assert.ok(!exists(".select-kit .select-kit-row[data-value='8']"), "blacklisted categories are not in the list");
+    });
+  }
+});
+
+componentTest('interactions', {
+  template: '{{category-selector categories=categories}}',
+
+  beforeEach() {
+    this.set('categories', [
+      Category.findById(2),
+      Category.findById(6)
+    ]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    selectKitSelectRow(8);
+
+    andThen(() => {
+      assert.propEqual(selectKit().header.name(), 'feature,support,hosting', 'it adds the selected category');
+      assert.equal(this.get('categories').length, 3);
+    });
+
+    selectKit().keyboard.backspace();
+    selectKit().keyboard.backspace();
+
+    andThen(() => {
+      assert.propEqual(selectKit().header.name(), 'feature,support', 'it removes the last selected category');
+      assert.equal(this.get('categories').length, 2);
+    });
+  }
+});

test/javascripts/components/combo-box-test.js.es6

@@ -8,12 +8,12 @@ componentTest('default', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').header.name(), "hello");
-      assert.equal(selectBox('.combobox').rowByValue(1).name(), "hello");
-      assert.equal(selectBox('.combobox').rowByValue(2).name(), "world");
+      assert.equal(selectKit('.combobox').header.name(), "hello");
+      assert.equal(selectKit('.combobox').rowByValue(1).name(), "hello");
+      assert.equal(selectKit('.combobox').rowByValue(2).name(), "world");
     });
   }
 });
@@ -25,11 +25,11 @@ componentTest('with valueAttribute', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
-      assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
+      assert.equal(selectKit('.combobox').rowByValue(0).name(), "hello");
+      assert.equal(selectKit('.combobox').rowByValue(1).name(), "world");
     });
   }
 });
@@ -41,11 +41,11 @@ componentTest('with nameProperty', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
-      assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
+      assert.equal(selectKit('.combobox').rowByValue(0).name(), "hello");
+      assert.equal(selectKit('.combobox').rowByValue(1).name(), "world");
     });
   }
 });
@@ -57,11 +57,11 @@ componentTest('with an array as content', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').rowByValue('evil').name(), "evil");
-      assert.equal(selectBox('.combobox').rowByValue('trout').name(), "trout");
+      assert.equal(selectKit('.combobox').rowByValue('evil').name(), "evil");
+      assert.equal(selectKit('.combobox').rowByValue('trout').name(), "trout");
     });
   }
 });
@@ -75,17 +75,17 @@ componentTest('with value and none as a string', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     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(selectKit('.combobox').noneRow.name(), 'none');
+      assert.equal(selectKit('.combobox').rowByValue("evil").name(), "evil");
+      assert.equal(selectKit('.combobox').rowByValue("trout").name(), "trout");
+      assert.equal(selectKit('.combobox').header.name(), 'trout');
       assert.equal(this.get('value'), 'trout');
     });
 
-    selectBoxKitSelectRow('__none__', {selector: '.combobox' });
+    selectKitSelectRow('__none__', {selector: '.combobox' });
 
     andThen(() => {
       assert.equal(this.get('value'), null);
@@ -102,17 +102,17 @@ componentTest('with value and none as an object', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     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(selectKit('.combobox').noneRow.name(), 'none');
+      assert.equal(selectKit('.combobox').rowByValue("evil").name(), "evil");
+      assert.equal(selectKit('.combobox').rowByValue("trout").name(), "trout");
+      assert.equal(selectKit('.combobox').header.name(), 'evil');
       assert.equal(this.get('value'), 'evil');
     });
 
-    selectBoxKitSelectNoneRow({ selector: '.combobox' });
+    selectKitSelectNoneRow({ selector: '.combobox' });
 
     andThen(() => {
       assert.equal(this.get('value'), null);
@@ -130,10 +130,10 @@ componentTest('with no value and none as an object', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').header.name(), 'none');
+      assert.equal(selectKit('.combobox').header.name(), 'none');
     });
   }
 });
@@ -148,10 +148,10 @@ componentTest('with no value and none string', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').header.name(), 'none');
+      assert.equal(selectKit('.combobox').header.name(), 'none');
     });
   }
 });
@@ -164,10 +164,10 @@ componentTest('with no value and no none', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');
+      assert.equal(selectKit('.combobox').header.name(), 'evil', 'it sets the first row as value');
     });
   }
 });
@@ -182,17 +182,17 @@ componentTest('with no value and no none', {
 //   test(assert) {
 //     ();
 //
-//     andThen(() => assert.equal(find(".select-box-kit-filter-input").length, 1, "it has a search input"));
+//     andThen(() => assert.equal(find(".filter-input").length, 1, "it has a search input"));
 //
-//     selectBoxKitFillInFilter("regis");
+//     selectKitFillInFilter("regis");
 //
-//     andThen(() => assert.equal(selectBox().rows.length, 1, "it filters results"));
+//     andThen(() => assert.equal(selectKit().rows.length, 1, "it filters results"));
 //
-//     selectBoxKitFillInFilter("");
+//     selectKitFillInFilter("");
 //
 //     andThen(() => {
 //       assert.equal(
-//         selectBox().rows.length, 2,
+//         selectKit().rows.length, 2,
 //         "it returns to original content when filter is empty"
 //       );
 //     });
@@ -209,17 +209,17 @@ componentTest('with no value and no none', {
 //   test(assert) {
 //     ();
 //
-//     selectBoxKitFillInFilter("rob");
+//     selectKitFillInFilter("rob");
 //
-//     andThen(() => assert.equal(selectBox().rows.length, 1) );
+//     andThen(() => assert.equal(selectKit().rows.length, 1) );
 //
-//     collapseSelectBoxKit();
+//     collapseSelectKit();
 //
-//     andThen(() => assert.notOk(selectBox().isExpanded) );
+//     andThen(() => assert.notOk(selectKit().isExpanded) );
 //
 //     ();
 //
-//     andThen(() => assert.equal(selectBox().rows.length, 1) );
+//     andThen(() => assert.equal(selectKit().rows.length, 1) );
 //   }
 // });
 
@@ -232,10 +232,10 @@ componentTest('with empty string as value', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');
+      assert.equal(selectKit('.combobox').header.name(), 'evil', 'it sets the first row as value');
     });
   }
 });

test/javascripts/components/d-button-test.js.es6

@@ -6,7 +6,7 @@ componentTest('icon only button', {
 
   test(assert) {
     assert.ok(this.$('button.btn.btn-icon.no-text').length, 'it has all the classes');
-    assert.ok(this.$('button .d-icon.d-icon-plus').length, 'it has the icon');
+    assert.ok(this.$('button .d-icon.d-plus').length, 'it has the icon');
     assert.equal(this.$('button').attr('tabindex'), "3", 'it has the tabindex');
   }
 });
@@ -16,7 +16,7 @@ componentTest('icon and text button', {
 
   test(assert) {
     assert.ok(this.$('button.btn.btn-icon-text').length, 'it has all the classes');
-    assert.ok(this.$('button .d-icon.d-icon-plus').length, 'it has the icon');
+    assert.ok(this.$('button .d-icon.d-plus').length, 'it has the icon');
     assert.ok(this.$('button span.d-button-label').length, 'it has the label');
   }
 });

test/javascripts/components/list-setting-test.js.es6

@@ -11,10 +11,26 @@ componentTest('default', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.propEqual(selectBox().header.name(), 'bold,italic');
+      assert.propEqual(selectKit().header.name(), 'bold,italic');
+    });
+  }
+});
+
+componentTest('with emptry string as value', {
+  template: '{{list-setting settingValue=settingValue}}',
+
+  beforeEach() {
+    this.set('settingValue', '');
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().header.el.find(".selected-name").length, 0);
     });
   }
 });
@@ -27,10 +43,10 @@ componentTest('with only setting value', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.propEqual(selectBox().header.name(), 'bold,italic');
+      assert.propEqual(selectKit().header.name(), 'bold,italic');
     });
   }
 });
@@ -44,28 +60,28 @@ componentTest('interactions', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
-    selectBoxKitSelectRow('underline');
+    selectKitSelectRow('underline');
 
     andThen(() => {
-      assert.propEqual(selectBox().header.name(), 'bold,italic,underline');
+      assert.propEqual(selectKit().header.name(), 'bold,italic,underline');
     });
 
-    selectBoxKitFillInFilter('strike');
+    selectKitFillInFilter('strike');
 
     andThen(() => {
-      assert.equal(selectBox().highlightedRow.name(), 'strike');
+      assert.equal(selectKit().highlightedRow.name(), 'strike');
     });
 
-    selectBox().keyboard.enter();
+    selectKit().keyboard.enter();
 
     andThen(() => {
-      assert.propEqual(selectBox().header.name(), 'bold,italic,underline,strike');
+      assert.propEqual(selectKit().header.name(), 'bold,italic,underline,strike');
     });
 
-    selectBox().keyboard.backspace();
-    selectBox().keyboard.backspace();
+    selectKit().keyboard.backspace();
+    selectKit().keyboard.backspace();
 
     andThen(() => {
       assert.equal(this.get('choices').length, 3, 'it removes the created content from original list');

test/javascripts/components/multi-combo-box-test.js.es6

@@ -1,109 +0,0 @@
-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().header.name(), 'hello,world');
-    });
-  }
-});
-
-componentTest('interactions', {
-  template: '{{multi-combo-box none=none content=items value=value}}',
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = {none: 'none'};
-    this.set('items', [{id: 1, name: 'regis'}, {id: 2, name: 'sam'}, {id: 3, name: 'robin'}]);
-    this.set('value', [1, 2]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.name(), 'robin', 'it highlights the first content row');
-    });
-
-    this.set('none', 'test.none');
-
-    andThen(() => {
-      assert.equal(selectBox().noneRow.el.length, 1);
-      assert.equal(selectBox().highlightedRow.name(), 'robin', 'it highlights the first content row');
-    });
-
-    selectBoxKitSelectRow(3);
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.name(), 'none', 'it highlights none row if no content');
-    });
-
-    selectBoxKitFillInFilter('joffrey');
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.name(), 'joffrey', 'it highlights create row when filling filter');
-    });
-
-    selectBox().keyboard.enter();
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.name(), 'none', 'it highlights none row after creating content and no content left');
-    });
-
-    selectBox().keyboard.backspace();
-
-    andThen(() => {
-      const $lastSelectedName = selectBox().header.el.find('.selected-name').last();
-      assert.equal($lastSelectedName.attr('data-name'), 'joffrey');
-      assert.ok($lastSelectedName.hasClass('is-highlighted'), 'it highlights the last selected name when using backspace');
-    });
-
-    selectBox().keyboard.backspace();
-
-    andThen(() => {
-      const $lastSelectedName = selectBox().header.el.find('.selected-name').last();
-      assert.equal($lastSelectedName.attr('data-name'), 'robin', 'it removes the previous highlighted selected content');
-      assert.notOk(exists(selectBox().rowByValue('joffrey').el), 'generated content shouldn’t appear in content when removed');
-    });
-
-    selectBox().keyboard.selectAll();
-
-    andThen(() => {
-      const $highlightedSelectedNames = selectBox().header.el.find('.selected-name.is-highlighted');
-      assert.equal($highlightedSelectedNames.length, 3, 'it highlights each selected name');
-    });
-
-    selectBox().keyboard.backspace();
-
-    andThen(() => {
-      const $selectedNames = selectBox().header.el.find('.selected-name');
-      assert.equal($selectedNames.length, 0, 'it removed all selected content');
-    });
-
-    andThen(() => {
-      assert.ok(this.$(".select-box-kit").hasClass("is-focused"));
-      assert.ok(this.$(".select-box-kit").hasClass("is-expanded"));
-    });
-
-    selectBox().keyboard.escape();
-
-    andThen(() => {
-      assert.ok(this.$(".select-box-kit").hasClass("is-focused"));
-      assert.notOk(this.$(".select-box-kit").hasClass("is-expanded"));
-    });
-
-    selectBox().keyboard.escape();
-
-    andThen(() => {
-      assert.notOk(this.$(".select-box-kit").hasClass("is-focused"));
-      assert.notOk(this.$(".select-box-kit").hasClass("is-expanded"));
-    });
-  }
-});

test/javascripts/components/multi-select-test.js.es6

@@ -0,0 +1,109 @@
+import componentTest from 'helpers/component-test';
+moduleForComponent('multi-select', {integration: true});
+
+componentTest('with objects and values', {
+  template: '{{multi-select content=items values=values}}',
+
+  beforeEach() {
+    this.set('items', [{id: 1, name: 'hello'}, {id: 2, name: 'world'}]);
+    this.set('values', [1, 2]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.propEqual(selectKit().header.name(), 'hello,world');
+    });
+  }
+});
+
+componentTest('interactions', {
+  template: '{{multi-select none=none content=items values=values}}',
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('items', [{id: 1, name: 'regis'}, {id: 2, name: 'sam'}, {id: 3, name: 'robin'}]);
+    this.set('values', [1, 2]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().highlightedRow.name(), 'robin', 'it highlights the first content row');
+    });
+
+    this.set('none', 'test.none');
+
+    andThen(() => {
+      assert.equal(selectKit().noneRow.el.length, 1);
+      assert.equal(selectKit().highlightedRow.name(), 'robin', 'it highlights the first content row');
+    });
+
+    selectKitSelectRow(3);
+
+    andThen(() => {
+      assert.equal(selectKit().highlightedRow.name(), 'none', 'it highlights none row if no content');
+    });
+
+    selectKitFillInFilter('joffrey');
+
+    andThen(() => {
+      assert.equal(selectKit().highlightedRow.name(), 'joffrey', 'it highlights create row when filling filter');
+    });
+
+    selectKit().keyboard.enter();
+
+    andThen(() => {
+      assert.equal(selectKit().highlightedRow.name(), 'none', 'it highlights none row after creating content and no content left');
+    });
+
+    selectKit().keyboard.backspace();
+
+    andThen(() => {
+      const $lastSelectedName = selectKit().header.el.find('.selected-name').last();
+      assert.equal($lastSelectedName.attr('data-name'), 'joffrey');
+      assert.ok($lastSelectedName.hasClass('is-highlighted'), 'it highlights the last selected name when using backspace');
+    });
+
+    selectKit().keyboard.backspace();
+
+    andThen(() => {
+      const $lastSelectedName = selectKit().header.el.find('.selected-name').last();
+      assert.equal($lastSelectedName.attr('data-name'), 'robin', 'it removes the previous highlighted selected content');
+      assert.notOk(exists(selectKit().rowByValue('joffrey').el), 'generated content shouldn’t appear in content when removed');
+    });
+
+    selectKit().keyboard.selectAll();
+
+    andThen(() => {
+      const $highlightedSelectedNames = selectKit().header.el.find('.selected-name.is-highlighted');
+      assert.equal($highlightedSelectedNames.length, 3, 'it highlights each selected name');
+    });
+
+    selectKit().keyboard.backspace();
+
+    andThen(() => {
+      const $selectedNames = selectKit().header.el.find('.selected-name');
+      assert.equal($selectedNames.length, 0, 'it removed all selected content');
+    });
+
+    andThen(() => {
+      assert.ok(this.$(".select-kit").hasClass("is-focused"));
+      assert.ok(this.$(".select-kit").hasClass("is-expanded"));
+    });
+
+    selectKit().keyboard.escape();
+
+    andThen(() => {
+      assert.ok(this.$(".select-kit").hasClass("is-focused"));
+      assert.notOk(this.$(".select-kit").hasClass("is-expanded"));
+    });
+
+    selectKit().keyboard.escape();
+
+    andThen(() => {
+      assert.notOk(this.$(".select-kit").hasClass("is-focused"));
+      assert.notOk(this.$(".select-kit").hasClass("is-expanded"));
+    });
+  }
+});

test/javascripts/components/pinned-button-test.js.es6

@@ -1,40 +0,0 @@
-import componentTest from 'helpers/component-test';
-import Topic from 'discourse/models/topic';
-
-const buildTopic = function() {
-  return Topic.create({
-    id: 1234,
-    title: "Qunit Test Topic",
-    deleted: false,
-    pinned: true
-  });
-};
-
-moduleForComponent('pinned-button', { integration: true });
-
-componentTest('updating the content refreshes the list', {
-  template: '{{pinned-button topic=topic}}',
-
-  beforeEach() {
-    this.siteSettings.automatically_unpin_topics = false;
-    this.set("topic", buildTopic());
-  },
-
-  test(assert) {
-    andThen(() => assert.notOk(selectBox().isHidden) );
-
-    expandSelectBoxKit();
-
-    andThen(() => assert.equal(selectBox().selectedRow.name(), "Pinned") );
-
-    andThen(() => {
-      this.set("topic.pinned", false);
-      assert.equal(selectBox().selectedRow.name(), "Unpinned");
-    });
-
-    andThen(() => {
-      this.set("topic.deleted", true);
-      assert.ok(find(".pinned-button").hasClass("is-hidden"), "it hides the button when topic is deleted");
-    });
-  }
-});

test/javascripts/components/pinned-options-test.js.es6

@@ -0,0 +1,35 @@
+import componentTest from 'helpers/component-test';
+import Topic from 'discourse/models/topic';
+
+const buildTopic = function() {
+  return Topic.create({
+    id: 1234,
+    title: "Qunit Test Topic",
+    deleted: false,
+    pinned: true
+  });
+};
+
+moduleForComponent('pinned-options', { integration: true });
+
+componentTest('updating the content refreshes the list', {
+  template: '{{pinned-options value=pinned topic=topic}}',
+
+  beforeEach() {
+    this.siteSettings.automatically_unpin_topics = false;
+    this.set("topic", buildTopic());
+    this.set("pinned", true);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => assert.equal(selectKit().header.name(), "Pinned") );
+
+    andThen(() => this.set("pinned", false));
+
+    andThen(() => {
+      assert.equal(selectKit().header.name(), "Unpinned");
+    });
+  }
+});

test/javascripts/components/select-box-kit-test.js.es6

@@ -1,288 +0,0 @@
-import componentTest from 'helpers/component-test';
-
-moduleForComponent('select-box-kit', { integration: true });
-
-componentTest('updating the content refreshes the list', {
-  template: '{{select-box-kit value=1 content=content}}',
-
-  beforeEach() {
-    this.set("content", [{ id: 1, name: "robin" }]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      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-kit value=value content=content}}',
-
-  beforeEach() {
-    this.set("value", 1);
-    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      assert.equal(
-        selectBox().selectedRow.name(), "robin",
-        "it highlights the row corresponding to the value"
-      );
-    });
-
-    selectBoxKitSelectRow(1);
-
-    andThen(() => {
-      assert.equal(this.get("value"), 1, "it mutates the value");
-    });
-  }
-});
-
-componentTest('no default icon', {
-  template: '{{select-box-kit}}',
-
-  test(assert) {
-    assert.equal(selectBox().header.icon().length, 0, "it doesn’t have an icon if not specified");
-  }
-});
-
-componentTest('default search icon', {
-  template: '{{select-box-kit filterable=true}}',
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      assert.ok(exists(selectBox().filter.icon), "it has a the correct icon");
-    });
-  }
-});
-
-componentTest('with no search icon', {
-  template: '{{select-box-kit filterable=true filterIcon=null}}',
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      assert.equal(selectBox().filter.icon().length, 0, "it has no icon");
-    });
-  }
-});
-
-componentTest('custom search icon', {
-  template: '{{select-box-kit filterable=true filterIcon="shower"}}',
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      assert.ok(selectBox().filter.icon().hasClass("d-icon-shower"), "it has a the correct icon");
-    });
-  }
-});
-
-componentTest('select-box is expandable', {
-  template: '{{select-box-kit}}',
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => assert.ok(selectBox().isExpanded) );
-
-    collapseSelectBoxKit();
-
-    andThen(() => assert.notOk(selectBox().isExpanded) );
-  }
-});
-
-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, item: "robin" }]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      assert.equal(selectBox().selectedRow.name(), "robin");
-    });
-  }
-});
-
-componentTest('doesn’t render collection content before first expand', {
-  template: '{{select-box-kit value=1 content=content}}',
-
-  beforeEach() {
-    this.set("content", [{ value: 1, name: "robin" }]);
-  },
-
-  test(assert) {
-    assert.notOk(exists(find(".select-box-kit-collection")));
-
-    expandSelectBoxKit();
-
-    andThen(() => {
-      assert.ok(exists(find(".select-box-kit-collection")));
-    });
-  }
-});
-
-componentTest('supports options to limit size', {
-  template: '{{select-box-kit collectionHeight=20 content=content}}',
-
-  beforeEach() {
-    this.set("content", ["robin", "régis"]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => {
-      const height = find(".select-box-kit-collection").height();
-      assert.equal(parseInt(height, 10), 20, "it limits the height");
-    });
-  }
-});
-
-componentTest('dynamic headerText', {
-  template: '{{select-box-kit value=1 content=content}}',
-
-  beforeEach() {
-    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => assert.equal(selectBox().header.name(), "robin") );
-
-    selectBoxKitSelectRow(2);
-
-    andThen(() => {
-      assert.equal(selectBox().header.name(), "regis", "it changes header text");
-    });
-  }
-});
-
-componentTest('supports custom row template', {
-  template: '{{select-box-kit content=content templateForRow=templateForRow}}',
-
-  beforeEach() {
-    this.set("content", [{ id: 1, name: "robin" }]);
-    this.set("templateForRow", rowComponent => {
-      return `<b>${rowComponent.get("content.name")}</b>`;
-    });
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    andThen(() => assert.equal(selectBox().rowByValue(1).el.html().trim(), "<b>robin</b>") );
-  }
-});
-
-componentTest('supports converting select value to integer', {
-  template: '{{select-box-kit value=value content=content castInteger=true}}',
-
-  beforeEach() {
-    this.set("value", 2);
-    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    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-kit content=content filterable=true}}',
-
-  beforeEach() {
-    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
-  },
-
-  test(assert) {
-    expandSelectBoxKit();
-
-    selectBox().keyboard.down();
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "regis", "the next row is highlighted");
-    });
-
-    selectBox().keyboard.down();
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "robin", "it returns to the first row");
-    });
-
-    selectBox().keyboard.up();
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the last row");
-    });
-
-    selectBox().keyboard.enter();
-
-    andThen(() => {
-      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");
-    });
-
-    expandSelectBoxKit();
-
-    selectBox().keyboard.escape();
-
-    andThen(() => {
-      assert.notOk(selectBox().isExpanded, "it collapses the select box");
-    });
-
-    expandSelectBoxKit();
-
-    selectBoxKitFillInFilter("regis");
-
-    selectBox().keyboard.tab();
-
-    andThen(() => {
-      assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
-    });
-  }
-});
-
-
-componentTest('supports mutating value when no value given', {
-  template: '{{select-box-kit value=value content=content}}',
-
-  beforeEach() {
-    this.set("value", "");
-    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
-  },
-
-  test(assert) {
-    andThen(() => {
-      assert.equal(this.get("value"), "1");
-    });
-  }
-});

test/javascripts/components/single-select-test.js.es6

@@ -0,0 +1,372 @@
+import componentTest from 'helpers/component-test';
+import { withPluginApi } from 'discourse/lib/plugin-api';
+import { clearCallbacks } from 'select-kit/mixins/plugin-api';
+
+moduleForComponent('single-select', { integration: true });
+
+componentTest('updating the content refreshes the list', {
+  template: '{{single-select value=1 content=content}}',
+
+  beforeEach() {
+    this.set("content", [{ id: 1, name: "BEFORE" }]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().rowByValue(1).name(), "BEFORE");
+    });
+
+    andThen(() => {
+      this.set("content", [{ id: 1, name: "AFTER" }]);
+    });
+
+    andThen(() => {
+      assert.equal(selectKit().rowByValue(1).name(), "AFTER");
+    });
+  }
+});
+
+componentTest('accepts a value by reference', {
+  template: '{{single-select value=value content=content}}',
+
+  beforeEach() {
+    this.set("value", 1);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(
+        selectKit().selectedRow.name(), "robin",
+        "it highlights the row corresponding to the value"
+      );
+    });
+
+    selectKitSelectRow(1);
+
+    andThen(() => {
+      assert.equal(this.get("value"), 1, "it mutates the value");
+    });
+  }
+});
+
+componentTest('no default icon', {
+  template: '{{single-select}}',
+
+  test(assert) {
+    assert.equal(selectKit().header.icon().length, 0, "it doesn’t have an icon if not specified");
+  }
+});
+
+componentTest('default search icon', {
+  template: '{{single-select filterable=true}}',
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.ok(exists(selectKit().filter.icon), "it has a the correct icon");
+    });
+  }
+});
+
+componentTest('with no search icon', {
+  template: '{{single-select filterable=true filterIcon=null}}',
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().filter.icon().length, 0, "it has no icon");
+    });
+  }
+});
+
+componentTest('custom search icon', {
+  template: '{{single-select filterable=true filterIcon="shower"}}',
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.ok(selectKit().filter.icon().hasClass("fa-shower"), "it has a the correct icon");
+    });
+  }
+});
+
+componentTest('is expandable', {
+  template: '{{single-select}}',
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => assert.ok(selectKit().isExpanded) );
+
+    collapseSelectKit();
+
+    andThen(() => assert.notOk(selectKit().isExpanded) );
+  }
+});
+
+componentTest('accepts custom value/name keys', {
+  template: '{{single-select value=value nameProperty="item" content=content valueAttribute="identifier"}}',
+
+  beforeEach() {
+    this.set("value", 1);
+    this.set("content", [{ identifier: 1, item: "robin" }]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().selectedRow.name(), "robin");
+    });
+  }
+});
+
+componentTest('doesn’t render collection content before first expand', {
+  template: '{{single-select value=1 content=content}}',
+
+  beforeEach() {
+    this.set("content", [{ value: 1, name: "robin" }]);
+  },
+
+  test(assert) {
+    assert.notOk(exists(find(".select-kit-collection")));
+
+    expandSelectKit();
+
+    andThen(() => {
+      assert.ok(exists(find(".select-kit-collection")));
+    });
+  }
+});
+
+componentTest('supports options to limit size', {
+  template: '{{single-select collectionHeight=20 content=content}}',
+
+  beforeEach() {
+    this.set("content", ["robin", "régis"]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      const height = find(".select-kit-collection").height();
+      assert.equal(parseInt(height, 10), 20, "it limits the height");
+    });
+  }
+});
+
+componentTest('dynamic headerText', {
+  template: '{{single-select value=1 content=content}}',
+
+  beforeEach() {
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().header.name(), "robin");
+    });
+
+    selectKitSelectRow(2);
+
+    andThen(() => {
+      assert.equal(selectKit().header.name(), "regis", "it changes header text");
+    });
+  }
+});
+
+componentTest('supports custom row template', {
+  template: '{{single-select content=content templateForRow=templateForRow}}',
+
+  beforeEach() {
+    this.set("content", [{ id: 1, name: "robin" }]);
+    this.set("templateForRow", rowComponent => {
+      return `<b>${rowComponent.get("computedContent.name")}</b>`;
+    });
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => assert.equal(selectKit().rowByValue(1).el.html().trim(), "<b>robin</b>") );
+  }
+});
+
+componentTest('supports converting select value to integer', {
+  template: '{{single-select value=value content=content castInteger=true}}',
+
+  beforeEach() {
+    this.set("value", 2);
+    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => assert.equal(selectKit().selectedRow.name(), "régis") );
+
+    andThen(() => {
+      this.set("value", 3);
+      this.set("content", [{ id: "3", name: "jeff" }]);
+    });
+
+    andThen(() => {
+      assert.equal(selectKit().selectedRow.name(), "jeff", "it works with dynamic content");
+    });
+  }
+});
+
+componentTest('supports keyboard events', {
+  template: '{{single-select content=content filterable=true}}',
+
+  beforeEach() {
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    selectKit().keyboard.down();
+
+    andThen(() => {
+      assert.equal(selectKit().highlightedRow.title(), "regis", "the next row is highlighted");
+    });
+
+    selectKit().keyboard.down();
+
+    andThen(() => {
+      assert.equal(selectKit().highlightedRow.title(), "robin", "it returns to the first row");
+    });
+
+    selectKit().keyboard.up();
+
+    andThen(() => {
+      assert.equal(selectKit().highlightedRow.title(), "regis", "it highlights the last row");
+    });
+
+    selectKit().keyboard.enter();
+
+    andThen(() => {
+      assert.equal(selectKit().selectedRow.title(), "regis", "it selects the row when pressing enter");
+      assert.notOk(selectKit().isExpanded, "it collapses the select box when selecting a row");
+    });
+
+    expandSelectKit();
+
+    selectKit().keyboard.escape();
+
+    andThen(() => {
+      assert.notOk(selectKit().isExpanded, "it collapses the select box");
+    });
+
+    expandSelectKit();
+
+    selectKitFillInFilter("regis");
+
+    selectKit().keyboard.tab();
+
+    andThen(() => {
+      assert.notOk(selectKit().isExpanded, "it collapses the select box when selecting a row");
+    });
+  }
+});
+
+
+componentTest('supports mutating value when no value given', {
+  template: '{{single-select value=value content=content}}',
+
+  beforeEach() {
+    this.set("value", "");
+    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.equal(this.get("value"), "1");
+    });
+  }
+});
+
+componentTest('support appending content through plugin api', {
+  template: '{{single-select content=content}}',
+
+  beforeEach() {
+    withPluginApi('0.8.11', api => {
+      api.modifySelectKit("select-kit")
+         .appendContent([{ id: "2", name: "regis"}]);
+    });
+
+    this.set("content", [{ id: "1", name: "robin"}]);
+  },
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().rows.length, 2);
+      assert.equal(selectKit().rows.eq(1).data("name"), "regis");
+    });
+
+    clearCallbacks();
+  }
+});
+
+componentTest('support modifying content through plugin api', {
+  template: '{{single-select content=content}}',
+
+  beforeEach() {
+    withPluginApi('0.8.11', api => {
+      api.modifySelectKit("select-kit")
+         .modifyContent((existingContent) => {
+           existingContent.splice(1, 0, { id: "2", name: "sam" });
+           return existingContent;
+         });
+    });
+
+    this.set("content", [{ id: "1", name: "robin"}, { id: "3", name: "regis"}]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().rows.length, 3);
+      assert.equal(selectKit().rows.eq(1).data("name"), "sam");
+    });
+
+    clearCallbacks();
+  }
+});
+
+componentTest('support prepending content through plugin api', {
+  template: '{{single-select content=content}}',
+
+  beforeEach() {
+    withPluginApi('0.8.11', api => {
+      api.modifySelectKit("select-kit")
+         .prependContent([{ id: "2", name: "regis"}]);
+    });
+
+    this.set("content", [{ id: "1", name: "robin"}]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().rows.length, 2);
+      assert.equal(selectKit().rows.eq(0).data("name"), "regis");
+    });
+
+    clearCallbacks();
+  }
+});

test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6

@@ -17,16 +17,16 @@ componentTest('default', {
   },
 
   test(assert) {
-    expandSelectBoxKit();
+    expandSelectKit();
 
     andThen(() => {
-      assert.equal(selectBox().header.name(), "Topic Controls");
-      assert.equal(selectBox().rowByIndex(0).name(), "Bookmark");
-      assert.equal(selectBox().rowByIndex(1).name(), "Share");
-      assert.equal(selectBox().selectedRow.el.length, 0, "it doesn’t preselect first row");
+      assert.equal(selectKit().header.name(), "Topic Controls");
+      assert.equal(selectKit().rowByIndex(0).name(), "Bookmark");
+      assert.equal(selectKit().rowByIndex(1).name(), "Share");
+      assert.equal(selectKit().selectedRow.el.length, 0, "it doesn’t preselect first row");
     });
 
-    selectBoxKitSelectRow("share");
+    selectKitSelectRow("share");
 
     andThen(() => {
       assert.equal(this.get("value"), null, "it resets the value");

test/javascripts/components/topic-notifications-button-test.js.es6

@@ -1,34 +1,34 @@
 import componentTest from 'helpers/component-test';
 import Topic from 'discourse/models/topic';
 
-const buildTopic = function() {
+const buildTopic = function(level) {
   return Topic.create({
     id: 4563,
     title: "Qunit Test Topic",
     details: {
-      notification_level: 1
+      notification_level: level
     }
   });
 };
 
-
 moduleForComponent('topic-notifications-button', { integration: true });
 
 componentTest('the header has a localized title', {
-  template: '{{topic-notifications-button topic=topic}}',
+  template: '{{topic-notifications-button notificationLevel=topic.details.notification_level topic=topic}}',
 
   beforeEach() {
-    this.set("topic", buildTopic());
+    this.set("topic", buildTopic(1));
   },
 
   test(assert) {
     andThen(() => {
-      assert.equal(selectBox().header.name(), "Normal", "it has the correct title");
+      assert.equal(selectKit().header.name(), "Normal", "it has the correct title");
     });
 
+    this.set("topic", buildTopic(2));
+
     andThen(() => {
-      this.set("topic.details.notification_level", 2);
-      assert.equal(selectBox().header.name(), "Tracking", "it correctly changes the title");
+      assert.equal(selectKit().header.name(), "Tracking", "it correctly changes the title");
     });
   }
 });