Migrating from ghl-ui Drawer to HighRise Drawer

This guide provides step-by-step instructions for migrating from the ghl-ui Drawer component to the new HighRise Drawer component. The main architectural change is that the Drawer component has been split into two components: HLDrawer and HLDrawerContent for better organization and flexibility.

Component Implementation Changes

Import Changes

diff

- import { UIDrawer } from '@gohighlevel/ghl-ui'
+ import { HLDrawer, HLDrawerContent } from '@platform-ui/highrise'
+ import { HLHeaderLite } from '@platform-ui/highrise'
+ import { HLSectionFooter, HLSectionFooterItem } from '@platform-ui/highrise'
+ import { HLButton } from '@platform-ui/highrise'

Basic Usage Changes

diff

- <UIDrawer
-   v-model="show"
-   title="Drawer Title"
-   description="Drawer description"
-   positiveText="Save"
-   negativeText="Cancel"
-   @positiveClick="handleSave"
-   @negativeClick="show = false"
- >
-   <p>Drawer content</p>
- </UIDrawer>

+ <HLDrawer
+   id="my-drawer"
+   v-model:show="show"
+   placement="right"
+ >
+   <HLDrawerContent
+     id="drawer-content"
+     class="px-4"
+     title="Drawer Title"
+     description="Drawer description"
+     show-header
+     closable
+     @update:show="show = $event"
+   >
+     <div class="p-4">Drawer content</div>
+     <template #footer>
+       <HLSectionFooter id="footer" size="md">
+         <HLSectionFooterItem justify="end">
+           <HLButton @click="show = false" color="gray" variant="secondary">Cancel</HLButton>
+           <HLButton color="blue" variant="primary" @click="handleSave">Save</HLButton>
+         </HLSectionFooterItem>
+       </HLSectionFooter>
+     </template>
+   </HLDrawerContent>
+ </HLDrawer>

TIP

The basic usage example uses the default header through props (title, description, show-header, closable). For more customized headers, you can use the header slot with HLHeaderLite component as shown in the "Drawer with Header and Footer" example.

Basic Usage with Icon

diff

- <UIDrawer
-   v-model:show="active"
-   :width="args.width"
-   :placement="args.placement"
-   :maskClosable="args.maskClosable"
-   :id="args.id"
-   :displayDirective="args.displayDirective"
-   :autoFocus="args.autoFocus"
- >
-   <UIDrawerContent
-     negativeText="Cancel"
-     positiveText="Confirm"
-     id="drawer-component"
-     :closable="args.closable"
-     title="Lorem Ipsum"
-     description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
-     :icon="CreditCardShieldIcon"
-   >
-     Content goes here
-   </UIDrawerContent>
- </UIDrawer>

+ <HLDrawer
+   id="drawer-with-icon"
+   v-model:show="show"
+   :width="width"
+   :placement="placement"
+   :maskClosable="maskClosable"
+   :displayDirective="displayDirective"
+   :autoFocus="autoFocus"
+ >
+   <HLDrawerContent
+     id="drawer-content"
+     title="Lorem Ipsum"
+     description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+     :icon="CreditCardShieldIcon"
+     show-header
+     closable
+     @update:show="show = $event"
+   >
+     <div class="p-4">Content goes here</div>
+     <template #footer>
+       <HLSectionFooter id="footer" size="md">
+         <HLSectionFooterItem justify="end">
+           <HLButton @click="show = false" color="gray" variant="secondary">Cancel</HLButton>
+           <HLButton color="blue" variant="primary">Confirm</HLButton>
+         </HLSectionFooterItem>
+       </HLSectionFooter>
+     </template>
+   </HLDrawerContent>
+ </HLDrawer>

vue

<script setup>
import { ref } from 'vue'
import { CreditCardShieldIcon } from '@gohighlevel/ghl-icons/24/outline'

const show = ref(false)
const width = 502
const placement = 'right'
const maskClosable = true
const displayDirective = 'if'
const autoFocus = true
</script>

TIP

When using an icon in the default header:

Pass the icon component directly to the icon prop
Make sure to import the icon from @gohighlevel/ghl-icons
The icon will be automatically positioned in the header

Props Changes

HLDrawer Props

