Compat Mode

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

Note

With the release of @platform-ui/ghl-ui, teams are expected to use the new package alongside HighRise in their existing projects. Enhancement requests submitted via #design-system will only be considered for HighRise going forward. ghl-ui under both domains (@gohighlevel & @platform-ui) will enter maintenance mode and will receive P0 and P1 critical bug fixes only.

Migrating to @platform-ui/ghl-ui

1. Remove @gohighlevel/ghl-ui from your dependencies

yarn remove @gohighlevel/ghl-ui

2. Run the below command to fetch and add the latest version of @platform-ui/ghl-ui to your project

yarn add @platform-ui/ghl-ui@latest

3. Replace all existing references of @gohighlevel/ghl-ui to @platform-ui/ghl-ui

Note

If you added the node_modules path to @gohighlevel/ghl-ui in the content attribute of your Tailwind config, update it to the new package path as well.

Component.vue

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

+ import { UIButton } from '@platform-ui/ghl-ui'

styles.css

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

+ import '@platform-ui/ghl-ui/style.css'

Working on your first screen

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

• Import the above @platform-ui/ghl-ui stylesheet along with the HighRise stylesheet
• Use ONLY HighRise provided HLContentWrap. UIContentWrap from @platform-ui/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 '@platform-ui/ghl-ui'
import '@platform-ui/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 '@platform-ui/ghl-ui'

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

highrise-notification.ts

import { useHLNotification, 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 run into issues, reach out to the Platform-UI Team here.