Migrating from ghl-ui Text to HighRise Text

HighRise HLText consolidates all ghl-ui text and typography variants into a single component. It keeps the same size/weight tokens, adds a type="display" preset, and lets you pick the HTML tag while handling disabled styling.

Component Implementation Changes

Import Changes

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

Basic Usage Changes

Basic Text

- <UIText>Basic Text</UIText>
+ <HLText 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 size="4xl">Large Text</HLText>
+ <HLText size="lg">Normal Text</HLText>
+ <HLText 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 weight="regular">Regular Text</HLText>
+ <HLText weight="medium">Medium Text</HLText>
+ <HLText weight="semibold">Semibold Text</HLText>
+ <HLText weight="bold">Bold Text</HLText>

Display Text

- <UIText size="4xl" weight="bold">Display Text</UIText>
+ <HLText size="lg" weight="bold" type="display">Display Text</HLText>

Custom HTML Tag

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

Migrating Prebuilt Text Components

Replace individual ghl-ui typography exports with HLText using the same size/weight tokens:

ghl-ui Component	HighRise Replacement
UITextLgMedium	<HLText size="3xl" weight="medium">
UITextMdMedium	<HLText size="2xl" weight="medium">
UITextMdNormal	<HLText size="2xl" weight="regular">
UITextSmMedium	<HLText size="lg" weight="medium">
UITextSmNormal	<HLText size="lg" weight="regular">
UITextSmRegular	<HLText size="lg" weight="regular">
UITextXsMedium	<HLText size="sm" weight="medium">
UITextXsRegular	<HLText size="sm" weight="regular">
UIDisplaySmMedium	<HLText type="display" size="sm" weight="medium">
UIDisplaySmSemibold	<HLText type="display" size="md" weight="semibold">

Props Changes

ghl-ui Prop	HighRise Prop	Notes
id (required)	id (optional)	Provide when another element references the text (e.g., labels)
size	size	Same tokens (4xl … 4xs); defaults to md
weight	weight	Same tokens; defaults to regular
htmlTag	htmlTag	Same behavior; defaults to 'p'
–	type	'text' | 'display'; defaults to 'text'
–	disabled	Grays out text using design tokens

Examples

Article Layout

<template>
  <div class="space-y-4">
    <HLText size="4xl" weight="bold" type="display">Article Title</HLText>
    <HLText size="xl" weight="medium">Article Subtitle</HLText>
    <HLText size="lg">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </HLText>
    <HLText size="sm" weight="medium">Posted on January 1, 2024</HLText>
  </div>
</template>

Form Label

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

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

const fieldId = 'email-input'
</script>

Best Practices

1. Use type="display" for prominent headings; keep type="text" for body copy.
2. Choose semantic htmlTag values (label, span, p, h*) to preserve accessibility.
3. Keep size/weight consistent across views to maintain hierarchy.
4. Add id only when another element references the text (e.g., aria-labelledby).
5. Prefer utility classes for color tweaks; reserve disabled for true disabled states.

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