Migrating from UIDivider to HighRise Divider

This guide will help you migrate from the UIDivider component to the HLDivider component.

Component Implementation Changes

Import Changes

- import { UIDivider } from '@gohighlevel/ghl-ui'
+ import { HLDivider } from '@platform-ui/highrise'

Basic Usage Changes

- <UIDivider />
+ <HLDivider id="example-divider" />

With Title Text

- <UIDivider>Section Divider</UIDivider>
+ <HLDivider id="section-divider">Section Divider</HLDivider>

With Title Placement

- <UIDivider titlePlacement="left">Left Title</UIDivider>
+ <HLDivider id="left-title" titlePlacement="left">Left Title</HLDivider>

Vertical Divider

- <div class="flex items-center h-8">
-   <span>Text</span>
-   <UIDivider vertical />
-   <span>Text</span>
- </div>

+ <div style="display: flex; align-items: center">
+   <span>Text</span>
+   <HLDivider id="vertical-divider" vertical style="height: 120px; margin: 0 8px" />
+   <span>Text</span>
+ </div>

Dashed Divider

- <UIDivider :dashed="true">Dashed Divider</UIDivider>
+ <HLDivider id="dashed-divider" dashed>Dashed Divider</HLDivider>

Props Changes

Required Changes

GHL-UI Prop	HighRise Prop	Notes
-	id	New required prop for accessibility
titlePlacement	titlePlacement	Now strictly typed as 'left' | 'right' | 'center'
legacy	-	Removed, modern styling is now default

New Props in HighRise

Prop	Type	Default	Description
marginTop	boolean	true	Whether to apply margin at the top
marginBottom	boolean	true	Whether to apply margin at the bottom

Slot Changes

The slots remain the same:

• default: Content for the divider title (unchanged)

Examples

With Margin Control

<template>
  <HLDivider id="with-margins">With Margins</HLDivider>
  <HLDivider id="no-top" :marginTop="false">No Top Margin</HLDivider>
  <HLDivider id="no-bottom" :marginBottom="false">No Bottom Margin</HLDivider>
</template>

In a Form (Updated Syntax)

<template>
  <HLForm>
    <HLFormItem label="Name" path="name">
      <HLInput id="name" v-model="form.name" />
    </HLFormItem>

    <HLDivider id="personal-info">Personal Information</HLDivider>

    <HLFormItem label="Email" path="email">
      <HLInput id="email" v-model="form.email" />
    </HLFormItem>
  </HLForm>
</template>

Multiple Vertical Dividers

<template>
  <div style="display: flex; align-items: center">
    <span>Text</span>
    <HLDivider id="v-divider-1" vertical style="height: 150px; margin: 0 8px" />
    <HLDivider id="v-divider-2" vertical style="height: 120px; margin: 0 8px" />
    <HLDivider id="v-divider-3" vertical style="height: 100px; margin: 0 8px" />
    <span>Text</span>
  </div>
</template>

Best Practices

1. Always provide a unique id prop for each divider
2. Use margin props instead of custom CSS for spacing control
3. For vertical dividers, use the style prop for height and margin adjustments
4. Use semantic title placement based on your layout needs
5. Consider using dashed style for softer visual separation
6. Maintain consistent spacing with marginTop and marginBottom props

Additional Notes

1. The legacy prop has been removed; modern styling is now default
2. Vertical dividers now require explicit height through style prop
3. Margin control is now available through dedicated props
4. The component is now more strictly typed for better type safety
5. All dividers require unique IDs for accessibility
6. The component automatically adapts to the application theme