feat(frontend): add a split button component

Adds a split button component to button which is a button with a default action but also a drop-down of extra actions

Signed-off-by: Edward Sammut Alessi <[email protected]>

Author: Slessi

frontend/eslint.config.ts

@@ -70,6 +70,7 @@ export default defineConfigWithVueTs(
       'vue/no-boolean-default': 'error',
       'vue/no-template-target-blank': 'error',
       'vue/no-useless-mustaches': 'error',
+      'vue/require-default-prop': 'off',
 
       // Temporarily disabled rules
       '@typescript-eslint/no-explicit-any': 'warn',

frontend/package-lock.json

@@ -33,6 +33,7 @@
     "@vueuse/components": "^14.0.0",
     "@vueuse/core": "^14.0.0",
     "apexcharts": "^5.3.5",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "fetch-intercept": "^2.4.0",
     "js-yaml": "^4.1.0",
@@ -43,6 +44,7 @@
     "pluralize": "^8.0.0",
     "reka-ui": "^2.6.0",
     "semver": "^7.7.3",
+    "tailwind-merge": "^3.3.1",
     "userpilot": "^1.4.1",
     "uuid": "^13.0.0",
     "vue": "^3.5.22",

frontend/package.json

@@ -0,0 +1,36 @@
+// Copyright (c) 2025 Sidero Labs, Inc.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '@testing-library/vue'
+import { expect, test, vi } from 'vitest'
+
+import SplitButton from './SplitButton.vue'
+
+test('sends click events', async () => {
+  const user = userEvent.setup()
+  const clickFn = vi.fn()
+
+  render(SplitButton, {
+    props: {
+      actions: ['one', 'two', 'three'],
+      onClick: clickFn,
+    },
+  })
+
+  await user.click(screen.getByRole('button', { name: 'one' }))
+  expect(clickFn).toHaveBeenCalledExactlyOnceWith('one')
+
+  clickFn.mockClear()
+
+  await user.click(screen.getByRole('button', { name: 'extra actions' }))
+  await user.click(screen.getByRole('menuitem', { name: 'one' }))
+  expect(clickFn).toHaveBeenCalledExactlyOnceWith('one')
+
+  clickFn.mockClear()
+
+  await user.click(screen.getByRole('button', { name: 'extra actions' }))
+  await user.click(screen.getByRole('menuitem', { name: 'two' }))
+  expect(clickFn).toHaveBeenCalledExactlyOnceWith('two')
+})

frontend/src/components/common/Button/SplitButton.spec.ts

@@ -0,0 +1,46 @@
+// Copyright (c) 2025 Sidero Labs, Inc.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+import { faker } from '@faker-js/faker'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import type { ComponentProps } from 'vue-component-type-helpers'
+
+import SplitButton from './SplitButton.vue'
+
+const variants: ComponentProps<typeof SplitButton>['variant'][] = [
+  'primary',
+  'secondary',
+  'highlighted',
+  'subtle',
+]
+
+const sizes: ComponentProps<typeof SplitButton>['size'][] = ['md', 'sm', 'xs', 'xxs']
+
+const meta: Meta<typeof SplitButton> = {
+  component: SplitButton,
+  args: {
+    disabled: false,
+    actions: faker.helpers.uniqueArray(faker.hacker.verb, 5) as [string, string, ...string[]],
+    onClick: fn(),
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: variants,
+    },
+    size: {
+      control: 'inline-radio',
+      options: sizes,
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

frontend/src/components/common/Button/SplitButton.stories.ts

@@ -0,0 +1,90 @@
+<!--
+Copyright (c) 2025 Sidero Labs, Inc.
+
+Use of this software is governed by the Business Source License
+included in the LICENSE file.
+-->
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+} from 'reka-ui'
+import { useTemplateRef } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+
+import TButton from '@/components/common/Button/TButton.vue'
+
+interface Props {
+  variant?: ComponentProps<typeof TButton>['type']
+  size?: ComponentProps<typeof TButton>['size']
+  actions: [string, string, ...string[]]
+  disabled?: boolean
+}
+
+const { variant = 'primary', size = 'md' } = defineProps<Props>()
+
+defineEmits<{
+  click: [action: string]
+}>()
+
+const triggerRef = useTemplateRef('trigger')
+const { width } = useElementSize(triggerRef)
+</script>
+
+<template>
+  <DropdownMenuRoot>
+    <div v-bind="$attrs" ref="trigger" class="inline-flex -space-x-px">
+      <TButton
+        :type="variant"
+        :size
+        :disabled
+        class="rounded-tr-none rounded-br-none"
+        @click="() => $emit('click', actions[0])"
+      >
+        {{ actions[0] }}
+      </TButton>
+
+      <DropdownMenuTrigger aria-label="extra actions" as-child>
+        <TButton
+          :type="variant"
+          :size
+          :disabled
+          class="rounded-tl-none rounded-bl-none"
+          :class="{
+            'px-2': size === 'md',
+            'px-1': size === 'sm',
+          }"
+          icon="arrow-down"
+        />
+      </DropdownMenuTrigger>
+    </div>
+
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        class="z-50 max-h-[min(--spacing(70),var(--reka-dropdown-menu-content-available-height))] min-w-(--reka-dropdown-menu-trigger-width) overflow-auto rounded-md bg-naturals-n3 p-1.5 text-xs slide-in-from-top-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+        side="bottom"
+        side-flip
+        :side-offset="4"
+        align="end"
+        :style="{
+          // Overriding to align to the whole button, not just the trigger
+          '--reka-dropdown-menu-trigger-width': `${width}px`,
+        }"
+      >
+        <DropdownMenuItem
+          v-for="action in actions"
+          :key="action"
+          value="New Tab"
+          class="cursor-pointer px-3 py-1.5 outline-none select-none hover:text-naturals-n13 focus:text-naturals-n13"
+          @select="() => $emit('click', action)"
+        >
+          {{ action }}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>

