Migrating from UICollapse to HighRise Accordion

This guide will help you migrate from the UICollapse component to the new HighRise Accordion component. The component has been renamed to Accordion for better semantic meaning and enhanced with better accessibility, styling options, and consistent behavior.

Component Implementation Changes

Import Changes

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

Basic Usage Changes

Single Panel Mode (Default)

- <UICollapse v-model="activeNames">
-   <UICollapseItem name="1" title="Section 1">
-     Content 1
-   </UICollapseItem>
-   <UICollapseItem name="2" title="Section 2">
-     Content 2
-   </UICollapseItem>
- </UICollapse>

+ <HLAccordion
+   id="my-accordion"
+   :expanded-names="activeNames"
+   size="md"
+   arrow-placement="right"
+ >
+   <HLAccordionItem
+     id="item-1"
+     name="1"
+     title="Section 1"
+   >
+     Content 1
+   </HLAccordionItem>
+   <HLAccordionItem
+     id="item-2"
+     name="2"
+     title="Section 2"
+   >
+     Content 2
+   </HLAccordionItem>
+ </HLAccordion>

Multiple Panel Mode

- <UICollapse v-model="activeNames" :accordion="false">
-   <UICollapseItem name="1" title="Section 1">
-     Content 1
-   </UICollapseItem>
-   <UICollapseItem name="2" title="Section 2">
-     Content 2
-   </UICollapseItem>
- </UICollapse>

+ <HLAccordion
+   id="multi-accordion"
+   :expanded-names="activeNames"
+   :accordion="false"
+   size="md"
+ >
+   <HLAccordionItem
+     id="item-1"
+     name="1"
+     title="Section 1"
+   >
+     Content 1
+   </HLAccordionItem>
+   <HLAccordionItem
+     id="item-2"
+     name="2"
+     title="Section 2"
+   >
+     Content 2
+   </HLAccordionItem>
+ </HLAccordion>

Props Changes

Accordion (Previously Collapse) Props

ghl-ui Prop	HighRise Prop	Notes
-	id (required)	New required prop for accessibility
v-model	expanded-names	Active panel names
accordion	accordion	Single panel mode (default: true)
arrow-placement	arrow-placement	Values: 'left', 'right' (default: 'right')
-	size	Values: 'sm', 'md', 'lg' (default: 'md')
-	border-position	Values: 'default', 'item' (default: 'default')
-	border	Show border (default: true)
default-active-names	default-expanded-names	Default active panel names
display-directive	display-directive	Values: 'if', 'show' (default: 'if')
-	zero-padding	Remove padding (default: false)
trigger-areas	-	Removed - click areas are standardized for better accessibility

AccordionItem (Previously CollapseItem) Props

ghl-ui Prop	HighRise Prop	Notes
ghl-ui Prop	HighRise Prop	Notes
----------------------	------------------------	------------------------------------------
-	id	New required prop for accessibility
v-model	expanded-names	Active panel names
accordion	accordion	Single panel mode (default: true)
arrow-placement	arrow-placement	Values: 'left', 'right' (default: 'right')
-	size	Values: 'sm', 'md', 'lg' (default: 'md')
-	border-position	Values: 'default', 'top', 'bottom', 'both'
-	border	Show border (default: true)
default-active-names	default-expanded-names	Default active panel names
-	display-directive	Values: 'if', 'show' (default: 'if')
-	zero-padding	Remove padding (default: false)

AccordionItem (Previously CollapseItem) Props

ghl-ui Prop	HighRise Prop	Notes
-	id	New required prop for accessibility
title	title	Panel title
name	name	Unique identifier
disabled	disabled	Disable panel (default: false)
-	hover-effect	Show hover effect (default: true)

Event Changes

ghl-ui Event	HighRise Event	Notes
update:modelValue	item-header-click	Emitted when panel is clicked

Slot Changes

Accordion Slots

ghl-ui Slot	HighRise Slot	Notes
default	default	Container for accordion items

AccordionItem Slots

ghl-ui Slot	HighRise Slot	Notes
default	default	Panel content
title	header	Custom header content
-	header-extra	Additional header content
-	arrow	Custom arrow icon

Examples

Basic Accordion

<template>
  <HLAccordion id="basic-accordion" :expanded-names="activeNames" size="md">
    <HLAccordionItem id="item-1" name="1" title="Section 1"> Content 1 </HLAccordionItem>
  </HLAccordion>
</template>

<script setup>
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

Custom Header

<template>
  <HLAccordion id="custom-header-accordion">
    <HLAccordionItem id="custom-item" name="1">
      <template #header>
        <div class="flex items-center gap-2">
          <IconComponent />
          <span>Custom Header</span>
        </div>
      </template>
      Content
    </HLAccordionItem>
  </HLAccordion>
</template>

With Border Variations

<template>
  <HLAccordion id="bordered-accordion" border-position="both" :border="true">
    <HLAccordionItem id="bordered-item" name="1" title="Section"> Content </HLAccordionItem>
  </HLAccordion>
</template>

Size Mapping

ghl-ui Size	HighRise Size	Notes
-	sm	Compact size
-	md	Default size
-	lg	Large size

Best Practices

1. Always provide unique id props for accessibility
2. Use semantic panel names
3. Consider hover effects for better UX
4. Use appropriate border styles
5. Choose suitable arrow placement
6. Implement proper keyboard navigation
7. Use consistent sizing
8. Handle content overflow properly
9. Consider mobile responsiveness
10. Follow accessibility guidelines

Breaking Changes

1. Component renamed from Collapse to Accordion
2. New required id props
3. Changed event naming
4. Modified slot structure
5. New size system
6. Changed border handling
7. Modified DOM structure
8. New theme override system
9. Changed default values
10. Modified animation behavior