Joined buttons

docs/components/button.md

@@ -107,3 +107,53 @@
 <Button icon-only transparent><SunIcon /></Button>
 <Button icon-only transparent><DropdownIcon /></Button>
 ```
+
+## Joined buttons
+
+<DemoContainer>
+<div class="joined-buttons">
+  <Button color="primary"><UploadIcon /> Upload</Button>
+  <OverflowMenu :options="[
+  {
+    'id': 'import',
+    'action': () => {},
+  },
+  {
+    'id': 'edit',
+    'action': () => {}
+  }
+]" class="btn btn-primary btn-dropdown-animation icon-only">
+    <DropdownIcon />
+    <template #import>
+      <ImportIcon /> Import
+    </template>
+    <template #edit>
+      <EditIcon /> Edit
+    </template>
+  </OverflowMenu>
+</div>
+</DemoContainer>
+
+```vue
+<div class="joined-buttons">
+  <Button color="primary"><UploadIcon /> Upload</Button>
+  <OverflowMenu :options="[
+  {
+    'id': 'import',
+    'action': () => {},
+  },
+  {
+    'id': 'edit',
+    'action': () => {}
+  }
+]" class="btn btn-primary btn-dropdown-animation icon-only">
+    <DropdownIcon />
+    <template #import>
+      <ImportIcon /> Import
+    </template>
+    <template #edit>
+      <EditIcon /> Edit
+    </template>
+  </OverflowMenu>
+</div>
+```

lib/assets/icons/import.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-import"><path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4"/></svg>

lib/assets/styles/classes.scss

@@ -486,6 +486,18 @@ a,
     background: none;
     box-shadow: none;
   }
+
+  &.btn-dropdown-animation {
+    svg {
+      transition: transform 0.125s ease-in-out;
+    }
+
+    &.popout-open {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
 }
 
 .btn-group {
@@ -494,6 +506,27 @@ a,
   flex-wrap: wrap;
 }
 
+.joined-buttons {
+  display: flex;
+  gap: 1px;
+
+  > :not(:first-child) {
+    &.btn,
+    > .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  > :not(:last-child) {
+    &.btn,
+    > .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
 // PROJECT CARDS
 
 .project-list {

lib/components/base/PopoutMenu.vue

@@ -1,6 +1,11 @@
 <template>
   <div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible">
-    <button v-bind="$attrs" ref="dropdownButton" @click="toggleDropdown">
+    <button
+      v-bind="$attrs"
+      ref="dropdownButton"
+      :class="{ 'popout-open': dropdownVisible }"
+      @click="toggleDropdown"
+    >
       <slot></slot>
     </button>
     <div

lib/components/index.js

@@ -88,6 +88,7 @@ export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.sv
 export { default as HistoryIcon } from '@/assets/icons/history.svg'
 export { default as HomeIcon } from '@/assets/icons/home.svg'
 export { default as ImageIcon } from '@/assets/icons/image.svg'
+export { default as ImportIcon } from '@/assets/icons/import.svg'
 export { default as InfoIcon } from '@/assets/icons/info.svg'
 export { default as IssuesIcon } from '@/assets/icons/issues.svg'
 export { default as LeftArrowIcon } from '@/assets/icons/left-arrow.svg'