Migrating from ghl-ui ButtonGroup

The ButtonGroup component from ghl-ui has been replaced with a more flexible approach using HighRise UI's HLButton components and utility classes. This guide will help you migrate your button groups to the new implementation.

Component Changes

Instead of using a dedicated ButtonGroup component, you'll now create button groups using HLButton components with appropriate utility classes.

Import Changes

- import { UIButtonGroup } from '@gohighlevel/ghl-ui'
+ import { HLButton } from '@platform-ui/highrise'

Basic Usage Changes

- <UIButtonGroup>
-   <UIButton type="primary">Left</UIButton>
-   <UIButton type="primary">Middle</UIButton>
-   <UIButton type="primary">Right</UIButton>
- </UIButtonGroup>

+ <div class="hr-button-group">
+   <HLButton
+     id="left-button"
+     variant="primary"
+     class="hr-button-group__item hr-button-group__item--left"
+   >
+     Left
+   </HLButton>
+   <HLButton
+     id="middle-button"
+     variant="primary"
+     class="hr-button-group__item hr-button-group__item--middle"
+   >
+     Middle
+   </HLButton>
+   <HLButton
+     id="right-button"
+     variant="primary"
+     class="hr-button-group__item hr-button-group__item--right"
+   >
+     Right
+   </HLButton>
+ </div>

Styling

Add these utility classes to your stylesheet:

.hr-button-group {
  @apply flex items-center gap-0;

  &__item {
    &--left {
      @apply rounded-r-none border-r-0;
    }

    &--middle {
      @apply rounded-none border-r-0;
    }

    &--right {
      @apply rounded-l-none;
    }
  }
}

Examples

Basic Button Group

<template>
  <div class="hr-button-group">
    <HLButton id="view-button" variant="secondary" class="hr-button-group__item hr-button-group__item--left"> View </HLButton>
    <HLButton id="edit-button" variant="secondary" class="hr-button-group__item hr-button-group__item--middle"> Edit </HLButton>
    <HLButton id="delete-button" variant="secondary" class="hr-button-group__item hr-button-group__item--right"> Delete </HLButton>
  </div>
</template>

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

With Icons

<template>
  <div class="hr-button-group">
    <HLButton id="previous-button" variant="secondary" class="hr-button-group__item hr-button-group__item--left">
      <template #iconLeft>
        <ChevronLeftIcon />
      </template>
      Previous
    </HLButton>
    <HLButton id="next-button" variant="secondary" class="hr-button-group__item hr-button-group__item--right">
      Next
      <template #iconRight>
        <ChevronRightIcon />
      </template>
    </HLButton>
  </div>
</template>

<script setup>
import { HLButton } from '@platform-ui/highrise'
import { ChevronLeftIcon, ChevronRightIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Different Variants

<template>
  <div class="hr-button-group">
    <HLButton id="cancel-button" variant="secondary" class="hr-button-group__item hr-button-group__item--left"> Cancel </HLButton>
    <HLButton id="save-button" variant="primary" class="hr-button-group__item hr-button-group__item--right"> Save </HLButton>
  </div>
</template>

Best Practices

1. Always provide unique id props for each button
2. Use consistent variants within a group unless intentionally highlighting an action
3. Maintain proper order of buttons (e.g., Cancel/No on left, Confirm/Yes on right)
4. Use appropriate spacing between button groups
5. Consider mobile responsiveness
6. Follow accessibility guidelines
7. Use clear and concise button labels
8. Group related actions together
9. Limit the number of buttons in a group
10. Use icons consistently across button groups

Breaking Changes

1. Removed ButtonGroup component in favor of utility classes
2. New class-based styling approach
3. Required id props for each button
4. Changed border handling between buttons
5. Modified spacing implementation
6. Changed rounded corner implementation
7. New CSS class structure
8. Changed styling implementation
9. Modified responsive behavior
10. Changed accessibility implementation

Migration Tips

1. Replace all UIButtonGroup instances with the new utility class approach
2. Add required id props to all buttons
3. Update styling to use the new utility classes
4. Review and update any custom styles
5. Test responsive behavior
6. Verify accessibility compliance
7. Update any button group related documentation
8. Review and update any component tests
9. Check for consistent styling across the application
10. Verify proper button order and grouping