Migrating from ghl-ui ColorPicker to HighRise ColorPicker

This guide will help you migrate from the ghl-ui ColorPicker component to the new HighRise ColorPicker component.

Component Implementation Changes

Import Changes

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

Basic Usage Changes

- <UIColorPicker
-   v-model="selectedColor"
-   label="Select Color"
- />

+ <HLColorPicker
+   id="color-picker"
+   v-model:value="selectedColor"
+   label="Select Color"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Theme Color">
-     <UIColorPicker
-       v-model="formModel.themeColor"
-       label="Select Color"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Theme Color"
+     path="themeColor"
+     required
+   >
+     <HLColorPicker
+       id="theme-color"
+       v-model:value="formModel.themeColor"
+       label="Select Color"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model	v-model:value	Changed to use value prop
status	status	New prop for validation status
validation-message	validation-message	New prop for validation feedback
clearable	clearable	New prop for clearing selection
size	size	New size options: 'sm', 'md', 'lg'
showAlpha	showAlpha	New prop for alpha channel control
modes	modes	New prop for color picker modes
swatches	swatches	New prop for predefined colors

Examples

Basic ColorPicker

<template>
  <HLColorPicker id="basic-colorpicker" v-model:value="selectedColor" label="Select Color" />
</template>

<script setup>
import { ref } from 'vue'
import { HLColorPicker } from '@platform-ui/highrise'

const selectedColor = ref('#000000')
</script>

ColorPicker with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Theme Color" path="themeColor" required>
      <HLColorPicker
        id="theme-color"
        v-model:value="formModel.themeColor"
        label="Select Color"
        :status="validationStatus"
        :validation-message="validationMessage"
      />
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { ref, computed } from 'vue'
import { HLForm, HLFormItem, HLColorPicker } from '@platform-ui/highrise'

const formModel = ref({
  themeColor: '#000000',
})

const validationStatus = computed(() => {
  if (!formModel.value.themeColor) return 'error'
  return undefined
})

const validationMessage = computed(() => {
  if (!formModel.value.themeColor) return 'Please select a color'
  return undefined
})

const rules = {
  themeColor: [
    {
      required: true,
      message: 'Please select a color',
      trigger: 'change',
    },
  ],
}
</script>

ColorPicker with Different Sizes

<template>
  <div class="space-y-4">
    <HLColorPicker id="colorpicker-lg" v-model:value="value" size="lg" label="Large ColorPicker" />
    <HLColorPicker id="colorpicker-md" v-model:value="value" size="md" label="Medium ColorPicker" />
    <HLColorPicker id="colorpicker-sm" v-model:value="value" size="sm" label="Small ColorPicker" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HLColorPicker } from '@platform-ui/highrise'

const value = ref('#000000')
</script>

ColorPicker with Alpha Channel

<template>
  <HLColorPicker id="colorpicker-alpha" v-model:value="selectedColor" label="Select Color" :showAlpha="true" />
</template>

<script setup>
import { ref } from 'vue'
import { HLColorPicker } from '@platform-ui/highrise'

const selectedColor = ref('rgba(0, 0, 0, 1)')
</script>

ColorPicker with Swatches

<template>
  <HLColorPicker id="colorpicker-swatches" v-model:value="selectedColor" label="Select Color" :swatches="colorSwatches" />
</template>

<script setup>
import { ref } from 'vue'
import { HLColorPicker } from '@platform-ui/highrise'

const selectedColor = ref('#000000')
const colorSwatches = ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF']
</script>

Best Practices

1. Always provide a unique id for accessibility
2. Use v-model:value for two-way binding
3. Implement proper form validation
4. Use appropriate size variants
5. Consider mobile responsiveness
6. Add proper ARIA labels
7. Handle loading states appropriately
8. Use descriptive labels
9. Implement proper error handling
10. Consider using tooltips for additional information
11. Handle disabled states properly
12. Use consistent spacing and alignment
13. Consider color format preferences
14. Handle color accessibility
15. Use appropriate color swatches
16. Consider color mode preferences

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through validation status
3. Supports keyboard navigation
4. Maintains consistent styling with other form components
5. Handles disabled states consistently
6. Integrates seamlessly with form validation
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support
13. Supports color format conversion
14. Handles color parsing and formatting
15. Supports custom color formats
16. Provides clear color input validation
17. Supports color mode switching
18. Handles color swatch selection