Merge pull request #101 from modrinth/feature/joined-buttons

Joined buttons
modrinth · Oct 16, 2023 · 5e4c261 · 5e4c261
2 parents ffb491a + 6fb04e2
commit 5e4c261
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 452 deletions.
diff --git a/docs/components/button.md b/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>
+```
diff --git a/docs/components/dropdown-button.md b/docs/components/dropdown-button.md
diff --git a/lib/assets/icons/import.svg b/lib/assets/icons/import.svg
diff --git a/lib/assets/styles/classes.scss b/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 {