Migrating from ghl-ui Text to HighRise Text

This guide will help you migrate from the ghl-ui Text component to the new HighRise Text component. The Text component has been completely redesigned with enhanced accessibility, consistent sizing, improved typography system, and better integration with the HighRise design system.

Component Implementation Changes

Import Changes

- import { UIText } from '@gohighlevel/ghl-ui'
- import { UITextLgMedium } from '@gohighlevel/ghl-ui'
- import { UITextSmNormal } from '@gohighlevel/ghl-ui'
- import { UITextSmMedium } from '@gohighlevel/ghl-ui'
- import { UITextXsMedium } from '@gohighlevel/ghl-ui'
- import { UITextMdMedium } from '@gohighlevel/ghl-ui'
- import { UITextMdNormal } from '@gohighlevel/ghl-ui'
- import { UITextSmRegular } from '@gohighlevel/ghl-ui'
- import { UITextXsRegular } from '@gohighlevel/ghl-ui'
- import { UIDisplaySmMedium } from '@gohighlevel/ghl-ui'
- import { UIDisplaySmSemibold } from '@gohighlevel/ghl-ui'
+ import { HLText } from '@platform-ui/highrise'

Basic Usage Changes

Basic Text

- <UIText>Basic Text</UIText>
+ <HLText id="basic-text" size="md" weight="regular">
+   Basic Text
+ </HLText>

Different Sizes

- <UIText size="4xl">Large Text</UIText>
- <UIText size="lg">Normal Text</UIText>
- <UIText size="sm">Small Text</UIText>

+ <HLText id="large-text" size="4xl">Large Text</HLText>
+ <HLText id="normal-text" size="lg">Normal Text</HLText>
+ <HLText id="small-text" size="sm">Small Text</HLText>

Font Weights

- <UIText weight="regular">Regular Text</UIText>
- <UIText weight="medium">Medium Text</UIText>
- <UIText weight="semibold">Semibold Text</UIText>
- <UIText weight="bold">Bold Text</UIText>

+ <HLText id="regular-text" weight="regular">Regular Text</HLText>
+ <HLText id="medium-text" weight="medium">Medium Text</HLText>
+ <HLText id="semibold-text" weight="semibold">Semibold Text</HLText>
+ <HLText id="bold-text" weight="bold">Bold Text</HLText>

Display Text

- <UIText size="4xl" weight="bold">Display Text</UIText>

+ <HLText
+   id="display-text"
+   size="lg"
+   type="display"
+   weight="bold"
+ >
+   Display Text
+ </HLText>

Custom HTML Tag

- <UIText htmlTag="span">Inline Text</UIText>

+ <HLText id="inline-text" htmlTag="span">Inline Text</HLText>

Migrating Prebuilt Text Components

Some projects may use prebuilt text components from ghl-ui, such as UITextLgMedium, UITextSmNormal, etc. These are now replaced by using the HLText component with the appropriate size and weight props. This approach provides more flexibility and consistency with the HighRise design system.

Below are the recommended migrations:

- <UITextLgMedium>Large Medium Text</UITextLgMedium>
+ <HLText id="lg-medium-text" size="3xl" weight="medium">Large Medium Text</HLText>

- <UITextMdMedium>Medium Medium Text</UITextMdMedium>
+ <HLText id="md-medium-text" size="2xl" weight="medium">Medium Medium Text</HLText>

- <UITextMdNormal>Medium Normal Text</UITextMdNormal>
+ <HLText id="md-normal-text" size="2xl" weight="regular">Medium Normal Text</HLText>

- <UITextSmMedium>Small Medium Text</UITextSmMedium>
+ <HLText id="sm-medium-text" size="lg" weight="medium">Small Medium Text</HLText>

- <UITextSmNormal>Small Normal Text</UITextSmNormal>
+ <HLText id="sm-normal-text" size="lg" weight="regular">Small Normal Text</HLText>

- <UITextSmRegular>Small Regular Text</UITextSmRegular>
+ <HLText id="sm-regular-text" size="lg" weight="regular">Small Regular Text</HLText>

- <UITextXsMedium>Extra Small Medium Text</UITextXsMedium>
+ <HLText id="xs-medium-text" size="sm" weight="medium">Extra Small Medium Text</HLText>

