Migrating from UISpace to HighRise Space

This guide will help you migrate from the UISpace component to the HLSpace component.

Component Implementation Changes

Import Changes

- import { UISpace } from '@gohighlevel/ghl-ui'
+ import { HLSpace } from '@platform-ui/highrise'

Basic Usage Changes

- <UISpace>
-   <UIButton>Button 1</UIButton>
-   <UIButton>Button 2</UIButton>
- </UISpace>

+ <HLSpace id="space-basic">
+   <HLButton id="btn-1">Button 1</HLButton>
+   <HLButton id="btn-2">Button 2</HLButton>
+ </HLSpace>

Props Changes

Required Changes

GHL-UI Prop	HighRise Prop	Notes
-	id	New required prop for accessibility
align	align	Now strictly typed: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
justify	justify	Now strictly typed: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'
size	size	New size options: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' or number | [number, number]
wrapItem	-	Removed, wrapping behavior is now handled internally

Size Mapping

GHL-UI Size	HighRise Size
'small'	'sm'
'medium'	'md'
'large'	'lg'

Examples

Vertical Layout

- <UISpace vertical>
-   <UIButton>Button 1</UIButton>
-   <UIButton>Button 2</UIButton>
- </UISpace>

+ <HLSpace id="space-vertical" vertical>
+   <HLButton id="btn-1">Button 1</HLButton>
+   <HLButton id="btn-2">Button 2</HLButton>
+ </HLSpace>

Custom Size

- <UISpace size="large">
-   <UIButton>Large Gap</UIButton>
-   <UIButton>Between</UIButton>
- </UISpace>

+ <HLSpace id="space-size" size="lg">
+   <HLButton id="btn-1">Large Gap</HLButton>
+   <HLButton id="btn-2">Between</HLButton>
+ </HLSpace>

- <UISpace :size="[16, 24]">
+ <HLSpace id="space-custom" :size="[16, 24]">

Justify Content

- <UISpace justify="space-between">
-   <UIButton>Left</UIButton>
-   <UIButton>Right</UIButton>
- </UISpace>

+ <HLSpace id="space-justify" justify="space-between">
+   <HLButton id="btn-left">Left</HLButton>
+   <HLButton id="btn-right">Right</HLButton>
+ </HLSpace>

Align Items

- <UISpace align="center">
-   <div class="h-8">Small</div>
-   <div class="h-16">Large</div>
- </UISpace>

+ <HLSpace id="space-align" align="center">
+   <HLButton id="btn-1" size="lg">Item 1</HLButton>
+   <HLButton id="btn-2" size="sm">Item 2</HLButton>
+ </HLSpace>

Inline Space

- <UISpace inline>
-   <UITag>Tag 1</UITag>
-   <UITag>Tag 2</UITag>
- </UISpace>

+ <HLSpace id="space-inline" inline>
+   <HLTag id="tag-1">Tag 1</HLTag>
+   <HLTag id="tag-2">Tag 2</HLTag>
+ </HLSpace>

Form Layout Example

<template>
  <HLForm>
    <HLSpace id="form-space" vertical size="lg">
      <HLFormItem label="Name" path="name">
        <HLInput id="name" v-model="form.name" />
      </HLFormItem>

      <HLFormItem label="Email" path="email">
        <HLInput id="email" v-model="form.email" />
      </HLFormItem>

      <HLSpace id="button-space">
        <HLButton id="submit" type="primary">Submit</HLButton>
        <HLButton id="cancel">Cancel</HLButton>
      </HLSpace>
    </HLSpace>
  </HLForm>
</template>

Best Practices

1. Always provide unique id props for accessibility
2. Use semantic size values ('sm', 'md', 'lg') for consistent spacing
3. Use numeric values or arrays for custom spacing requirements
4. Consider responsive behavior when using wrap property
5. Use appropriate justify and align props for layout control
6. Nest Space components for complex layouts
7. Use vertical spacing for form layouts
8. Consider inline prop for text-embedded spacing

Additional Notes

1. The component now requires unique IDs for accessibility
2. Size values are now more strictly typed
3. Custom spacing can be achieved with numeric values
4. Wrapping behavior is more consistent
5. Alignment and justification options are more strictly typed
6. The component supports both flex and inline display modes
7. Vertical layout support is unchanged
8. Item styling can be controlled through the itemStyle prop
9. The component maintains consistent spacing across the application
10. All spacing values are standardized according to the design system