frontend/src/components/common/Button/SplitButton.vue

@@ -5,44 +5,52 @@ Use of this software is governed by the Business Source License
 included in the LICENSE file.
 -->
 <script setup lang="ts">
-import type { ButtonHTMLAttributes } from 'vue'
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'vue'
 
 import type { IconType } from '@/components/common/Icon/TIcon.vue'
 import TIcon from '@/components/common/Icon/TIcon.vue'
+import { cn } from '@/methods/utils'
 
 interface Props extends /* @vue-ignore */ Omit<ButtonHTMLAttributes, 'type'> {
   type?: 'primary' | 'secondary' | 'subtle' | 'highlighted'
   size?: 'md' | 'sm' | 'xs' | 'xxs'
   icon?: IconType
   iconPosition?: 'left' | 'right'
+  class?: HTMLAttributes['class']
 }
 
 const {
   type = 'primary',
   size = 'md',
   iconPosition = 'right',
-  icon = undefined,
+  icon,
+  class: className,
 } = defineProps<Props>()
 </script>
 
 <template>
   <button
     type="button"
     class="flex items-center justify-center gap-1 rounded border transition-colors duration-200"
-    :class="{
-      'border-naturals-n5 bg-naturals-n3 text-naturals-n12 hover:border-primary-p3 hover:bg-primary-p3 hover:text-naturals-n14 focus:border-primary-p2 focus:bg-primary-p2 focus:text-naturals-n14 active:border-primary-p4 active:bg-primary-p4 active:text-naturals-n14 disabled:cursor-not-allowed disabled:border-naturals-n6 disabled:bg-naturals-n4 disabled:text-naturals-n7':
-        type === 'primary',
-      'border-naturals-n5 bg-transparent text-naturals-n10 hover:bg-naturals-n5 hover:text-naturals-n14 focus:border-naturals-n7 focus:bg-naturals-n5 focus:text-naturals-n14 active:border-naturals-n5 active:bg-naturals-n4 active:text-naturals-n14 disabled:cursor-not-allowed disabled:border-naturals-n6 disabled:bg-transparent disabled:text-naturals-n6':
-        type === 'secondary',
-      'border-none bg-transparent text-naturals-n13 hover:text-primary-p3 focus:text-primary-p2 focus:underline active:text-primary-p4 active:no-underline disabled:cursor-not-allowed disabled:text-naturals-n6':
-        type === 'subtle',
-      'border-primary-p2 bg-primary-p4 text-naturals-n14 hover:border-primary-p3 hover:bg-primary-p3 hover:text-naturals-n14 focus:border-primary-p2 focus:bg-primary-p2 focus:text-naturals-n14 active:border-primary-p4 active:bg-primary-p4 active:text-naturals-n14 disabled:cursor-not-allowed disabled:border-naturals-n6 disabled:bg-naturals-n4 disabled:text-naturals-n7':
-        type === 'highlighted',
-      'px-4 py-1.5 text-sm': size === 'md',
-      'px-2 py-0.5 text-sm': size === 'sm',
-      'p-0 text-sm': size === 'xs',
-      'p-0 text-xs': size === 'xxs',
-    }"
+    :class="
+      cn(
+        {
+          'border-naturals-n5 bg-naturals-n3 text-naturals-n12 hover:border-primary-p3 hover:bg-primary-p3 hover:text-naturals-n14 focus:border-primary-p2 focus:bg-primary-p2 focus:text-naturals-n14 active:border-primary-p4 active:bg-primary-p4 active:text-naturals-n14 disabled:cursor-not-allowed disabled:border-naturals-n6 disabled:bg-naturals-n4 disabled:text-naturals-n7':
+            type === 'primary',
+          'border-naturals-n5 bg-transparent text-naturals-n10 hover:bg-naturals-n5 hover:text-naturals-n14 focus:border-naturals-n7 focus:bg-naturals-n5 focus:text-naturals-n14 active:border-naturals-n5 active:bg-naturals-n4 active:text-naturals-n14 disabled:cursor-not-allowed disabled:border-naturals-n6 disabled:bg-transparent disabled:text-naturals-n6':
+            type === 'secondary',
+          'border-none bg-transparent text-naturals-n13 hover:text-primary-p3 focus:text-primary-p2 focus:underline active:text-primary-p4 active:no-underline disabled:cursor-not-allowed disabled:text-naturals-n6':
+            type === 'subtle',
+          'border-primary-p2 bg-primary-p4 text-naturals-n14 hover:border-primary-p3 hover:bg-primary-p3 hover:text-naturals-n14 focus:border-primary-p2 focus:bg-primary-p2 focus:text-naturals-n14 active:border-primary-p4 active:bg-primary-p4 active:text-naturals-n14 disabled:cursor-not-allowed disabled:border-naturals-n6 disabled:bg-naturals-n4 disabled:text-naturals-n7':
+            type === 'highlighted',
+          'px-4 py-1.5 text-sm': size === 'md',
+          'px-2 py-0.5 text-sm': size === 'sm',
+          'p-0 text-sm': size === 'xs',
+          'p-0 text-xs': size === 'xxs',
+        },
+        className,
+      )
+    "
   >
     <span v-if="$slots.default" class="whitespace-nowrap">
       <slot />

frontend/src/components/common/Button/TButton.vue

@@ -0,0 +1,11 @@
+// Copyright (c) 2025 Sidero Labs, Inc.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/src/methods/utils.ts

@@ -2,20 +2,11 @@
 //
 // Use of this software is governed by the Business Source License
 // included in the LICENSE file.
-
-import type { AllowedComponentProps, Component, Ref, VNodeProps } from 'vue'
+import type { Component } from 'vue'
 import { shallowRef } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
-type ComponentProps<C extends Component> = C extends new (...args: any) => any
-  ? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
-  : never
-
-export type Modal = {
-  component: Component
-  props?: any
-}
-
-export const modal: Ref<{ component: Component; props: any } | null> = shallowRef(null)
+export const modal = shallowRef<{ component: Component; props: unknown } | null>(null)
 
 export const showModal = <C extends Component>(component: C, props: ComponentProps<C>) => {
   modal.value = {

frontend/src/modal.ts

@@ -9,7 +9,10 @@ import type { ButtonHTMLAttributes } from 'vue'
 
 import TIcon from '@/components/common/Icon/TIcon.vue'
 
-defineProps</* @vue-ignore */ ButtonHTMLAttributes>()
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
+
+defineProps<Props>()
 </script>
 
 <template>