Migrating from ghl-ui AdvancedColorPicker to HighRise ColorPicker

The AdvancedColorPicker component from ghl-ui has been reimplemented as HLColorPicker in HighRise UI with improved TypeScript support, better accessibility, and enhanced functionality. This guide will help you migrate your color pickers to use the new HLColorPicker component.

Component Implementation Changes

Import Changes

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

Basic Usage Changes

- <UIAdvancedColorPicker
-   v-model="selectedColor"
-   :swatches="swatches"
- />

+ <HLColorPicker
+   id="color-picker"
+   v-model:value="selectedColor"
+   :swatches="swatchSections"
+   type="swatch"
+   swatchShape="square"
+   swatchSize="xs"
+ />

Props Changes

Required Props

ghl-ui Prop	HighRise Prop	Notes
-	id	New required prop for accessibility

Optional Props

ghl-ui Prop	HighRise Prop	Notes
modelValue	value	Use v-model:value for two-way binding
swatches	swatches	Enhanced swatch format with sections (see below)
type	type	Values: 'swatch' or 'picker' (default: 'swatch')
-	swatchShape	Values: 'square', 'circle', 'rectangle' (default: 'square')
-	swatchSize	Values: 'lg', 'md', 'sm', 'xs', '2xs', '3xs' (default: 'xs')
-	autoCloseOnSelect	Whether to close picker after selection (default: false)
-	pickerOptions	Configuration options for the color picker
-	width	Width of the color picker in pixels (default: 276)
-	placement	Dropdown placement (default: 'bottom-start')

Swatch Section Format

The HighRise ColorPicker uses a more structured format for organizing color swatches:

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
  value8: string
  label?: string
  oldValue?: string | HLColorSwatch
  overrideTileShape?: 'square' | 'circle' | 'rectangle'
}

Picker Options

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

Examples

Basic Color Picker

<template>
  <HLColorPicker
    id="basic-picker"
    v-model:value="selectedColor"
    :swatches="[
      {
        key: 'basic',
        label: 'Basic Colors',
        swatches: [
          '#FF0000',
          '#00FF00',
          '#0000FF',
          {
            value: '#FF00FF',
            value8: '#FF00FFFF',
            alpha: 100,
            label: 'Magenta',
          },
        ],
      },
    ]"
  />
</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,
    }"
  />
</template>

<script setup>
const selectedColor = ref('#FF0000')
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>