Migrating from ghl-ui PerformanceEllipsis to HighRise Ellipsis

This guide helps you migrate from the legacy UIPerformanceEllipsis component to the new HLEllipsis component. The new component provides improved accessibility, richer tooltip control, and clearer prop names.

Component Implementation Changes

Import Changes

- import { UIPerformanceEllipsis } from '@gohighlevel/ghl-ui'
+ import { HLEllipsis } from '@platform-ui/highrise'

Basic Usage Changes

- <UIPerformanceEllipsis :line-clamp="2">
-   {{ longText }}
- </UIPerformanceEllipsis>
+ <HLEllipsis id="my-ellipsis" :line-clamp="2" :tooltip-props="{ width: 400 }">
+   {{ longText }}
+ </HLEllipsis>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
expandTrigger	expandOn	Values: 'click', 'hover', 'focus', 'manual'
lineClamp	lineClamp	Number only
tooltip	tooltipProps	Accepts HLPopover props (placement, trigger, width, delay, offset…)
-	showTooltip	Boolean to toggle tooltip rendering (default: true)
-	id	Optional; defaults to hr-ellipsis-id

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
tooltip	tooltip	Enhanced with HighRise popover support

Examples

Basic Single-line Ellipsis

<template>
  <HLEllipsis id="basic-ellipsis" :tooltip-props="{ width: 400 }">
    This is a very long text that will be truncated with an ellipsis.
  </HLEllipsis>
</template>

<script setup>
import { HLEllipsis } from '@platform-ui/highrise'
</script>

Multi-line Ellipsis with Custom Tooltip

<template>
  <HLEllipsis
    id="multi-line-ellipsis"
    :line-clamp="2"
    :tooltip-props="{
      placement: 'right',
      trigger: 'hover',
      width: 300,
      delay: 100,
      offset: 12,
    }"
  >
    <template #tooltip>
      <div class="custom-tooltip">
        <h4>Custom Tooltip Header</h4>
        <p>{{ longText }}</p>
      </div>
    </template>
    {{ longText }}
  </HLEllipsis>
</template>

<script setup>
import { HLEllipsis } from '@platform-ui/highrise'

const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
</script>

Click to Expand Without Tooltip

<template>
  <HLEllipsis id="expandable-ellipsis" :line-clamp="2" expand-on="click" :show-tooltip="false">
    {{ longText }}
  </HLEllipsis>
</template>

<script setup>
import { HLEllipsis } from '@platform-ui/highrise'

const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
</script>

With Form Integration

<template>
  <HLFormItem label="Description">
    <HLEllipsis
      id="form-ellipsis"
      :line-clamp="3"
      :tooltip-props="{
        placement: 'top',
        width: 400,
      }"
    >
      {{ description }}
    </HLEllipsis>
  </HLFormItem>
</template>

<script setup>
import { HLEllipsis, HLFormItem } from '@platform-ui/highrise'

const description = 'Long form description text...'
</script>

Breaking Changes

1. tooltip now expects HLPopover props (or false); booleans are no longer accepted directly.
2. lineClamp only accepts numbers.
3. expandTrigger ➜ expandOn.
4. Tooltip rendering can be disabled via show-tooltip (default is enabled).

Best Practices

1. Use line-clamp for multi-line truncation; omit it for single-line truncation.
2. Disable the tooltip with show-tooltip="false" when content is short or already visible.
3. Keep tooltip widths reasonable (200–400px) and aligned with placement.
4. Choose expand-on="click" for interactive contexts; hover for passive previews.
5. Provide id for deterministic testing hooks when needed; otherwise the component supplies one.

Common Patterns

Table Cell Content

<template>
  <HLTable>
    <HLTableCell>
      <HLEllipsis
        :id="`cell-${rowId}`"
        :line-clamp="1"
        :tooltip-props="{
          placement: 'top',
          width: 300,
        }"
      >
        {{ cellContent }}
      </HLEllipsis>
    </HLTableCell>
  </HLTable>
</template>

Card Description

<template>
  <HLCard>
    <HLEllipsis :id="`card-${cardId}`" :line-clamp="3" expand-on="click" :show-tooltip="false">
      {{ cardDescription }}
    </HLEllipsis>
  </HLCard>
</template>

List Item

<template>
  <HLList>
    <HLListItem>
      <HLEllipsis
        :id="`list-${itemId}`"
        :line-clamp="2"
        :tooltip-props="{
          placement: 'right',
          width: 250,
        }"
      >
        {{ itemContent }}
      </HLEllipsis>
    </HLListItem>
  </HLList>
</template>