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

.template-lintrc.js

@@ -3,6 +3,7 @@ module.exports = {
   ignore: ["**/*.raw"],
 
   rules: {
-    "self-closing-void-elements": true
+    "self-closing-void-elements": true,
+    "style-concatenation": true
   }
 };

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",
+  classNames: ["color-palettes"],
-  rowComponent: "color-palettes/color-palettes-row"
+
+  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")
+  palettes: computed("item.colors.[]", function() {
-  colors(colors) {
+    return (this.item.colors || [])
-    return (colors || []).map(color => `#${escapeExpression(color.hex)}`);
+      .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|}}
+    {{palettes}}
-      <span class="palette" style="background-color:{{color}};"></span>
-    {{/each}}
   </div>
 {{/if}}

app/assets/javascripts/wizard/components/theme-preview.js.es6

@@ -6,6 +6,7 @@ import {
   chooseDarker,
   LOREM
 } from "wizard/lib/preview";
+import { computed } from "@ember/object";
 
 export default createPreviewComponent(305, 165, {
   logo: null,
@@ -13,6 +14,10 @@ export default createPreviewComponent(305, 165, {
 
   classNameBindings: ["isSelected"],
 
+  canvasStyle: computed("width", "height", function() {
+    return `width:${this.width}px;height:${this.height}px`.htmlSafe();
+  }),
+
   @discourseComputed("selectedId", "colorsId")
   isSelected(selectedId, colorsId) {
     return selectedId === colorsId;

app/assets/javascripts/wizard/templates/components/theme-preview.hbs

@@ -1,4 +1,8 @@
-<div class='preview-area'>
+<div class="preview-area">
-  <canvas width={{elementWidth}} height={{elementHeight}} style={{concat "width:" width "; height:" height ";"}}>
+  <canvas
+    width={{elementWidth}}
+    height={{elementHeight}}
+    style={{canvasStyle}}
+  >
   </canvas>
 </div>