ghl-ui Prop	HighRise Prop	Notes
`show`	`show`	Used with v-model:show in HighRise
`width`	`width`	Drawer width (default: 502)
`placement`	`placement`	Values: 'top', 'right', 'bottom', 'left'
`id`	`id`	Required in both versions
`maskClosable`	`maskClosable`	Whether clicking mask closes drawer (default: true)
`autoFocus`	`autoFocus`	Whether to auto focus drawer (default: true)
-	`blockScroll`	Whether to block page scroll (default: true)
-	`closeOnEsc`	Whether ESC key closes drawer (default: true)
-	`defaultHeight`	Default drawer height (default: 251)
-	`defaultWidth`	Default drawer width (default: 502)
-	`contentClass`	Custom class for drawer content
-	`contentStyle`	Custom style for drawer content
-	`maxWidth`	Maximum drawer width
-	`maxHeight`	Maximum drawer height
-	`minWidth`	Minimum drawer width
-	`minHeight`	Minimum drawer height
-	`displayDirective`	Values: 'if' or 'show' (default: 'if')
-	`resizable`	Whether drawer is resizable (default: false)
-	`showMask`	Whether to show mask (default: true)
-	`to`	Target container (default: 'body')
-	`trapFocus`	Whether to trap focus in drawer (default: true)
-	`zIndex`	Z-index value (default: 1000)

HLDrawerContent Props

ghl-ui Prop	HighRise Prop	Notes
`id`	`id`	Required in both versions
`title`	`title`	Title for default header
`description`	`description`	Description/subtitle for default header
`icon`	`icon`	Icon component for default header
`positiveText`	-	Removed, use HLButton in footer slot
`negativeText`	-	Removed, use HLButton in footer slot
`loading`	-	Removed, apply to HLButton directly
`disabled`	-	Removed, apply to HLButton directly
`closable`	`closable`	Whether to show close button in default header
`disableNegativeBtn`	-	Removed, apply disabled to cancel HLButton
`showHeader`	`showHeader`	Whether to show the default header
-	`bodyClass`	Custom class for drawer body
-	`bodyStyle`	Custom style for drawer body
-	`bodyContentClass`	Custom class for body content
-	`bodyContentStyle`	Custom style for body content
-	`footerClass`	Custom class for footer
-	`footerStyle`	Custom style for footer
-	`headerClass`	Custom class for header
-	`headerStyle`	Custom style for header
-	`nativeScrollbar`	Whether to use native scrollbar (default: true)
-	`scrollbarProps`	Props for custom scrollbar

Event Changes

HLDrawer Events

ghl-ui Event	HighRise Event	Notes
`update:show`	`update:show`	Emitted when drawer visibility changes
-	`after-enter`	Emitted after drawer enter transition
-	`after-leave`	Emitted after drawer leave transition
-	`esc`	Emitted when ESC key is pressed
-	`mask-click`	Emitted when mask is clicked
-	`update:height`	Emitted when height changes (resizable)
-	`update:width`	Emitted when width changes (resizable)

HLDrawerContent Events

ghl-ui Event	HighRise Event	Notes
`negativeClick`	-	Removed, handle through HLButton
`positiveClick`	-	Removed, handle through HLButton

Slot Changes

HLDrawerContent Slots

ghl-ui Slot	HighRise Slot	Notes
`header`	`header`	Use HLHeaderLite component
`default`	`default`	Main content
`actionLeft`	-	Removed, use HLSectionFooterItem
`actionRight`	-	Removed, use HLSectionFooterItem
-	`footer`	New slot for footer content

Examples

Basic Drawer

vue

<template>
  <HLDrawer id="basic-drawer" v-model:show="show" placement="right">
    <HLDrawerContent id="drawer-content" class="px-4">
      <div class="p-4">Basic drawer content</div>
    </HLDrawerContent>
  </HLDrawer>
</template>

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

const show = ref(false)
</script>

Drawer with Header and Footer

vue

<template>
  <HLDrawer id="full-drawer" v-model:show="show" placement="right">
    <HLDrawerContent id="drawer-content" class="px-4">
      <template #header>
        <HLHeaderLite title="Drawer Title" subtitle="Last updated 2m ago" @update:close="show = false">
          <template #header-icons>
            <HLIcon>
              <Share01Icon />
            </HLIcon>
          </template>
        </HLHeaderLite>
      </template>

      <div class="p-4">Main content area</div>

      <template #footer>
        <HLSectionFooter id="footer" :top-padding="false" :bottom-padding="false" :horizontal-padding="false">
          <HLSectionFooterItem justify="end">
            <HLButton @click="show = false">Cancel</HLButton>
            <HLButton color="blue" variant="primary">Save</HLButton>
          </HLSectionFooterItem>
        </HLSectionFooter>
      </template>
    </HLDrawerContent>
  </HLDrawer>
