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 enhanced TypeScript support, improved accessibility, and better tooltip customization options.

Component Implementation Changes

Import Changes

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

Basic Usage Changes

<!-- Old usage -->
- <UIPerformanceEllipsis :line-clamp="2">
-   {{ longText }}
- </UIPerformanceEllipsis>

<!-- New usage -->
+ <HLEllipsis id="my-ellipsis" :line-clamp="2" :tooltipProps="{ width: 400 }">
+   {{ longText }}
+ </HLEllipsis>

Props Changes

Required Props

ghl-ui Prop	HighRise Prop	Notes
-	id	New required prop for accessibility

Modified Props

ghl-ui Prop	HighRise Prop	Notes
expandTrigger	expandOn	Values: 'click', 'hover', 'focus', 'manual'
lineClamp	lineClamp	Type changed from string/number to number only
tooltip	tooltipProps	Enhanced configuration object (see details below)
-	showTooltip	New prop to control tooltip visibility

Tooltip Configuration Changes

// Old tooltip configuration (ghl-ui)
type TooltipProps =
  | boolean
  | {
      placement?: string
      trigger?: string
    }

// New tooltip configuration (HighRise)
interface EllipsisTooltipProps {
  placement?:
    | 'top'
    | 'top-start'
    | 'top-end'
    | 'right'
    | 'right-start'
    | 'right-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end'
    | 'left'
    | 'left-start'
    | 'left-end'
  trigger?: 'hover' | 'click' | 'focus' | 'manual'
  width?: number
  delay?: number
  duration?: number
  offset?: number
}

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
tooltip	tooltip	Enhanced with better TypeScript support

Examples

Basic Single-line Ellipsis

<!-- Old -->
<template>
  <UIPerformanceEllipsis> This is a very long text that will be truncated with an ellipsis. </UIPerformanceEllipsis>
</template>

<!-- New -->
<template>
  <HLEllipsis id="basic-ellipsis" :tooltipProps="{ 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"
    :tooltipProps="{
      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

<template>
  <HLEllipsis id="expandable-ellipsis" :line-clamp="2" expandOn="click" :tooltipProps="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"
      :tooltipProps="{
        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. Required ID Prop:

   • The id prop is now required for accessibility purposes
   • Must be unique within the page context

2. Tooltip Configuration:

   • Changed from boolean/simple object to comprehensive configuration
   • More structured and type-safe tooltip props
   • New properties for fine-grained control

3. Line Clamp Type:

   • Now only accepts number type
   • String values are no longer supported

4. Expand Trigger:

   • Renamed from expandTrigger to expandOn
   • More consistent with other HighRise components
   • Additional trigger options available

Best Practices

1. Accessibility:

   • Always provide meaningful id values
   • Use appropriate tooltip triggers
   • Consider keyboard navigation

2. Tooltip Usage:

   • Set appropriate tooltip widths
   • Use placement based on context
   • Consider mobile viewports

3. Performance:

   • Disable tooltips when not needed
   • Use appropriate line-clamp values
   • Consider content length

4. User Experience:

   • Provide clear expand triggers
   • Use consistent tooltip behavior
   • Consider loading states

Common Patterns

Table Cell Content

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

Card Description

<template>
  <HLCard>
    <HLEllipsis :id="`card-${cardId}`" :line-clamp="3" expandOn="click" :tooltipProps="false">
      {{ cardDescription }}
    </HLEllipsis>
  </HLCard>
</template>

List Item

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