HighRise

Migrating from ghl-ui ColorPicker to HighRise ColorPicker ​

UIColorPicker maps to HLColorPicker, but the HighRise version uses section-based swatches and does not include built-in validation props. IDs are required and the popover configuration differs slightly.

Component Implementation Changes ​

Import Changes ​

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

Basic Usage Changes ​

diff
- <UIColorPicker v-model="selectedColor" label="Select Color" />
+ <HLColorPicker
+   id="color-picker"
+   v-model:value="selectedColor"
+   :swatches="[{ key: 'default', label: 'Default', swatches: ['#ff0000ff', '#00ff00ff'] }]"
+/>

Props Changes ​

| ghl-ui Prop | HighRise Prop | Notes | | ------------------------------------------------------- | ----------------------------------- | -------------------------------------------------------------- | ---------------- | ------------------------------------------------ | | v-model / value | value + v-model:value | Same binding pattern; accepts string or HLColorSwatch. | | placement | placement | Default bottom-start; same semantics. | | enableAlpha | pickerOptions.showAlpha | HighRise defaults to true. | | modes | pickerOptions.pickerFormatOptions | Allowed: HEX, RGB, HSL, HSB, Custom. | | type (default/compact/swatches/brand-colors/square) | type (swatch | picker | inline-picker) | Use type='picker' for inline picker-only mode. | | swatches (string[]) | swatches (section objects) | See section format below. | | to, show | — | Not exposed in HLColorPicker; rely on default portal behavior. | | defaultValue | value default '#000000ff' | Provide 8-digit hex when possible. | | - | autoCloseOnSelect | Close popover after selection (default false). | | - | swatchShape, swatchSize | Control tile shape/size (square + xs defaults). |

Swatch Section Format (HighRise) ​

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

Picker Options (HighRise) ​

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

Examples ​

Basic Picker with Swatches ​

vue
<template>
  <HLColorPicker
    id="theme-color"
    v-model:value="color"
    :swatches="[
      { key: 'brand', label: 'Brand', swatches: ['#0066ffcc', '#1e293bff'] },
      { key: 'neutrals', label: 'Neutrals', swatches: ['#ffffffff', '#000000ff'], showTransparentSwatch: true },
    ]"
    :picker-options="{ defaultPickerFormat: 'HEX', showAlpha: true }
  />
</template>

<script setup>
import { ref } from 'vue'

const color = ref('#0066ffcc')
</script>

Inline Picker Only ​

vue
<HLColorPicker id="inline-picker" type="picker" v-model:value="value" :picker-options="{ pickerFormatOptions: ['HEX', 'RGB'] }" />