DEV: Use classes for styling user and group cards (#8913)

Styling based on element-ids, it is impossible for themes/plugins to display multiple cards on a single page. Using classes is a more flexible approach. The element-ids are maintained for backwards compatibility with existing plugins/themes.

app/assets/javascripts/discourse/components/group-card-contents.js.es6

@@ -12,7 +12,7 @@ const maxMembersToDisplay = 10;
 export default Component.extend(CardContentsBase, CleansUp, {
   elementId: "group-card",
   triggeringLinkClass: "mention-group",
-  classNames: ["no-bg"],
+  classNames: ["no-bg", "group-card"],
   classNameBindings: [
     "visible:show",
     "showBadges",

app/assets/javascripts/discourse/components/user-card-contents.js.es6

@@ -15,6 +15,7 @@ import { getOwner } from "@ember/application";
 
 export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
   elementId: "user-card",
+  classNames: "user-card",
   triggeringLinkClass: "mention",
   classNameBindings: [
     "visible:show",

app/assets/stylesheets/common/base/user.scss

@@ -703,7 +703,7 @@
 }
 
 .primary-textual .staged,
-#user-card .staged {
+.user-card .staged {
   font-style: italic;
 }
 

app/assets/stylesheets/common/components/user-card.scss

@@ -30,8 +30,8 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
 }
 
 // shared styles for user and group cards
-#user-card,
-#group-card {
+.user-card,
+.group-card {
   width: $card_width;
   box-shadow: shadow("card");
   color: $primary;
@@ -137,7 +137,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
 }
 
 // styles for user cards only
-#user-card {
+.user-card {
   // avatar - names - controls
   .first-row {
     display: flex;
@@ -243,7 +243,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
 }
 
 // styles for group cards only
-#group-card {
+.group-card {
   // avatar - names and controls
   .first-row {
     display: flex;

app/assets/stylesheets/desktop/components/user-card.scss

@@ -1,6 +1,6 @@
 // shared styles for user and group cards
-#user-card,
-#group-card {
+.user-card,
+.group-card {
   position: absolute;
   z-index: z("usercard");
   &.fixed {
@@ -35,7 +35,7 @@
 }
 
 // styles for user cards only
-#user-card {
+.user-card {
   // badges
   .badge-section {
     .user-badge {

app/assets/stylesheets/mobile/components/user-card.scss

@@ -1,8 +1,8 @@
 $avatar_width: 120px;
 
 // shared styles for user and group cards
-#user-card,
-#group-card {
+.user-card,
+.group-card {
   position: fixed;
   // mobile cards should always be on top of everything - 1102
   z-index: z("mobile-composer") + 2;
@@ -48,7 +48,7 @@ $avatar_width: 120px;
 }
 
 // styles for user cards only
-#user-card {
+.user-card {
   // badges
   .badge-section {
     flex-wrap: wrap;

test/javascripts/acceptance/click-track-test.js.es6

@@ -7,9 +7,9 @@ QUnit.test("Do not track mentions", async assert => {
   server.post("/clicks/track", () => assert.ok(false));
 
   await visit("/t/internationalization-localization/280");
-  assert.ok(invisible("#user-card"), "card should not appear");
+  assert.ok(invisible(".user-card"), "card should not appear");
 
   await click("article[data-post-id=3651] a.mention");
-  assert.ok(visible("#user-card"), "card should appear");
+  assert.ok(visible(".user-card"), "card should appear");
   assert.equal(currentURL(), "/t/internationalization-localization/280");
 });

test/javascripts/acceptance/group-card-mobile-test.js.es6

@@ -6,12 +6,12 @@ acceptance("Group Card - Mobile", { mobileView: true });
 QUnit.skip("group card", async assert => {
   await visit("/t/-/301/1");
   assert.ok(
-    invisible("#group-card"),
+    invisible(".group-card"),
     "mobile group card is invisible by default"
   );
 
   await click("a.mention-group:first");
-  assert.ok(visible("#group-card"), "mobile group card should appear");
+  assert.ok(visible(".group-card"), "mobile group card should appear");
 
   sandbox.stub(DiscourseURL, "routeTo");
   await click(".card-content a.group-page-link");

test/javascripts/acceptance/group-card-test.js.es6

@@ -5,10 +5,10 @@ acceptance("Group Card");
 
 QUnit.test("group card", async assert => {
   await visit("/t/-/301/1");
-  assert.ok(invisible("#group-card"), "user card is invisible by default");
+  assert.ok(invisible(".group-card"), "user card is invisible by default");
 
   await click("a.mention-group:first");
-  assert.ok(visible("#group-card"), "card should appear");
+  assert.ok(visible(".group-card"), "card should appear");
 
   sandbox.stub(DiscourseURL, "routeTo");
   await click(".card-content a.group-page-link");

test/javascripts/acceptance/user-card-mobile-test.js.es6

@@ -6,12 +6,12 @@ acceptance("User Card - Mobile", { mobileView: true });
 QUnit.skip("user card", async assert => {
   await visit("/t/internationalization-localization/280");
   assert.ok(
-    invisible("#user-card"),
+    invisible(".user-card"),
     "mobile user card is invisible by default"
   );
 
   await click("a[data-user-card=eviltrout]:first");
-  assert.ok(visible("#user-card"), "mobile user card should appear");
+  assert.ok(visible(".user-card"), "mobile user card should appear");
 
   sandbox.stub(DiscourseURL, "routeTo");
   await click(".card-content a.user-profile-link");

test/javascripts/acceptance/user-card-test.js.es6

@@ -5,12 +5,12 @@ acceptance("User Card", { loggedIn: true });
 
 QUnit.test("user card", async assert => {
   await visit("/t/internationalization-localization/280");
-  assert.ok(invisible("#user-card"), "user card is invisible by default");
+  assert.ok(invisible(".user-card"), "user card is invisible by default");
 
   await click("a[data-user-card=eviltrout]:first");
-  assert.ok(visible("#user-card"), "card should appear");
+  assert.ok(visible(".user-card"), "card should appear");
   assert.equal(
-    find("#user-card .username")
+    find(".user-card .username")
       .text()
       .trim(),
     "eviltrout",
@@ -25,9 +25,9 @@ QUnit.test("user card", async assert => {
   );
 
   await click("a[data-user-card=charlie]:first");
-  assert.ok(visible("#user-card"), "card should appear");
+  assert.ok(visible(".user-card"), "card should appear");
   assert.equal(
-    find("#user-card .username")
+    find(".user-card .username")
       .text()
       .trim(),
     "charlie",
@@ -36,7 +36,7 @@ QUnit.test("user card", async assert => {
 
   await click(".card-content .compose-pm button");
   assert.ok(
-    invisible("#user-card"),
+    invisible(".user-card"),
     "user card dismissed after hitting Message button"
   );
 
@@ -45,9 +45,9 @@ QUnit.test("user card", async assert => {
   icon.classList.add("icon");
   mention.append(icon);
   await click("a.mention .icon");
-  assert.ok(visible("#user-card"), "card should appear");
+  assert.ok(visible(".user-card"), "card should appear");
   assert.equal(
-    find("#user-card .username")
+    find(".user-card .username")
       .text()
       .trim(),
     "eviltrout",

test/smoke_test.js

@@ -162,7 +162,7 @@ const path = require("path");
   });
 
   await exec("user has details", () => {
-    return page.waitForSelector("#user-card .names", { visible: true });
+    return page.waitForSelector(".user-card .names", { visible: true });
   });
 
   if (!process.env.READONLY_TESTS) {