fix(entities-shared): truncate labels in config card items

Kong · Nov 19, 2024 · c8c888a · c8c888a
1 parent a0a821d
commit c8c888a
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 6 deletions.
diff --git a/packages/entities/entities-shared/sandbox/pages/ConfigCardItemPage.vue b/packages/entities/entities-shared/sandbox/pages/ConfigCardItemPage.vue
@@ -191,6 +191,40 @@
       </template>
     </ConfigCardItem>
 
+    <h2>Truncated Labels</h2>
+    <ConfigCardItem
+      :item="{
+        key: 'truncated-label-1',
+        label: 'Super Long Label Will Also Be Truncated With A Tooltip',
+        value: 'I am a really long string but I am not truncated.',
+      }"
+    />
+    <ConfigCardItem
+      :item="{
+        key: 'truncated-label-2',
+        label: 'Double Tooltips! Super Long Label Will Also Be Truncated With A Tooltip',
+        value: 'I am a really long string but I am not truncated.',
+        tooltip: 'I am the tooltip for the supaa long label',
+      }"
+    />
+    <ConfigCardItem
+      :item="{
+        key: 'truncated-label-3',
+        label: 'Super Long Label Will Also Be Truncated With A Tooltip',
+        value: 'I am a really long string and I am truncated.',
+      }"
+      truncated
+    />
+    <ConfigCardItem
+      :item="{
+        key: 'truncated-label-4',
+        label: 'Double Tooltips! Super Long Label Will Also Be Truncated With A Tooltip',
+        value: 'I am a really long string and I am truncated.',
+        tooltip: 'I am the tooltip for the supaa long label',
+      }"
+      truncated
+    />
+
     <h2>Slim card</h2>
     <div style="width: 400px;">
       <ConfigCardItem
@@ -235,6 +269,42 @@
         }"
         slim
       />
+      <ConfigCardItem
+        :item="{
+          key: 'slim6',
+          label: 'Super Long Label Will Also Be Truncated With A Tooltip',
+          value: 'I am a really long string but I am not truncated.',
+        }"
+        slim
+      />
+      <ConfigCardItem
+        :item="{
+          key: 'slim7',
+          label: 'Double Tooltips! Super Long Label Will Also Be Truncated With A Tooltip',
+          value: 'I am a really long string but I am not truncated.',
+          tooltip: 'I am the tooltip for the supaa long label',
+        }"
+        slim
+      />
+      <ConfigCardItem
+        :item="{
+          key: 'slim8',
+          label: 'Super Long Label Will Also Be Truncated With A Tooltip',
+          value: 'I am a really long string and I am truncated.',
+        }"
+        slim
+        truncated
+      />
+      <ConfigCardItem
+        :item="{
+          key: 'slim9',
+          label: 'Double Tooltips! Super Long Label Will Also Be Truncated With A Tooltip',
+          value: 'I am a really long string and I am truncated.',
+          tooltip: 'I am the tooltip for the supaa long label',
+        }"
+        slim
+        truncated
+      />
     </div>
   </div>
 </template>

diff --git a/...ages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.cy.ts b/...ages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.cy.ts
@@ -54,11 +54,11 @@ describe('<ConfigCardItem />', () => {
       cy.getTestId(`${item.key}-label-tooltip`).should('not.exist')
 
       cy.get('.config-card-details-row').invoke('width').then((rowWidth) => {
-        cy.getTestId(`${item.key}-label`).invoke('width').then((labelWidth) => {
+        cy.getTestId(`${item.key}-label`).invoke('outerWidth').then((labelWidth) => {
           expect(labelWidth).to.be.closeTo(Number(rowWidth) / 2, 1)
         })
-        cy.getTestId(`${item.key}-plain-text`).invoke('width').then((labelWidth) => {
-          expect(labelWidth).to.be.closeTo(Number(rowWidth) / 2, 1)
+        cy.getTestId(`${item.key}-value`).invoke('outerWidth').then((valueWidth) => {
+          expect(valueWidth).to.be.closeTo(Number(rowWidth) / 2, 1)
         })
       })
     })

diff --git a/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue b/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue
@@ -9,7 +9,15 @@
         name="label"
       >
         <KLabel :tooltip-attributes="{ maxWidth: '500px' }">
-          {{ item.label }}
+          <KTooltip :text="isLabelTruncated ? item.label : ''">
+            <span
+              ref="labelContent"
+              class="label-content"
+            >
+              {{ item.label }}
+            </span>
+          </KTooltip>
+
           <template
             v-if="hasTooltip"
             #tooltip
@@ -308,10 +316,11 @@ const componentAttrsData = computed((): ComponentAttrsData => {
   }
 })
 
+const labelContent = ref<HTMLElement>()
 const textContent = ref<HTMLElement>()
 
+const { isTruncated: isLabelTruncated } = composables.useTruncationDetector(labelContent as Ref<HTMLElement>)
 const { isTruncated } = composables.useTruncationDetector(textContent as Ref<HTMLElement>)
-
 </script>
 
 <script lang="ts">
@@ -325,22 +334,41 @@ export default {
 
 <style lang="scss" scoped>
 .config-card-details-row {
-  align-items: center;
+  align-items: baseline;
+  border: 1px solid blue;
   border-bottom: v-bind('isJsonArray ? "none" : `solid ${KUI_BORDER_WIDTH_10} ${KUI_COLOR_BORDER}`');
+  box-sizing: border-box;
   display: v-bind('isJson && itemHasValue ? "block" : "flex"');
   padding: $kui-space-60;
   padding-left: 0;
   width: 100%;
 
   .config-card-details-label {
+    border: 1px solid red;
+    padding-right: $kui-space-60;
     width: v-bind('isJson && itemHasValue ? "100%" : props.slim ? "50%" : "25%"');
 
     label {
       color: $kui-color-text-neutral-stronger;
+      display: inline-flex;
+      max-width: 100%;
+
+      .label-content {
+        line-height: initial;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .k-popover {
+        min-width: 0;
+      }
     }
   }
 
   .config-card-details-value {
+    border: 1px solid green;
     width: v-bind('isJson && itemHasValue ? "100%" : props.slim ? "50%" : "75%"');
 
     .truncated {