Compat Mode

Migrating an existing project using @gohighlevel/ghl-ui to work with @platform-ui/highrise.

Note

With the introduction of ghl-ui compat release stream, teams are expected to use compat mode alongside HighRise in their existing projects.Enhancement requests submitted via #design-system will be considered only for HighRise going forward. ghl-ui will enter maintenance mode and will only receive P0 and P1 critical bug fixes.

Migrating to compat release stream

Run the below command to fetch and add the latest compat version of ghl-ui to your project.

yarn add @gohighlevel/ghl-ui@compat

Import the ghl-ui stylesheet into your project.

import '@gohighlevel/ghl-ui/dist/style.css'

Working on your first screen

Follow the steps provided here for installing @platform-ui/highrise. Additionally, make sure to:

• Import the above ghl-ui stylesheet along with the HighRise stylesheet
• Use ONLY HighRise provided HLContentWrap. UIContentWrap from ghl-ui is deprecated [ref].

src/pages/MyNewPage.vue

<script lang="ts" setup>
import {
  HLContentWrap,
  HLButton,
  // highrise components
} from '@platform-ui/highrise'
import {
  UIButton,
  // ghl-ui components
} from '@gohighlevel/ghl-ui'
import '@gohighlevel/ghl-ui/style.css'
import '@platform-ui/highrise/style.css'
</script>

<template>
  <HLContentWrap>
    <UIButton> hello world! </UIButton>
    <HLButton> hello world! </HLButton>
  </HLContentWrap>
</template>

Breaking Changes

Classname and Prefixes

• hl-wrapper-container -> hr-wrapper-container

If you have overridden ghl-ui classnames, the classname prefix needs to be updated from

• .ghl- -> .ui-
• .hl- -> .ui-

If you have overridden naive-ui classnames, the classname prefix needs to be updated from

• .n- -> .hr-

Deprecated Components

The following components are removed from ghl-ui. Here are their HighRise alternatives and links to detailed migration guides:

Component	HighRise Alternative	Migration Guide
UIContentWrap	HLContentWrap	No breaking changes in functionality
useNotification	HLAlert	Migration Guide

You can use the transformNotificationOpts util to transform ghl-ui notification props to HighRise compatible ones.

ghl-ui-notification.ts

import { useNotification } from '@gohighlevel/ghl-ui'

const notification = useNotification()
function openNotification() {
  notification.success(props)
}

highrise-notification.ts

import { useNotification, transformNotificationOpts } from '@platform-ui/highrise'

const notification = useHLNotification()
function openNotification() {
  notification.create(transformNotificationOpts({ ...props, type: 'success' }))
}

For detailed documentation on each component's props, slots, and events, click the component links above.

If you face any issues, please feel free to reach out to the team here.