- <UITextXsRegular>Extra Small Regular Text</UITextXsRegular>
+ <HLText id="xs-regular-text" size="sm" weight="regular">Extra Small Regular Text</HLText>

- <UIDisplaySmMedium>Display Small Medium Text</UIDisplaySmMedium>
+ <HLText id="display-sm-medium-text" size="sm" weight="medium" type="display">Display Small Medium Text</HLText>

- <UIDisplaySmSemibold>Display Small Semibold Text</UIDisplaySmSemibold>
+ <HLText id="display-sm-semibold-text" size="md" weight="semibold" type="display">Display Small Semibold Text</HLText>

Note:

• Always provide a unique id prop for accessibility.
• You can further customize the text using other HLText props as needed.
• The size mappings follow the table below:

ghl-ui Component	HighRise Size	HighRise Weight
TextLgMedium	3xl	medium
TextMdMedium	2xl	medium
TextMdNormal	2xl	regular
TextSmMedium	lg	medium
TextSmNormal	lg	regular
TextXsMedium	sm	medium
TextXsRegular	sm	regular
DisplaySmMedium	sm	medium
DisplaySmSemibold	md	semibold

Props Changes

Required Props

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

Modified Props

ghl-ui Prop	HighRise Prop	Notes
size	size	Same size options but with different styling and line heights
weight	weight	Same weight options but with standardized font weights
htmlTag	htmlTag	Same functionality, defaults to 'p'
class	class	Same functionality for custom styling

New Props

Prop	Type	Default	Description
type	'text' | 'display'	'text'	Type of text - regular text or display text

Size Options (Same in both versions)

type TextSize =
  | '4xl' // 20px, line-height: 30px
  | '3xl' // 18px, line-height: 28px
  | '2xl' // 16px, line-height: 24px
  | 'xl' // 15px, line-height: 20px
  | 'lg' // 14px, line-height: 20px
  | 'md' // 13px, line-height: 18px
  | 'sm' // 12px, line-height: 17px
  | 'xs' // 11px, line-height: 16px
  | '2xs' // 10px, line-height: 15px
  | '3xs' // 9px, line-height: 14px
  | '4xs' // 8px, line-height: 12px

Weight Options (Same in both versions)

type Weight = 'regular' | 'medium' | 'semibold' | 'bold'

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
default	default	Main content (unchanged)

Examples

Article Layout Example

<template>
  <div class="space-y-4">
    <HLText id="article-title" size="4xl" weight="bold" type="display"> Article Title </HLText>

    <HLText id="article-subtitle" size="xl" weight="medium"> Article Subtitle </HLText>

    <HLText id="article-content" size="lg">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </HLText>

    <HLText id="article-footer" size="sm" weight="medium"> Posted on January 1, 2024 </HLText>
  </div>
</template>

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

Display Text with Custom Styling

<template>
  <HLText id="custom-display" type="display" size="lg" weight="bold" class="text-blue-500 hover:text-blue-600">
    Custom Display Text
  </HLText>
</template>

Form Label Example

<template>
  <div class="space-y-2">
    <HLText id="form-label" size="sm" weight="medium" htmlTag="label"> Email Address </HLText>
    <input type="email" class="form-input" />
    <HLText id="form-help" size="xs" weight="regular" class="text-gray-500"> We'll never share your email with anyone else. </HLText>
  </div>
</template>

Breaking Changes

1. Required ID

   • New required id prop for accessibility
   • Must be unique within the page

2. Display Type System

   • Added new type prop for display text
   • Different styling for display vs regular text

3. Line Heights

   • Standardized line heights for each size
   • May affect existing layouts

4. CSS Variables

   • New CSS variable naming convention
   • Different theming approach

5. Default HTML Tag

   • More semantic default tags
   • May affect styling in some cases

Best Practices

1. Always provide unique id props for accessibility
2. Use appropriate sizes for different contexts
3. Choose semantic HTML tags when needed
4. Consider mobile responsiveness
5. Follow accessibility guidelines
6. Use display type for larger, more prominent text
7. Keep text content concise and readable
8. Maintain consistent typography hierarchy
9. Use appropriate font weights for emphasis
10. Consider line height and readability