Migrating from ghl-ui Notification to HighRise Notification

HighRise notifications are created via useHLNotification() and render HLAlert with type="notification". You explicitly call create and manage destruction. A provider (HLContentWrap or HLNotificationProvider) must wrap your app.

Import Changes

- import { useNotification } from '@gohighlevel/ghl-ui'
+ import { HLAlert, useHLNotification, transformNotificationOpts } from '@platform-ui/highrise'

Basic Usage

import { h } from 'vue'
import { HLAlert, useHLNotification } from '@platform-ui/highrise'

const notification = useHLNotification()

function openNotification() {
  let instance
  instance = notification.create({
    content: () =>
      h(
        HLAlert,
        {
          id: 'notif-1',
          type: 'notification',
          title: 'Success',
          autoClose: 3000,
          closable: true,
          onClose: () => instance?.destroy(),
        },
        { default: () => 'Operation completed successfully' }
      ),
  })
}

Using transformNotificationOpts

const notification = useHLNotification()

function openNotification() {
  return notification.create(
    transformNotificationOpts({
      title: 'Success',
      duration: 3000,
      type: 'success',
    })
  )
}

Provider Setup

Wrap your app with a provider (one level above where you call useHLNotification):

<HLContentWrap :notification-config="{ placement: 'top-right', max: 5 }">
  <App />
</HLContentWrap>

Config Options (provider)

ghl-ui Config	HighRise Config	Notes
placement	placement	'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'.
max	max	Max notifications visible.
-	scrollable	Allow scroll when exceeding max.
-	containerClass	Custom class for container.
-	containerStyle	Custom styles.
-	to	Target element/selector.

Notification Types

Pass type to HLAlert content: info, success, warning, error, default (maps to color tokens).

Best Practices

1. Create via notification.create and destroy in onClose or onBeforeUnmount (use destroyAll).
2. Use transformNotificationOpts to migrate existing payloads quickly.
3. Keep content short; use custom render functions for complex layouts.
4. Provide stable id on alerts when testing.