Migrating from ghl-ui Steps to HighRise Steps

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

Component Implementation Changes

Import Changes

- import { UISteps } from '@gohighlevel/ghl-ui'
+ import { HLProgressSteps } from '@platform-ui/highrise'

Basic Usage Changes

- <UISteps :steps="steps" :current="currentStep">
- </UISteps>

+ <HLProgressSteps
+   id="progress-steps"
+   :steps="steps"
+   @update:step="handleStepChange"
+ >
+ </HLProgressSteps>

Props Changes

Required Changes

ghl-ui Prop	HighRise Prop	Notes
-	id	New required prop for accessibility
steps	steps	Enhanced step format with new features
current	-	Replaced by step status in step configuration
-	vertical	New prop for vertical layout (default: false)
-	width	New prop to control container width in vertical mode
-	className	New prop for custom CSS classes

Step Configuration Format

The HighRise Steps component supports an enhanced step format with additional features:

interface HLProgressStepProps {
  id: string
  title: string
  subtitle?: string
  status?: 'default' | 'current' | 'complete' | 'error' | 'warning'
  renderIcon?: () => VNodeChild
  popoverProps?: boolean | PopoverProps
  className?: string
  vertical?: boolean
}

Examples

Basic Steps

<template>
  <HLProgressSteps
    id="basic-steps"
    :steps="[
      {
        id: 'step-1',
        title: 'Account Setup',
        subtitle: 'Create your account',
        status: 'complete',
      },
      {
        id: 'step-2',
        title: 'Profile Details',
        subtitle: 'Fill in your information',
        status: 'current',
      },
      {
        id: 'step-3',
        title: 'Verification',
        subtitle: 'Verify your email',
        status: 'default',
      },
    ]"
    @update:step="handleStepChange"
  />
</template>

<script setup>
const handleStepChange = (step: number) => {
  console.log('Current step:', step)
}
</script>

Vertical Steps with Custom Icons

<template>
  <HLProgressSteps id="vertical-steps" :steps="steps" vertical :width="300" />
</template>

<script setup>
import { CheckCircleIcon, AlertTriangleIcon } from '@gohighlevel/ghl-icons/24/outline'

const steps = [
  {
    id: 'step-1',
    title: 'Completed Step',
    subtitle: 'This step is complete',
    status: 'complete',
    renderIcon: () => h(CheckCircleIcon),
  },
  {
    id: 'step-2',
    title: 'Warning Step',
    subtitle: 'This step has a warning',
    status: 'warning',
    renderIcon: () => h(AlertTriangleIcon),
  },
]
</script>

Best Practices

1. Always provide a unique id prop for accessibility
2. Use descriptive titles and subtitles for clear navigation
3. Implement proper step status management
4. Consider using vertical layout for complex workflows
5. Add custom icons to enhance visual hierarchy
6. Use popover props for additional information
7. Keep step content concise and clear
8. Implement proper event handling
9. Follow accessibility guidelines
10. Maintain consistent styling

Additional Notes

1. Enhanced styling with hover and active states
2. Support for custom icons and tooltips
3. Built-in responsive design
4. Automatic step numbering
5. Integration with other HighRise components
6. RTL layout support
7. Consistent styling through CSS variables
8. Improved accessibility features
9. Support for warning and error states
10. Flexible layout options with vertical mode