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

Prop Differences

GHL-UI Prop	HighRise Prop	Notes
align	align	Same prop, now strictly typed: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
justify	justify	Same prop, typed: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'
size	size	Tokens changed to 3xs | 2xs | xs | sm | md | lg or number | [number, number]; default sm
wrapItem	wrapItem	Still supported; default is false (was true in ghl-ui)
itemClass	itemClass	New: custom class per item
itemStyle	itemStyle	New: inline styles per item

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. Size defaults to sm; use numbers or [number, number] for custom gaps
2. wrapItem is optional and defaults to false
3. itemClass and itemStyle allow per-item styling
4. The component supports both flex and inline display modes
5. Vertical layout support is unchanged
6. Alignment and justification are strictly typed
7. Spacing tokens align with the HighRise design scale