DEV: select-kit 2 (#7998)

This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component.

Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**

test/javascripts/acceptance/topic-edit-timer-test.js.es6

@@ -28,15 +28,15 @@ QUnit.test("default", async assert => {
   await click(".toggle-admin-menu");
   await click(".topic-admin-status-update button");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await click("#private-topic-timer");
 
-  assert.equal(timerType.header().title(), "Remind Me");
+  assert.equal(timerType.header().label(), "Remind Me");
   assert.equal(timerType.header().value(), "reminder");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 });
 
@@ -51,7 +51,12 @@ QUnit.test("autoclose - specific time", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex = /will automatically close in/g;
@@ -72,7 +77,12 @@ QUnit.test("autoclose", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex1 = /will automatically close in/g;
@@ -86,7 +96,12 @@ QUnit.test("autoclose", async assert => {
 
   await fillIn(".future-date-input .date-picker", "2099-11-24");
 
-  assert.equal(futureDateInputSelector.header().title(), "Pick date and time");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Pick date and time")
+  );
   assert.equal(futureDateInputSelector.header().value(), "pick_date_and_time");
 
   const regex2 = /will automatically close in/g;
@@ -100,9 +115,11 @@ QUnit.test("autoclose", async assert => {
 
   await fillIn(".future-date-input input[type=number]", "2");
 
-  assert.equal(
-    futureDateInputSelector.header().title(),
-    "Close based on last post"
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Close based on last post")
   );
   assert.equal(
     futureDateInputSelector.header().value(),
@@ -128,13 +145,18 @@ QUnit.test("close temporarily", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("open");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex1 = /will automatically open in/g;
@@ -148,7 +170,7 @@ QUnit.test("close temporarily", async assert => {
 
   await fillIn(".future-date-input .date-picker", "2099-11-24");
 
-  assert.equal(futureDateInputSelector.header().title(), "Pick date and time");
+  assert.equal(futureDateInputSelector.header().label(), "Pick date and time");
   assert.equal(futureDateInputSelector.header().value(), "pick_date_and_time");
 
   const regex2 = /will automatically open in/g;
@@ -171,10 +193,10 @@ QUnit.test("schedule", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("publish_to_category");
 
-  assert.equal(categoryChooser.header().title(), "uncategorized");
+  assert.equal(categoryChooser.header().label(), "uncategorized");
   assert.equal(categoryChooser.header().value(), null);
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await categoryChooser.expand();
@@ -183,7 +205,12 @@ QUnit.test("schedule", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex = /will be published to #dev/g;
@@ -219,13 +246,18 @@ QUnit.test("auto delete", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("delete");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("two_weeks");
 
-  assert.equal(futureDateInputSelector.header().title(), "Two Weeks");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Two Weeks")
+  );
   assert.equal(futureDateInputSelector.header().value(), "two_weeks");
 
   const regex = /will be automatically deleted/g;