Migrating from ghl-ui AdvancedColorPicker to HighRise ColorPicker

UIAdvancedColorPicker does not have a drop-in HighRise equivalent. The closest match is HLColorPicker, which uses section-based swatches and exposes picker configuration plus CRUD emits. Use this guide to map the ghl-ui API to HighRise.

Component Implementation Changes

Import Changes

- import { UIAdvancedColorPicker } from '@gohighlevel/ghl-ui'
+ import { HLColorPicker } from '@platform-ui/highrise'

Basic Usage Changes

- <UIAdvancedColorPicker
-   v-model="selectedColor"
-   :section-options="sectionOptions"
-   :selected-section="selectedSection"
-   :disable-alpha="false"
-   :disable-dropper="false"
- />
+ <HLColorPicker
+   id="color-picker"
+   v-model:value="selectedColor"
+   :swatches="swatchSections"
+   type="swatch"
+   :picker-options="{ defaultPickerFormat: 'HEX', showAlpha: true }"
+ />

Props Changes

Required Props

ghl-ui Prop	HighRise Prop	Notes
-	id	Required for HLColorPicker trigger/popover accessibility

Optional Props

ghl-ui Prop	HighRise Prop	Notes
value / modelValue	value	Bind with v-model:value. Accepts string or HLColorSwatch.
sectionOptions	swatches	HL uses section objects (see format below).
selectedSection	—	Manage active section yourself; use swatches data to control defaults.
disableAlpha	pickerOptions.showAlpha	HL defaults to true; set false to hide alpha controls.
disableHue	pickerOptions.showHue	HL defaults to true; set false to hide hue controls.
disableDropper	swatches[].showEyeDropper	Configure eye-dropper availability per section.
modes	pickerOptions.pickerFormatOptions	HL supports HEX, RGB, HSL, HSB, Custom.
defaultValue	value	HL default is '#000000ff'; prefer 8-digit lower-case hex.
showBrandColors / brandColors	swatches	Model brand colors as additional sections; set editable/showAddButton as needed.
popoverProps	placement, trigger, width	HL defaults: placement='bottom-start', trigger='click', width=298.
showColorPicker (per section)	type / swatches.showAddButton	Use type='picker' for picker-only mode, or showAddButton to add colors within swatches.
-	autoCloseOnSelect	Close popover after a selection (default false).
-	swatchShape, swatchSize	Tile shape (square default) and size (xs default).

Swatch Section Format

HighRise uses section-based swatches with optional add/reset/eye-dropper controls:

interface HLColorPickerSections {
  key: string
  label: string | false
  swatches: Array<HLColorSwatch | string>
  showAddButton?: boolean
  showTransparentSwatch?: boolean
  showEyeDropper?: boolean
  showTooltip?: 'name' | 'value' | 'both' | false
  editable?: boolean
  overrideTileShape?: 'square' | 'circle' | 'rectangle'
}

interface HLColorSwatch {
  alpha: number
  value: string // 6 or 8 digit hex
  value8: string // required 8-digit hex with alpha
  label?: string
  oldValue?: string | HLColorSwatch
  overrideTileShape?: 'square' | 'circle' | 'rectangle'
  custom?: false | string
}

Picker Options

interface HLColorPickerOptions {
  defaultPickerFormat?: 'HEX' | 'RGB' | 'HSL' | 'HSB' | 'Custom'
  pickerFormatOptions?: Array<'HEX' | 'RGB' | 'HSL' | 'HSB' | 'Custom'>
  showAlpha?: boolean // default true
  showCTA?: boolean // default true
  showEyeDropper?: boolean // default true
  showHue?: boolean // default true
  showInputFields?: boolean // default true
}

Event parity tips (inline):

• select → fires (value, sectionKey, sectionIndex, tileIndex) on swatch click.
• swatch:add / swatch:edit / swatch:delete / swatch:reset replace onAdd/onUpdate/onDelete.
• update:picker → emitted with (value, value8, alpha, inputType?, label?, custom?).
• update:swatches → latest swatch list after CRUD.
• update:show → popover visibility.

Examples

Basic Color Picker

<template>
  <HLColorPicker
    id="basic-picker"
    v-model:value="selectedColor"
    :swatches="[
      {
        key: 'basic',
        label: 'Basic Colors',
        swatches: ['#ff0000ff', '#00ff00ff', '#0000ffff'],
        showEyeDropper: true,
        showTransparentSwatch: true,
      },
    ]"
  />
</template>

Advanced Color Picker with Sections

<template>
  <HLColorPicker
    id="advanced-picker"
    v-model:value="selectedColor"
    :swatches="[
      {
        key: 'primary',
        label: 'Primary Colors',
        swatches: primaryColors,
        showAddButton: true,
        showEyeDropper: true,
        showTooltip: 'both',
      },
      {
        key: 'secondary',
        label: 'Secondary Colors',
        swatches: secondaryColors,
        showTransparentSwatch: true,
        editable: true,
      },
    ]"
    :picker-options="{
      defaultPickerFormat: 'HEX',
      showAlpha: true,
      showCTA: true,
      showEyeDropper: true,
      pickerFormatOptions: ['HEX', 'RGB', 'HSB'],
    }"
    auto-close-on-select
  />
</template>

<script setup>
const selectedColor = ref('#ff0000ff')
const primaryColors = [
  {
    value: '#FF0000',
    value8: '#ff0000ff',
    alpha: 100,
    label: 'Red',
  },
  {
    value: '#00FF00',
    value8: '#00ff00ff',
    alpha: 100,
    label: 'Green',
  },
  {
    value: '#0000FF',
    value8: '#0000ffff',
    alpha: 100,
    label: 'Blue',
  },
]
const secondaryColors = [
  {
    value: '#FF00FF',
    value8: '#ff00ffff',
    alpha: 100,
    label: 'Magenta',
  },
  {
    value: '#00FFFF',
    value8: '#00ffffff',
    alpha: 100,
    label: 'Cyan',
  },
  {
    value: '#FFFF00',
    value8: '#ffff00ff',
    alpha: 100,
    label: 'Yellow',
  },
]
</script>