From 68a0d74f0ea959f72b029a772c4331ae412c3c52 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Tue, 14 Jan 2025 10:24:41 +0100
Subject: [PATCH] :bug: Fix text ellipsis on long token names and grouped
 tokens

---
 common/src/app/common/files/helpers.cljc      |  7 ++++
 frontend/playwright/ui/specs/tokens.spec.js   | 33 +++++++++++++++++--
 .../main/ui/workspace/tokens/token_pill.cljs  | 16 +++++++--
 .../main/ui/workspace/tokens/token_pill.scss  | 19 ++++++-----
 4 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/common/src/app/common/files/helpers.cljc b/common/src/app/common/files/helpers.cljc
index 6245e109d..8c664c098 100644
--- a/common/src/app/common/files/helpers.cljc
+++ b/common/src/app/common/files/helpers.cljc
@@ -640,6 +640,13 @@
   (let [path-split (split-path path)]
     (merge-path-item (first path-split) name)))
 
+(defn split-string-half
+  "Split string in two halfs"
+  [s]
+  (let [len (count s)
+        mid (quot len 2)]
+    [(subs s 0 mid)
+     (subs s mid)]))
 
 (defn get-frame-objects
   "Retrieves a new objects map only with the objects under frame-id (with frame-id)"
diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js
index 0c33b0ddd..01d8c6ec9 100644
--- a/frontend/playwright/ui/specs/tokens.spec.js
+++ b/frontend/playwright/ui/specs/tokens.spec.js
@@ -70,7 +70,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
 
-    await expect(tokensTabPanel.getByText("color.primary")).toBeEnabled();
+    await expect(tokensTabPanel.getByLabel("primary")).toBeEnabled();
 
     // Create token referencing the previous one with keyboard
 
@@ -87,7 +87,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await nameField.press("Enter");
 
-    const referenceToken = tokensTabPanel.getByText("color.secondary");
+    const referenceToken = tokensTabPanel.getByLabel("color.secondary");
     await expect(referenceToken).toBeEnabled();
 
     // Tokens tab panel should have two tokens with the color red / #ff0000
@@ -105,6 +105,35 @@ test.describe("Tokens: Tokens Tab", () => {
       }),
     ).toHaveAttribute("aria-checked", "true");
   });
+
+  test("User creates grouped color token", async ({ page }) => {
+    const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
+      await setupFileWithTokens(page);
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    await tokensTabPanel.getByTitle("Add token: Color").click();
+
+    // Create grouped color token with mouse
+
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    const valueField = tokensUpdateCreateModal.getByLabel("Value");
+
+    await nameField.click();
+    await nameField.fill("color.dark.primary");
+
+    await valueField.click();
+    await valueField.fill("red");
+
+    const submitButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Save",
+    });
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+
+    await expect(tokensTabPanel.getByLabel("color.dark.primary")).toBeEnabled();
+  });
 });
 
 test.describe("Tokens: Sets Tab", () => {
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
index 7498881a7..ac79cac5f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
@@ -1,6 +1,7 @@
 (ns app.main.ui.workspace.tokens.token-pill
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.files.helpers :as cfh]
    [app.common.types.tokens-lib :as ctob]
    [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
@@ -17,10 +18,10 @@
   [{:keys [on-click token theme-token full-applied on-context-menu half-applied]}]
   (let [{:keys [name value resolved-value errors]} token
         errors? (or (nil? theme-token) (and (seq errors) (seq (:errors theme-token))))
-
         color (when (seq (ctob/find-token-value-references value))
                 (wtt/resolved-value-hex theme-token))
-
+        contains-path? (str/includes? name ".")
+        splitted-name (cfh/split-string-half name)
         color (or color (wtt/resolved-value-hex token))
         on-click
         (mf/use-callback
@@ -64,4 +65,13 @@
        [:> token-status-icon*
         {:icon-id token-status-id
          :class (stl/css :token-pill-icon)}])
-     name]))
\ No newline at end of file
+     (if contains-path?
+       [:span {:class (stl/css :divided-name-wrapper)
+               :aria-label name}
+        [:span {:class (stl/css :first-name-wrapper)}
+         (first splitted-name)]
+        [:span {:class (stl/css :last-name-wrapper)}
+         (last splitted-name)]]
+       [:span {:class (stl/css :name-wrapper)
+               :aria-label name}
+        name])]))
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss
index e4b78aeee..2a2356651 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss
@@ -60,22 +60,23 @@
   white-space: nowrap;
 }
 
-.group-name-wrapper::before, span::after {
-  vertical-align: middle;
+.divided-name-wrapper {
+  height: $s-16;
+}
+
+.first-name-wrapper {
   display: inline-block;
   max-width: 50%;
   overflow: hidden;
   white-space: pre;
-}
-
-.group-name-wrapper::before {
-  content: attr(data-content-start);
   text-overflow: ellipsis;
 }
 
-.group-name-wrapper::after {
-  content: attr(data-content-end);
-  text-overflow: '';
+.last-name-wrapper {
+  display: inline-block;
+  max-width: 50%;
+  overflow: hidden;
+  white-space: pre;
   direction: rtl;
 }