diff --git a/app/assets/javascripts/discourse/app/widgets/poster-name.js b/app/assets/javascripts/discourse/app/widgets/poster-name.js index c5f28601ea155..2fe5f7d6f8e80 100644 --- a/app/assets/javascripts/discourse/app/widgets/poster-name.js +++ b/app/assets/javascripts/discourse/app/widgets/poster-name.js @@ -17,6 +17,23 @@ export function disableNameSuppression() { createWidget("poster-name-title", { tagName: "span.user-title", + buildClasses(attrs) { + let classNames = []; + + classNames.push(attrs.title); + + if (attrs.titleIsGroup) { + classNames.push(attrs.primaryGroupName); + } + + classNames = classNames.map( + (className) => + `user-title--${className.replace(/\s+/g, "-").toLowerCase()}` + ); + + return classNames; + }, + html(attrs) { let titleContents = attrs.title; if (attrs.primaryGroupName && attrs.titleIsGroup) { @@ -111,7 +128,7 @@ export default createWidget("poster-name", { const primaryGroupName = attrs.primary_group_name; if (primaryGroupName && primaryGroupName.length) { - classNames.push(primaryGroupName); + classNames.push(`group--${primaryGroupName}`); } let nameContents = [this.userLink(attrs, nameFirst ? name : username)]; diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/poster-name-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/poster-name-test.js index 1c1f04d77747f..71e5258860d4f 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/widgets/poster-name-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/poster-name-test.js @@ -46,7 +46,7 @@ module("Integration | Component | Widget | poster-name", function (hooks) { assert.ok(exists("span.moderator")); assert.ok(exists(".d-icon-shield-alt")); assert.ok(exists("span.new-user")); - assert.ok(exists("span.fish")); + assert.ok(exists("span.group--fish")); }); test("disable display name on posts", async function (assert) {