Migrating from UICollapse to HighRise Accordion

UICollapse → HLAccordion/HLAccordionItem. HL renames the component and adjusts props but keeps the same conceptual model of expanding named panels.

Component Implementation Changes

Import Changes

- import { UICollapse, UICollapseItem } from '@gohighlevel/ghl-ui'
+ import { HLAccordion, HLAccordionItem } from '@platform-ui/highrise'

Basic Usage Changes

- <UICollapse v-model="activeNames">
-   <UICollapseItem name="1" title="Section 1">Content 1</UICollapseItem>
- </UICollapse>
+ <HLAccordion :expanded-names="activeNames" arrow-placement="right">
+   <HLAccordionItem id="item-1" name="1" title="Section 1">Content 1</HLAccordionItem>
+ </HLAccordion>

Props Changes

Accordion (wrapper)

ghl-ui Prop	HighRise Prop	Notes
v-model	expanded-names	Controlled expanded names.
default-active-names	default-expanded-names	Initial expanded names.
accordion	accordion	Same behavior; default true.
display-directive	display-directive	if (default) or show.
arrow-placement	arrow-placement	left or right (default right).
-	size	sm, md (default), lg.
-	border-position	default (one outer border) or item (border per item).
-	border	Show container/item borders; default true.
-	zero-padding	Removes default padding from items; default false.
trigger-areas	—	Removed; HL standardizes header click target.
id	id (optional)	Set for testing/accessibility if needed.

AccordionItem

ghl-ui Prop	HighRise Prop	Notes
title	title	Same.
name	name	Same; required for identification.
disabled	disabled	Same.
-	hover-effect	Toggle hover background (default true).
-	id	Required on each item in HighRise.

Events & Slots

• @update:modelValue → @itemHeaderClick on HLAccordion (fires with item name when a header is clicked). Use v-model for state updates.
• Slots on HLAccordionItem: header, header-extra, arrow, and default content.

Examples

Multiple Panel Mode

<template>
  <HLAccordion :expanded-names="active" :accordion="false" size="md">
    <HLAccordionItem id="item-1" name="one" title="Section 1">Content 1</HLAccordionItem>
    <HLAccordionItem id="item-2" name="two" title="Section 2">Content 2</HLAccordionItem>
  </HLAccordion>
</template>

<script setup>
import { ref } from 'vue'
const active = ref(['one'])
</script>

Border-per-Item

<HLAccordion border-position="item" :border="true">
  <HLAccordionItem id="faq-1" name="faq-1" title="Question A">Answer A</HLAccordionItem>
</HLAccordion>