App 4656 add ability to truncate breadcrumb items and pills (viamrobo…

…tics#520)
micheal-parks · May 21, 2024 · 08addf6 · 08addf6
1 parent 7971d1d
commit 08addf6
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.118",
+  "version": "0.0.119",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/breadcrumbs.svelte b/packages/core/src/lib/breadcrumbs.svelte
@@ -27,7 +27,7 @@ export { extraClasses as cx };
   )}
 >
   {#each crumbs as crumb, index (crumb)}
-    <small class="text-xs">
+    <small class="truncate text-xs">
       {crumb}
     </small>
     {#if index !== crumbs.length - 1}

diff --git a/packages/core/src/lib/pill.svelte b/packages/core/src/lib/pill.svelte
@@ -69,9 +69,7 @@ const handleRemove = () => {
       size="sm"
     />
   {/if}
-  <span>
-    {value}
-  </span>
+  <span class="truncate">{value}</span>
   {#if !readonly && removable}
     <button
       type="button"

diff --git a/packages/core/src/lib/tooltip/tooltip-text.svelte b/packages/core/src/lib/tooltip/tooltip-text.svelte
@@ -57,7 +57,7 @@ $: style.register({
   />
 
   <div
-    class="flex items-center gap-1 bg-gray-9 px-2 py-1 text-left text-xs text-white"
+    class="flex items-center gap-1 break-all bg-gray-9 px-2 py-1 text-left text-xs text-white"
   >
     <slot />
   </div>

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1616,7 +1616,9 @@ const onHoverDelayMsInput = (event: Event) => {
   <div class="flex flex-wrap items-start gap-4">
     <Tooltip let:tooltipID>
       <p aria-describedby={tooltipID}>This element has a top tooltip.</p>
-      <p slot="description">This is the tooltip text!</p>
+      <p slot="description">
+        ThisIsTheTooltipTextWithoutSpacesOrHyphensForTestingPurposes
+      </p>
     </Tooltip>
 
     <Tooltip
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,7 +57,7 @@ $: style.register({ @@
       />
       <div
-        class="flex items-center gap-1 bg-gray-9 px-2 py-1 text-left text-xs text-white"
+        class="flex items-center gap-1 break-all bg-gray-9 px-2 py-1 text-left text-xs text-white"
       >
         <slot />
       </div>
@@ Expand Down @@