Allow custom classes for any widget

app/assets/javascripts/discourse/widgets/decorator-helper.js.es6

@@ -0,0 +1,21 @@
+import Connector from 'discourse/widgets/connector';
+import { h } from 'virtual-dom';
+
+class DecoratorHelper {
+  constructor(widget, attrs, state) {
+    this.widget = widget;
+    this.attrs = attrs;
+    this.state = state;
+  }
+
+  connect(details) {
+    return new Connector(this.widget, details);
+  }
+
+  getModel() {
+    return this.widget.findAncestorModel();
+  }
+}
+DecoratorHelper.prototype.h = h;
+
+export default DecoratorHelper;

app/assets/javascripts/discourse/widgets/widget.js.es6

@@ -1,6 +1,6 @@
 import { WidgetClickHook, WidgetClickOutsideHook } from 'discourse/widgets/click-hook';
 import { h } from 'virtual-dom';
-import Connector from 'discourse/widgets/connector';
+import DecoratorHelper from 'discourse/widgets/decorator-helper';
 
 function emptyContent() { }
 
@@ -17,19 +17,6 @@ export function renderedKey(key) {
 
 const _decorators = {};
 
-class DecoratorHelper {
-  constructor(container, attrs, state) {
-    this.container = container;
-    this.attrs = attrs;
-    this.state = state;
-  }
-
-  connect(details) {
-    return new Connector(this.container, details);
-  }
-}
-DecoratorHelper.prototype.h = h;
-
 export function decorateWidget(widgetName, cb) {
   _decorators[widgetName] = _decorators[widgetName] || [];
   _decorators[widgetName].push(cb);
@@ -52,6 +39,12 @@ function drawWidget(builder, attrs, state) {
   if (this.buildClasses) {
     let classes = this.buildClasses(attrs, state) || [];
     if (!Array.isArray(classes)) { classes = [classes]; }
+
+    const customClasses = applyDecorators(this, 'classNames', attrs, state);
+    if (customClasses && customClasses.length) {
+      classes = classes.concat(customClasses);
+    }
+
     if (classes.length) {
       properties.className = classes.join(' ');
     }