🐛 Fix text ellipsis on long token names and grouped tokens

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)"

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", () => {

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]))
+     (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])]))

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;
 }