Migrating from ghl-ui Badge to HighRise Badge

This guide will help you migrate from the ghl-ui Badge component to the new HighRise Badge component. The Badge component has been completely redesigned with enhanced accessibility, consistent sizing, improved color system, and better integration with the HighRise design system.

Component Implementation Changes

Import Changes

- import { UIBadge } from '@gohighlevel/ghl-ui'
+ import { HLBadge } from '@platform-ui/highrise'

Basic Usage Changes

Basic Badge

- <UIBadge value="42">
-   <template #content>
-     <UIAvatar>JD</UIAvatar>
-   </template>
- </UIBadge>
+ <HLBadge
+   id="basic-badge"
+   value="42"
+   color="red"
+   size="md"
+ >
+   <HLAvatar name="John Doe" size="md" />
+ </HLBadge>

Dot Badge

- <UIBadge dot>
-   <template #content>
-     <UIAvatar>JD</UIAvatar>
-   </template>
- </UIBadge>
+ <HLBadge
+   id="dot-badge"
+   dot
+   color="red"
+   size="md"
+ >
+   <HLAvatar name="John Doe" size="md" />
+ </HLBadge>

Custom Content Badge

- <UIBadge>
-   <template #content>
-     <UIAvatar>JD</UIAvatar>
-   </template>
-   <template #value>
-     <ArrowDownIcon class="w-4 h-4" />
-   </template>
- </UIBadge>
+ <HLBadge
+   id="custom-badge"
+   size="xs"
+   :offset="[0, 10]"
+   color="blue"
+ >
+   <HLAvatar name="John Doe" size="md" />
+   <template #value>
+     <ArrowDownIcon class="w-3 h-3" />
+   </template>
+ </HLBadge>

Props Changes

Removed Props

• content slot - Use default slot instead
• Custom class names - Use CSS variables for styling
• Custom styles - Use design system tokens

New Props

Prop Name	Type	Default	Description
id (required)	string	-	Unique identifier for accessibility
size	'xs' | 'sm' | 'md' | 'lg'	'md'	Size of the badge

Modified Props

Prop Name	Old Values	New Values	Default	Notes
color	string	'gray' | 'blue' | 'green' | 'red' | 'orange' | 'blueGray' | 'blueLight' | 'crayola' | 'indigo' | 'purple' | 'pink' | 'rose' | 'orangeDark'	'red'	Standardized color system
type	string	'default' | 'success' | 'error' | 'warning' | 'info'	'default'	Restricted to specific values
offset	Array	[number | string, number | string]	undefined	More flexible offset positioning

Slots Changes

Old Slot	New Slot	Description
content	default	The content that the badge wraps around
value	value	Custom content for the badge value

Examples

Basic Badge with Value

<template>
  <HLBadge id="basic-badge" :value="400" :max="99" size="md">
    <HLAvatar name="John Doe" size="md" />
  </HLBadge>
</template>

Color Variants

<template>
  <div class="space-x-4">
    <HLBadge id="blue-badge" :value="40" color="blue">
      <HLAvatar name="John Doe" size="md" />
    </HLBadge>
    <HLBadge id="green-badge" :value="40" color="green">
      <HLAvatar name="John Doe" size="md" />
    </HLBadge>
    <HLBadge id="red-badge" :value="40" color="red">
      <HLAvatar name="John Doe" size="md" />
    </HLBadge>
  </div>
</template>

Processing Badge with Custom Position

<template>
  <HLBadge id="processing-badge" :value="40" processing :offset="[-10, 10]" color="blue">
    <HLAvatar name="John Doe" size="md" />
  </HLBadge>
</template>

Custom Content with Icon

<template>
  <HLBadge id="icon-badge" size="xs" :offset="[0, 10]" color="blue">
    <HLAvatar name="John Doe" size="md" />
    <template #value>
      <ArrowDownIcon class="text-primary-600 w-3 h-3" />
    </template>
  </HLBadge>
</template>

Size Mapping

ghl-ui Size	HighRise Size	Use Case
-	lg	Large indicators, prominent badges
Default	md	Standard badges
-	sm	Compact badges
-	xs	Minimal indicators

Breaking Changes

1. Required Props

   • The id prop is now required for accessibility
   • Must be unique within the page context

2. Slot Changes

   • Renamed content slot to default
   • Simplified slot structure

3. Color System

   • Restricted to predefined color values
   • New semantic color tokens
   • Removed custom color support

4. Size System

   • New standardized size tokens
   • Fixed dimensions for each size
   • Removed custom sizing

5. Styling Changes

   • Uses CSS variables for theming
   • Removed custom class support
   • New design tokens

6. Type System

   • Restricted to specific type values
   • New semantic types
   • Removed custom types

7. Offset Behavior

   • More flexible offset positioning
   • Support for string values
   • Changed default positioning

Best Practices

1. Always provide unique id props
2. Use semantic colors based on context
3. Choose appropriate sizes for context
4. Handle offset carefully
5. Use processing state for loading
6. Consider mobile responsiveness
7. Follow accessibility guidelines
8. Use appropriate max values
9. Keep badge content concise
10. Document component usage