From afcaee62f47b991ef18fe6335a72519e4001c169 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Mon, 20 Jan 2025 15:51:07 +0100
Subject: [PATCH] :bug: Add ellipsis to token name after groups if any
---
common/src/app/common/files/helpers.cljc | 14 ++++++++------
.../app/main/ui/workspace/tokens/token_pill.cljs | 2 +-
.../app/main/ui/workspace/tokens/token_pill.scss | 16 ++++++++--------
3 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/common/src/app/common/files/helpers.cljc b/common/src/app/common/files/helpers.cljc
index 8c664c098..eb7e84d9e 100644
--- a/common/src/app/common/files/helpers.cljc
+++ b/common/src/app/common/files/helpers.cljc
@@ -640,13 +640,15 @@
(let [path-split (split-path path)]
(merge-path-item (first path-split) name)))
-(defn split-string-half
- "Split string in two halfs"
+
+(defn split-by-last-period
+ "Splits a string into two parts:
+ the text before and including the last period,
+ and the text after the last period."
[s]
- (let [len (count s)
- mid (quot len 2)]
- [(subs s 0 mid)
- (subs s mid)]))
+ (if-let [last-period (str/last-index-of s ".")]
+ [(subs s 0 (inc last-period)) (subs s (inc last-period))]
+ [s ""]))
(defn get-frame-objects
"Retrieves a new objects map only with the objects under frame-id (with frame-id)"
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 ac79cac5f..4c6d3910b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
@@ -21,7 +21,7 @@
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)
+ splitted-name (cfh/split-by-last-period name)
color (or color (wtt/resolved-value-hex token))
on-click
(mf/use-callback
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 2a2356651..2f68d9d45 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss
@@ -62,22 +62,22 @@
.divided-name-wrapper {
height: $s-16;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ overflow: hidden;
}
.first-name-wrapper {
- display: inline-block;
- max-width: 50%;
overflow: hidden;
- white-space: pre;
text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100%;
}
.last-name-wrapper {
- display: inline-block;
- max-width: 50%;
- overflow: hidden;
- white-space: pre;
- direction: rtl;
+ flex-shrink: 0;
+ margin-left: 4px;
}
.token-pill-applied {