Merge pull request #98 from modrinth/feature/popout-menus

Small button refactor, overflow and popout menus

docs/.vitepress/config.js

@@ -30,6 +30,8 @@ export default {
           { text: 'Modal', link: '/components/modal' },
           { text: 'Dropdown Select', link: '/components/dropdown-select' },
           { text: 'Dropdown Button', link: '/components/dropdown-button' },
+          { text: 'Popout Menu', link: '/components/popout-menu' },
+          { text: 'Overflow Menu', link: '/components/overflow-menu' },
           { text: 'Project Card', link: '/components/project-card' },
           { text: 'Environment Indicator', link: '/components/environment-indicator' },
           { text: 'Categories', link: '/components/categories' },

docs/components/button.md

@@ -1,35 +1,109 @@
-# Button
+# Buttons
+
+## Standard
+
+<DemoContainer>
+<Button><BookmarkIcon /> Save</Button>
+<Button color="primary"><UploadIcon /> Upload</Button>
+<Button color="secondary"><PlusIcon /> Create new instance</Button>
+<Button color="highlight"><ScaleIcon /> Submit for review</Button>
+<Button color="danger"><TrashIcon /> Delete</Button>
+</DemoContainer>
+
+```vue
+<Button><BookmarkIcon /> Save</Button>
+<Button color="primary"><UploadIcon /> Upload</Button>
+<Button color="secondary"><PlusIcon /> Create new instance</Button>
+<Button color="highlight"><ScaleIcon /> Submit for review</Button>
+<Button color="danger"><TrashIcon /> Delete</Button>
+```
+
+## Large
+
+<DemoContainer>
+<Button color="primary" large><DownloadIcon /> Download</Button>
+<Button color="blue" large><ServerIcon /> Host a Server</Button>
+<Button color="purple" large><HeartIcon /> Donate</Button>
+</DemoContainer>
+
+```vue
+<Button color="primary" large><DownloadIcon /> Download</Button>
+<Button color="blue" large><ServerIcon /> Host a Server</Button>
+<Button color="purple" large><HeartIcon /> Donate</Button>
+```
+
+## Outline
+
+<DemoContainer>
+<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
+<Button color="red" outline><ReportIcon /> Report project</Button>
+</DemoContainer>
+
+```vue
+<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
+<Button color="red" outline><ReportIcon /> Report project</Button>
+```
+
+## Transparent
+
+<DemoContainer>
+<Button transparent><IssuesIcon /> Report issues</Button>
+<Button transparent><CodeIcon /> View sources</Button>
+<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
+</DemoContainer>
+
+```vue
+<Button transparent><IssuesIcon /> Report issues</Button>
+<Button transparent><CodeIcon /> View sources</Button>
+<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
+```
+
+## Hover-filled
+
+<DemoContainer>
+<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
+</DemoContainer>
+
+```vue
+<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
+```
+
+## Hover-filled-only
+
+<DemoContainer>
+<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
+</DemoContainer>
+
+```vue
+<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
+```
+
+## Icon-only
 
 <DemoContainer>
-<Button>Standard</Button>
-<Button color="primary">Primary</Button>
-<Button color="secondary">Secondary</Button>
-<Button color="highlight">Highlight</Button>
-<Button color="raised">Raised</Button>
-<Button color="danger">Danger</Button>
-<Button><CheckIcon /> With Icon</Button>
-<Button iconOnly><XIcon /></Button>
-<Button large>Large button</Button>
-<Button color="primary" large>Discover mods</Button>
-<Button color="danger" large outline>Be warned</Button>
-<Button large outline>Sign up</Button>
-<Button><HeartIcon /> Follow project</Button>
-<Button outline color="danger"><TrashIcon /> Delete project</Button>
+<Button icon-only><HeartIcon /></Button>
+<Button icon-only><XIcon /></Button>
+<Button icon-only><MoreHorizontalIcon /></Button>
+<Button icon-only transparent><SunIcon /></Button>
+<Button icon-only transparent><DropdownIcon /></Button>
 </DemoContainer>
 
 ```vue
-<Button>Standard</Button>
-<Button color="primary">Primary</Button>
-<Button color="secondary">Secondary</Button>
-<Button color="highlight">Highlight</Button>
-<Button color="raised">Raised</Button>
-<Button color="danger">Danger</Button>
-<Button><CheckIcon /> With Icon</Button>
-<Button iconOnly><XIcon /></Button>
-<Button large>Large button</Button>
-<Button color="primary" large>Discover mods</Button>
-<Button color="danger" large outline>Be warned</Button>
-<Button large outline>Sign up</Button>
-<Button><HeartIcon /> Follow project</Button>
-<Button outline color="danger"><TrashIcon /> Delete project</Button>
+<Button icon-only><HeartIcon /></Button>
+<Button icon-only><XIcon /></Button>
+<Button icon-only><MoreHorizontalIcon /></Button>
+<Button icon-only transparent><SunIcon /></Button>
+<Button icon-only transparent><DropdownIcon /></Button>
 ```

docs/components/overflow-menu.md

@@ -0,0 +1,94 @@
+# Overflow Menu
+<DemoContainer>
+  <OverflowMenu :options="[
+  {
+    'id': 'play',
+    'color': 'primary',
+    'action': () => {},
+    'hoverFilledOnly': true
+  },
+  { divider: true },
+  {
+    'id': 'duplicate',
+    'action': () => {}
+  },
+  {
+    'id': 'report',
+    'action': () => {}
+  },
+  {
+    'id': 'remain',
+    'action': () => {},
+    'remainOnClick': true,
+  },
+  { divider: true },
+  {
+    'id': 'delete',
+    'color': 'danger',
+    'action': () => {},
+    'hoverFilled': true,
+  }
+]" class="btn">
+    More options...
+    <template #play>
+      <PlayIcon /> Play
+    </template>
+    <template #duplicate>
+      <CopyIcon /> Duplicate
+    </template>
+    <template #report>
+      <ReportIcon /> Report
+    </template>
+    <template #remain>
+      <ClearIcon /> I shall remain
+    </template>
+    <template #delete>
+      <TrashIcon /> Delete
+    </template>
+  </OverflowMenu>
+</DemoContainer>
+
+```vue
+<OverflowMenu
+  class="btn"
+  :options="[
+    {
+      'id': 'play',
+      'color': 'primary',
+      'action': () => {},
+      'hoverFilledOnly': true
+    },
+    { divider: true },
+    {
+      'id': 'duplicate',
+      'action': () => {}
+    },
+    {
+      'id': 'report',
+      'action': () => {}
+    },
+    {
+      'id': 'remain',
+      'action': () => {},
+      'remainOnClick': true,
+    },
+    { divider: true },
+    {
+      'id': 'delete',
+      'color': 'danger',
+      'action': () => {},
+      'hoverFilled': true,
+    }
+]">
+  More options...
+  <template #like>
+    <HeartIcon /> Like
+  </template>
+  <template #report>
+    <ReportIcon /> Report
+  </template>
+  <template #delete>
+    <TrashIcon /> Delete
+  </template>
+</OverflowMenu>
+```

docs/components/popout-menu.md

@@ -0,0 +1,76 @@
+# Popout Menu
+<DemoContainer>
+  <PopoutMenu class="btn" position="bottom" direction="left">
+    Bottom going left
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="bottom" direction="right">
+    Bottom going right
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="top" direction="left">
+    Top going left
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="top" direction="right">
+    Top going right
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="left" direction="up">
+    Left going up
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="left" direction="down">
+    Left going down
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="right" direction="up">
+    Right going up
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="right" direction="down">
+    Right going down
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+</DemoContainer>
+
+```vue
+<PopoutMenu class="btn" position="bottom" direction="right">
+  Bottom going right
+  <template #menu>
+    Menu contents!
+  </template>
+</PopoutMenu>
+```