Migrating from ghl-ui Modal to HighRise Modal

This guide updates UIModal → HLModal, covering props, events, and defaults.

Component Implementation Changes

Import Changes

- import { UIModal } from '@gohighlevel/ghl-ui'
+ import { HLModal } from '@platform-ui/highrise'

Basic Usage

- <UIModal v-model:show="open">Content</UIModal>
+ <HLModal id="confirm-modal" v-model:show="open">Content</HLModal>

With Header/Footer

<template>
  <HLModal id="info-modal" v-model:show="open" type="info" show-footer>
    <template #header>Info</template>
    Body content goes here.
    <template #footer>
      <div class="flex justify-end gap-2">
        <HLButton id="cancel" variant="secondary" @click="open = false">Cancel</HLButton>
        <HLButton id="ok" color="blue" @click="onOk">OK</HLButton>
      </div>
    </template>
  </HLModal>
</template>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
id (required)	id (required)	Required for accessibility
show / v-model:show	show / v-model:show	Same, default false
maskClosable	maskClosable	Default true
closeOnEsc	closeOnEsc	Default true
type (default/info/success/warning/error)	type	Same set; default default
width	width	Default 483
-	showHeader, showFooter, showHeaderIcon, showClose, showBack, footerDivider	Visibility toggles (defaults: header/footer/showClose/headerIcon = true; showBack=false)
-	autoFocus	Default false
-	className	Optional extra class
-	to	Teleport target
-	zIndex	Overrides stacking

Events Changes

ghl-ui Event	HighRise Event	Notes
update:show	update:show	Same two-way binding
close	close	Same
-	after-enter, after-leave, before-leave, esc, mask-click, back, left-click, right-primary-click, right-secondary-click	Additional lifecycle and footer button events

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
header	header	Same
footer	footer	Same; built-in footer available when slot absent
default	default	Same

Breaking Changes

1. Required id — HLModal requires id for accessibility.
2. Footer defaults — Footer is shown by default; disable with showFooter=false or override via slot.
3. Teleport target — to defaults to document body; set explicitly if portal conflicts.
4. Type handling — type drives header icon and styling; ensure mapped values.

Best Practices

1. Provide id and aria labels via slots when content isn’t self-descriptive.
2. Use v-model:show for two-way control; handle close/update:show to sync state.
3. Turn off maskClosable/closeOnEsc for destructive flows.
4. Use footerDivider when the footer needs separation from content.

MCPs: always set id; rely on v-model:show; disable maskClosable/closeOnEsc for destructive dialogs; prefer slot footer only when built-in buttons don’t fit.