Migrating from ghl-ui Steps to HighRise ProgressSteps

HighRise HLProgressSteps renders steps from a data array instead of child step nodes. There is no current prop; each step carries its own status.

Component Implementation Changes

Import Changes

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

Basic Usage Changes

- <UISteps :current="currentStep">
-   <UIStep title="Step 1" />
-   <UIStep title="Step 2" />
- </UISteps>
+ <HLProgressSteps
+   :steps="steps"
+   @update:step="handleStepChange"
+ />

Props Changes

ghl-ui Prop	HighRise Prop	Notes
current	steps[].status	Use per-step status (current, complete, error, warning, default)
status	steps[].status	Status is per-step instead of global
vertical	vertical	Same behavior
–	width	Width (px) for vertical layout
–	className	Custom class applied to container
–	steps[].popoverProps	Optional popover per step
–	steps[].renderIcon	Render function for custom icons

Step Configuration

type StepStatus = 'default' | 'current' | 'complete' | 'error' | 'warning' | 'loading'

interface HLProgressStepProps {
  id: string
  title: string
  subtitle?: string
  status?: StepStatus
  renderIcon?: () => VNodeChild
  popoverProps?: boolean | PopoverProps
  className?: string
}

Examples

Basic Steps

<template>
  <HLProgressSteps :steps="steps" @update:step="handleStepChange" />
</template>

<script setup>
import { HLProgressSteps } from '@platform-ui/highrise'

const 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' },
]

const handleStepChange = index => {
  console.log('current step index', index)
}
</script>

Vertical Steps with Custom Icons

<template>
  <HLProgressSteps :steps="steps" vertical :width="320" />
</template>

<script setup>
import { h } from 'vue'
import { HLProgressSteps } from '@platform-ui/highrise'
import { CheckCircleIcon, AlertTriangleIcon } from '@gohighlevel/ghl-icons/24/outline'

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

Best Practices

1. Drive progress via steps[].status instead of a single current index.
2. Provide stable id values for analytics and test targeting.
3. Use vertical + width for long descriptions or narrow layouts.
4. Supply renderIcon for success/error/warning states to improve clarity.
5. Handle @update:step to sync external state (routing, forms, etc.).