</template>

Content Padding

The drawer component does not have any default padding. You must add padding to your content manually:

Header: No default padding - the HLHeaderLite component handles its own internal padding
Content: No default padding - you must add padding using Tailwind classes
Footer: No default padding - you must add padding when using HLSectionFooter component

When adding content to the drawer, you should:

Always wrap your content in a div with padding (e.g., class="p-4")
Use consistent padding across your drawers for uniformity
Consider different padding sizes for different content types:
- Forms: Use p-4 or p-6 for comfortable spacing
- Simple content: Use p-4 for standard spacing
- Complex layouts: Consider different padding per section

WARNING

Remember to always add padding to your drawer content. The drawer does not provide any default padding for the content or footer slots. Content without padding will touch the edges of the drawer.

Note: While HLHeaderLite includes its own padding, other header content will need manual padding.

Drawer with Custom Header

vue

<template>
  <HLDrawer id="drawer-custom-header" v-model:show="show" placement="right">
    <HLDrawerContent id="drawer-content">
      <template #header>
        <HLHeaderLite title="Drawer Title" subtitle="Last updated 2m ago" @update:close="show = false">
          <template #header-icons>
            <HLIcon size="lg" color="black">
              <TrendUp01Icon />
            </HLIcon>
          </template>
          <template #header-content>
            <HLHeaderLiteItem justify="end" size="sm">
              <HLButton variant="ghost" size="xs" color="gray"> Action </HLButton>
            </HLHeaderLiteItem>
          </template>
        </HLHeaderLite>
      </template>
      <div class="p-4">Main content goes here</div>
      <template #footer>
        <HLSectionFooter id="footer" :top-padding="false" :bottom-padding="false" :horizontal-padding="false">
          <HLSectionFooterItem justify="end">
            <HLButton @click="show = false">Cancel</HLButton>
            <HLButton color="blue" variant="primary">Save</HLButton>
          </HLSectionFooterItem>
        </HLSectionFooter>
      </template>
    </HLDrawerContent>
  </HLDrawer>
</template>

<script setup>
import { ref } from 'vue'
import { TrendUp01Icon } from '@gohighlevel/ghl-icons/24/outline'

const show = ref(false)
</script>

TIP

When using a custom header with HLHeaderLite:

Use the header slot to provide your custom header content
HLHeaderLite provides built-in slots for icons and additional content
Handle the close action using @update:close event
You can customize the header with additional buttons and actions

Best Practices

Always provide unique id props for accessibility
Use appropriate placement based on context
Consider content layout and scrolling behavior
Handle loading states appropriately
Implement proper error handling
Use consistent drawer sizes
Follow accessibility guidelines
Keep drawer content focused and organized
Consider mobile responsiveness
Use appropriate animations and transitions

Additional Notes

Enhanced styling with CSS variables
Built-in animation system
Improved accessibility features
Better integration with other HighRise components
RTL layout support
Consistent styling through CSS variables
Support for custom scrollbars
Flexible content organization
Performance optimizations
Standardized dimensions

Breaking Changes

Split into two components: HLDrawer and HLDrawerContent
HLDrawerContent does not have any default padding. You must add padding to your content manually.
New required id props for accessibility
Changed v-model binding to v-model:show
Modified header implementation using HLHeaderLite
Changed footer implementation using HLSectionFooter
New theme override system
Modified animation timing
Changed CSS variable names
New accessibility attributes
Modified DOM structure

Migrating from ghl-ui Drawer to HighRise Drawer ​

Component Implementation Changes ​

Import Changes ​

Basic Usage Changes ​

Basic Usage with Icon ​

Props Changes ​

HLDrawer Props ​

HLDrawerContent Props ​

Event Changes ​

HLDrawer Events ​

HLDrawerContent Events ​

Slot Changes ​

HLDrawerContent Slots ​

Examples ​

Basic Drawer ​

Drawer with Header and Footer ​

Content Padding ​

Drawer with Custom Header ​

Best Practices ​

Additional Notes ​

Breaking Changes ​

Migrating from ghl-ui Drawer to HighRise Drawer

Component Implementation Changes

Import Changes

Basic Usage Changes

Basic Usage with Icon

Props Changes

HLDrawer Props

HLDrawerContent Props

Event Changes

HLDrawer Events

HLDrawerContent Events

Slot Changes

HLDrawerContent Slots

Examples

Basic Drawer

Drawer with Header and Footer

Content Padding

Drawer with Custom Header

Best Practices

Additional Notes

Breaking Changes