DEV: API to add classes to small actions (#19453)

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -62,6 +62,7 @@ import {
 import { addPostClassesCallback } from "discourse/widgets/post";
 import {
   addGroupPostSmallActionCode,
+  addPostSmallActionClassesCallback,
   addPostSmallActionIcon,
 } from "discourse/widgets/post-small-action";
 import { addQuickAccessProfileItem } from "discourse/widgets/quick-access-profile";
@@ -113,7 +114,7 @@ import { registerCustomUserNavMessagesDropdownRow } from "discourse/controllers/
 // based on Semantic Versioning 2.0.0. Please update the changelog at
 // docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md whenever you change the version
 // using the format described at https://keepachangelog.com/en/1.0.0/.
-const PLUGIN_API_VERSION = "1.5.0";
+const PLUGIN_API_VERSION = "1.6.0";
 
 // This helper prevents us from applying the same `modifyClass` over and over in test mode.
 function canModify(klass, type, resolverName, changes) {
@@ -932,6 +933,22 @@ class PluginApi {
     addGroupPostSmallActionCode(actionCode);
   }
 
+  /**
+   * Adds a callback to be called before rendering any small action post
+   * that returns custom classes to add to the small action post
+   *
+   * ```javascript
+   * addPostSmallActionClassesCallback(post => {
+   *   if (post.actionCode.includes("group")) {
+   *     return ["group-small-post"];
+   *   }
+   * });
+   * ```
+   **/
+  addPostSmallActionClassesCallback(callback) {
+    addPostSmallActionClassesCallback(callback);
+  }
+
   /**
    * Register an additional query param with topic discovery,
    * this allows for filters on the topic list

app/assets/javascripts/discourse/app/widgets/post-small-action.js

@@ -45,6 +45,8 @@ export function actionDescription(
   });
 }
 
+const addPostSmallActionClassesCallbacks = [];
+
 const groupActionCodes = ["invited_group", "removed_group"];
 
 const icons = {
@@ -81,6 +83,10 @@ export function addGroupPostSmallActionCode(actionCode) {
   groupActionCodes.push(actionCode);
 }
 
+export function addPostSmallActionClassesCallback(callback) {
+  addPostSmallActionClassesCallbacks.push(callback);
+}
+
 export default createWidget("post-small-action", {
   buildKey: (attrs) => `post-small-act-${attrs.id}`,
   tagName: "div.small-action.onscreen-post",
@@ -90,9 +96,21 @@ export default createWidget("post-small-action", {
   },
 
   buildClasses(attrs) {
+    let classNames = [];
     if (attrs.deleted) {
-      return "deleted";
+      classNames.push("deleted");
     }
+
+    if (addPostSmallActionClassesCallbacks) {
+      addPostSmallActionClassesCallbacks.forEach((callback) => {
+        const additionalClasses = callback.call(this, attrs);
+        if (additionalClasses) {
+          classNames.push(...additionalClasses);
+        }
+      });
+    }
+
+    return classNames;
   },
 
   html(attrs) {

docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md

@@ -7,6 +7,13 @@ in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.6.0] - 2022-12-13
+
+### Added
+
+- Adds `addPostSmallActionClassesCallback`, which allows users to register a custom
+  function that adds a class to small action posts (pins, closing topics, etc)
+
 ## [1.5.0] - 2022-11-21
 
 ### Added