DEV: enforces style-concatenation linting rule (#8888)

app/assets/javascripts/select-kit/components/color-palettes.js.es6

@@ -2,6 +2,9 @@ import ComboBoxComponent from "select-kit/components/combo-box";
 
 export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["color-palettes"],
-  classNames: "color-palettes",
-  rowComponent: "color-palettes/color-palettes-row"
+  classNames: ["color-palettes"],
+
+  modifyComponentForRow() {
+    return "color-palettes/color-palettes-row";
+  }
 });

app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6

@@ -1,14 +1,20 @@
 import { escapeExpression } from "discourse/lib/utilities";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-import discourseComputed from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
 
 export default SelectKitRowComponent.extend({
+  classNames: ["color-palettes-row"],
+
   layoutName:
     "select-kit/templates/components/color-palettes/color-palettes-row",
-  classNames: "color-palettes-row",
 
-  @discourseComputed("computedContent.originalContent.colors")
-  colors(colors) {
-    return (colors || []).map(color => `#${escapeExpression(color.hex)}`);
-  }
+  palettes: computed("item.colors.[]", function() {
+    return (this.item.colors || [])
+      .map(color => `#${escapeExpression(color.hex)}`)
+      .map(
+        hex => `<span class="palette" style="background-color:${hex}"></span>`
+      )
+      .join("")
+      .htmlSafe();
+  })
 });

app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs

@@ -2,10 +2,8 @@
   {{label}}
 </span>
 
-{{#if colors}}
+{{#if item.colors}}
   <div class="palettes">
-    {{#each colors as |color|}}
-      <span class="palette" style="background-color:{{color}};"></span>
-    {{/each}}
+    {{palettes}}
   </div>
 {{/if}}