♻️ Make the CSS of presence widgets to adhere to our guidelines

CHANGES.md

@@ -25,6 +25,7 @@
 - Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
 - Fix incorrect default option on tokens import dialog [Github #8051](https://github.com/penpot/penpot/pull/8051)
 - Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
+- Fix displaying a hidden user avatar when there is only one more [Taiga #13058](https://tree.taiga.io/project/penpot/issue/13058)
 
 ## 2.13.0 (Unreleased)
 

frontend/playwright/data/workspace/ws-notifications.js

@@ -5,3 +5,19 @@ export const presenceFixture = {
   "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
   "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
 };
+
+export const joinFixture2 = {
+  "~:type": "~:join-file",
+  "~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
+  "~:session-id": "~u37730924-d520-80f1-8004-4ae6e5c3942e",
+  "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
+  "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
+};
+
+export const joinFixture3 = {
+  "~:type": "~:join-file",
+  "~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
+  "~:session-id": "~u37730924-d520-80f1-8004-4ae6e5c3942f",
+  "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
+  "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
+};

frontend/playwright/ui/specs/workspace.spec.js

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { WorkspacePage } from "../pages/WorkspacePage";
-import { presenceFixture } from "../../data/workspace/ws-notifications";
+import { presenceFixture, joinFixture2, joinFixture3 } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
   await WorkspacePage.init(page);
@@ -40,6 +40,28 @@ test("User receives presence notifications updates in the workspace", async ({
   ).toHaveCount(2);
 });
 
+test("BUG 13058 - Presence list shows up to 3 user avatars", async ({
+  page,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+
+  await workspacePage.goToWorkspace();
+  await workspacePage.sendPresenceMessage(presenceFixture);
+  await workspacePage.sendPresenceMessage(joinFixture2);
+
+  await expect(
+    page.getByTestId("active-users-list").getByAltText("Princesa Leia"),
+  ).toHaveCount(3);
+
+  await workspacePage.sendPresenceMessage(joinFixture3);
+  await expect(
+    page.getByTestId("active-users-list").getByAltText("Princesa Leia"),
+  ).toHaveCount(2);
+
+  await expect(page.getByTestId("active-users-list").getByText("+2")).toBeVisible();
+});
+
 test("User draws a rect", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -700,19 +700,6 @@
   background-color: var(--menu-shortcut-background-color);
 }
 
-.user-icon {
-  @include flexCenter;
-  @include bodySmallTypography;
-  height: $s-24;
-  width: $s-24;
-  border-radius: $br-circle;
-  margin-left: calc(-1 * $s-4);
-  img {
-    border-radius: $br-circle;
-    border: $s-2 solid var(--user-count-foreground-color);
-  }
-}
-
 .mixed-bar {
   @include bodySmallTypography;
   display: flex;

frontend/src/app/main/ui/workspace/presence.cljs

@@ -22,7 +22,7 @@
   (let [profile       (assoc profile :color color)
         full-name     (:fullname profile)]
     [:li {:class (stl/css :session-icon)
-          :style {:z-index (dm/str (+ 1 (* -1 index)))
+          :style {:z-index (dm/str (+ 2 (* -1 index)))
                   :background-color color}
           :title full-name}
      [:img {:alt full-name
@@ -37,9 +37,11 @@
 
         sessions     (vals presence)
         num-sessions (count sessions)
+        max-avatar-count 3
+        avatar-count (if (= num-sessions max-avatar-count) max-avatar-count (- max-avatar-count 1))
 
         open*        (mf/use-state false)
-        open?        (and ^boolean (deref open*) (> num-sessions 2))
+        open?        (and ^boolean (deref open*) (> num-sessions max-avatar-count))
         on-open
         (mf/use-fn
          (fn []
@@ -67,10 +69,10 @@
      [:button {:class (stl/css-case :active-users true)
                :on-click on-open}
       [:ul {:class (stl/css :active-users-list) :data-testid "active-users-list"}
-       (when (> num-sessions 2)
-         [:span {:class (stl/css :users-num)} (dm/str "+" (- num-sessions 2))])
+       (when (> num-sessions max-avatar-count)
+         [:li {:class (stl/css :users-num)} (dm/str "+" (+ 1 (- num-sessions max-avatar-count)))])
 
-       (for [[index session] (d/enumerate (take 2 sessions))]
+       (for [[index session] (d/enumerate (take avatar-count sessions))]
          [:& session-widget
           {:color (:color session)
            :index index

frontend/src/app/main/ui/workspace/presence.scss

@@ -4,50 +4,71 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/typography.scss" as t;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .active-users,
 .active-users-opened {
-  @include deprecated.buttonStyle;
+  background: none;
+  cursor: pointer;
+
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-end;
   align-items: center;
   margin: 0;
-  padding: 0 deprecated.$s-4;
-  border-radius: deprecated.$br-8;
-  .active-users-list {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    margin: 0;
+  padding: 0 var(--sp-xs);
+  border: none;
+  border-radius: $br-8;
+}
 
-    .users-num {
-      @extend .user-icon;
-      background-color: var(--user-count-background-color);
-      color: var(--user-count-foreground-color);
-      z-index: deprecated.$z-index-2;
-      border: deprecated.$s-2 solid var(--user-count-foreground-color);
-    }
-    .session-icon {
-      @extend .user-icon;
-    }
+.active-users-list {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  margin: 0;
+  gap: var(--user-list-gap, 0);
+}
+
+%user-icon {
+  @include t.use-typography("body-small");
+  display: grid;
+  place-content: center;
+  height: $sz-24;
+  width: $sz-24;
+  border-radius: $br-circle;
+  margin-inline-start: calc(-1 * var(--sp-xs));
+
+  img {
+    border-radius: $br-circle;
+    border: $b-2 solid var(--user-count-foreground-color);
   }
 }
 
+.users-num {
+  @extend %user-icon;
+  background-color: var(--user-count-background-color);
+  color: var(--user-count-foreground-color);
+  z-index: 3; // FIXME: this is hardcoded because of the way its component uses z-index from cljs
+  border: $b-2 solid var(--user-count-foreground-color);
+  margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
+}
+
+.session-icon {
+  @extend %user-icon;
+  margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
+}
+
 .active-users-opened {
   position: absolute;
-  right: calc(-1 * deprecated.$s-2);
-  top: calc(-1 * deprecated.$s-2);
-  padding: deprecated.$s-8;
-  margin: calc(-1 * deprecated.$s-2) calc(-1 * deprecated.$s-4) 0 0;
+  right: calc(-1 * var(--sp-xxs));
+  top: calc(-1 * var(--sp-xxs));
+  padding: var(--sp-s);
+  margin: calc(-1 * var(--sp-xxs)) calc(-1 * var(--sp-xs)) 0 0;
   background-color: var(--menu-background-color);
-  z-index: deprecated.$z-index-4;
-  .active-users-list {
-    gap: deprecated.$s-4;
-    .users-num,
-    .session-icon {
-      margin-left: 0;
-    }
-  }
+  z-index: 4; // FIXME: this is hardcoded because of the way its component uses z-index from cljs
+
+  --user-list-gap: var(--sp-xs);
+  --user-list-inline-margin: 0;
 }