Migrating from UIContentWrap to HighRise ContentWrap

This guide will help you migrate from the UIContentWrap component to the HLContentWrap component.

Component Implementation Changes

Import Changes

- import { UIContentWrap } from '@gohighlevel/ghl-ui'
+ import { HLContentWrap } from '@platform-ui/highrise'

Basic Usage Changes

- <UIContentWrap>
-   <div>Your content here</div>
- </UIContentWrap>

+ <HLContentWrap>
+   <div>Your content here</div>
+ </HLContentWrap>

With Locale Support

- <UIContentWrap locale="en-US">
-   <div>Localized content</div>
- </UIContentWrap>

+ <HLContentWrap locale="en-US">
+   <div>Localized content</div>
+ </HLContentWrap>

With Notification Configuration

- <UIContentWrap
-   :notification-config="{
-     placement: 'top-right',
-     max: 5
-   }"
- >
-   <div>Content with notifications</div>
- </UIContentWrap>

+ <HLContentWrap
+   :notification-config="{
+     placement: 'top-right',
+     max: 5,
+     containerClass: 'custom-notification',
+     scrollable: true,
+     to: 'body' // Optional target container
+   }"
+ >
+   <div>Content with notifications</div>
+ </HLContentWrap>

Props Changes

Required Changes

ghl-ui Prop	HighRise Prop	Notes
notificationConfig	notificationConfig	Enhanced with more configuration options (see below)

Notification Config Options

interface NotificationConfig {
  containerClass?: string // Custom class for notification container
  containerStyle?: string | CSSProperties // Custom styles for container
  placement?: 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right'
  max?: number // Maximum number of notifications
  scrollable?: boolean // Whether notifications are scrollable
  to?: string | HTMLElement // Target container for notifications
}

Supported Locales

The following locales are supported in both versions:

• en-US - English (United States)
• da - Danish
• nl - Dutch
• fi - Finnish
• fr-FR - French (France)
• fr-CA - French (Canada)
• de - German
• it - Italian
• nb - Norwegian
• pt-BR - Portuguese (Brazil)
• pt-PT - Portuguese (Portugal)
• es - Spanish
• sv - Swedish
• hr - Croatian
• hu - Hungarian

Theme and Provider Changes

HLContentWrap now wraps several providers to ensure consistent styling and functionality:

1. Theme Provider - Handles global theme configuration
2. Notification Provider - Manages notification system
3. Modal Provider - Handles modal dialogs
4. Internationalization Provider - Manages localization

Best Practices

1. Always wrap your application's root component with HLContentWrap
2. Set appropriate locale based on user preferences
3. Configure notifications according to your application's needs
4. Use full-screen mode when needed for specific layouts
5. Consider mobile responsiveness when configuring notifications
6. Use appropriate notification placements for different screen sizes
7. Configure max notifications to prevent overwhelming users
8. Use custom container classes for consistent styling
9. Enable scrollable notifications for better user experience
10. Maintain consistent notification styling across the application

Using with Notifications

<script setup>
import { useNotification } from '@platform-ui/highrise'

const notification = useNotification()

function showNotification() {
  notification.success({
    title: 'Success',
    content: 'Operation completed successfully',
    duration: 3000,
  })
}
</script>

Additional Notes

1. The component provides global configuration for your application
2. Handles theme configuration automatically
3. Manages notification system configuration
4. Provides localization support through Vue's provide/inject mechanism
5. Maintains consistent styling across components
6. Supports custom notification styling and positioning
7. Handles modal and notification stacking
8. Manages global font configuration through CSS variables
9. Provides consistent spacing (32px padding when not in full-screen mode)
10. Supports both full-screen and contained layouts