HighRise

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 ​

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

Basic Usage Changes ​

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

With Title Text ​

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

With Title Placement ​

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

Vertical Divider ​

diff
- <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 ​

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

Props Changes ​

Required Changes ​

GHL-UI PropHighRise PropNotes
-idOptional; auto-generated when omitted
titlePlacementtitlePlacementStrictly typed as 'left' | 'right' | 'center'
legacy-Removed, modern styling is now default

New Props in HighRise ​

PropTypeDefaultDescription
marginTopbooleantrueWhether to apply margin at the top
marginBottombooleantrueWhether to apply margin at the bottom

Slot Changes ​

The slots remain the same:

  • default: Content for the divider title (unchanged)

Examples ​

With Margin Control ​

vue
<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) ​

vue
<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 ​

vue
<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. Provide an id when you need deterministic hooks for testing or analytics; otherwise allow the component to generate one.
  2. Prefer marginTop / marginBottom props over ad-hoc spacing to keep layouts consistent.
  3. For vertical dividers, set height via inline style; the component does not enforce height.
  4. Choose titlePlacement based on layout needs; default is centered.
  5. Use dashed for softer separation between sections.
  6. Keep aria orientation accurate; the component sets aria-orientation automatically.

Additional Notes ​

  1. The legacy prop has been removed; modern styling is now default.
  2. Vertical dividers require explicit height through style props.
  3. Margin control is available through dedicated props.
  4. IDs are optional; one is generated when omitted.
  5. The component automatically adapts to the application theme.