From f9a9ece320814d25a3423ac1d402f56a8b113cf1 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Wed, 11 Oct 2023 14:57:23 -0700
Subject: [PATCH] More button options and dividers in overflow menus

---
 docs/components/button.md            |  32 ++++++++
 docs/components/overflow-menu.md     |  71 ++++++++++++++---
 lib/assets/icons/copy.svg            |   1 +
 lib/assets/styles/classes.scss       | 113 ++++++++++++++++++---------
 lib/components/base/Button.vue       |  12 +++
 lib/components/base/OverflowMenu.vue |  37 +++++----
 lib/components/base/PopoutMenu.vue   |   2 +-
 lib/components/index.js              |   1 +
 8 files changed, 201 insertions(+), 68 deletions(-)
 create mode 100644 lib/assets/icons/copy.svg

diff --git a/docs/components/button.md b/docs/components/button.md
index 8545d8da2..3ceb5fee7 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -58,6 +58,38 @@
 <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>
diff --git a/docs/components/overflow-menu.md b/docs/components/overflow-menu.md
index 8c7d07cb8..bd80ad59c 100644
--- a/docs/components/overflow-menu.md
+++ b/docs/components/overflow-menu.md
@@ -1,32 +1,47 @@
-<script setup>
-const options = [
+# Overflow Menu
+<DemoContainer>
+  <OverflowMenu :options="[
   {
-    'id': 'like',
+    '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': () => {}
+    'action': () => {},
+    'hoverFilled': true,
   }
-]
-</script>
-
-# Overflow Menu
-<DemoContainer>
-  <OverflowMenu :options="options" class="btn">
+]" class="btn">
     More options...
-    <template #like>
-      <HeartIcon /> Like
+    <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>
@@ -34,7 +49,37 @@ const options = [
 </DemoContainer>
 
 ```vue
-<OverflowMenu :options="options" class="btn">
+<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
diff --git a/lib/assets/icons/copy.svg b/lib/assets/icons/copy.svg
new file mode 100644
index 000000000..f3b629c6b
--- /dev/null
+++ b/lib/assets/icons/copy.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-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
\ No newline at end of file
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index a7e7ceab3..e1a138dc4 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -266,10 +266,13 @@ a,
   &:focus-visible:not(&:disabled),
   &:hover:not(&:disabled) {
     cursor: pointer;
-    filter: brightness(0.85);
+
+    &:not(.btn-outline.btn-hover-filled, .btn-transparent) {
+      filter: brightness(0.85);
+    }
   }
 
-  &:active:not(&:disabled) {
+  &:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
     filter: brightness(0.8);
   }
 
@@ -321,86 +324,118 @@ a,
 .btn {
   @extend .button-base;
 
-  --text-color: var(--color-base);
-  --background-color: var(--color-button-bg);
-  --shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
+  --_text-color: var(--color-base);
+  --_background-color: var(--color-button-bg);
+  --_accent-color: var(--color-base);
+  --_shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 
   &.btn-outline,
   &.btn-transparent {
-    --background-color: var(--color-base);
-    --text-color: var(--color-raised-bg);
     box-sizing: border-box;
 
     background-color: transparent;
-    color: var(--background-color);
-    transition: background-color 0.2s ease-in-out;
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out , color 0.2s ease-in-out;
+    box-shadow: none;
+  }
+
+  &.btn-transparent {
+    --_accent-color: var(--color-base);
+    color: var(--_accent-color);
+
+    &.btn-hover-filled-only {
+      color: var(--color-base);
+    }
 
     &:focus-visible:not(&:disabled),
     &:hover:not(&:disabled) {
       background-color: var(--color-button-bg);
-      filter: none;
+
+      &.btn-hover-filled, &.btn-hover-filled-only {
+        color: var(--_text-color);
+        background-color: var(--_background-color);
+      }
     }
   }
 
   &.btn-outline {
-    --background-color: var(--color-contrast);
-    border: 2px solid var(--background-color);
+    --_accent-color: var(--color-contrast);
+    border: 2px solid var(--_accent-color);
     padding-block: calc(var(--gap-sm) - 2px);
-  }
+    color: var(--_background-color);
 
-  &.btn-raised {
-    --shadow: var(--shadow-inset-sm), var(--shadow-raised);
-    --background-color: var(--color-raised-bg);
+    &.btn-hover-filled-only {
+      color: var(--color-contrast);
+      border-color: var(--color-contrast);
+    }
+
+    &:focus-visible:not(&:disabled),
+    &:hover:not(&:disabled) {
+      &.btn-hover-filled, &.btn-hover-filled-only {
+        border-color: var(--_accent-color);
+        color: var(--_text-color);
+        background-color: var(--_background-color);
+      }
+    }
   }
 
   &.btn-danger {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-red);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-red);
+    --_accent-color: var(--color-red);
   }
 
   &.btn-primary {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-brand);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-brand);
+    --_accent-color: var(--color-brand);
   }
 
   &.btn-secondary {
-    --text-color: var(--color-contrast);
-    --background-color: var(--color-brand-highlight);
+    --_text-color: var(--color-contrast);
+    --_background-color: var(--color-brand-highlight);
+    --_accent-color: var(--color-brand-highlight);
   }
 
   &.btn-highlight {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-orange);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-orange);
+    --_accent-color: var(--color-orange);
   }
 
   &.btn-red {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-red);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-red);
+    --_accent-color: var(--color-red);
   }
 
   &.btn-orange {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-orange);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-orange);
+    --_accent-color: var(--color-orange);
   }
 
   &.btn-green {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-green);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-green);
+    --_accent-color: var(--color-green);
   }
 
   &.btn-blue {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-blue);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-blue);
+    --_accent-color: var(--color-blue);
   }
 
   &.btn-purple {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-purple);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-purple);
+    --_accent-color: var(--color-purple);
   }
 
   &.btn-gray {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-gray);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-gray);
+    --_accent-color: var(--color-gray);
   }
 
   &.btn-large {
@@ -410,9 +445,9 @@ a,
 
   box-sizing: border-box;
 
-  color: var(--text-color);
-  background-color: var(--background-color);
-  box-shadow: var(--shadow);
+  color: var(--_text-color);
+  background-color: var(--_background-color);
+  box-shadow: var(--_shadow);
   border-radius: var(--radius-md);
 
   padding: var(--gap-sm) var(--gap-lg);
diff --git a/lib/components/base/Button.vue b/lib/components/base/Button.vue
index 12290661c..4d9a4480d 100644
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -36,6 +36,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hoverFilled: {
+    type: Boolean,
+    default: false,
+  },
+  hoverFilledOnly: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const accentedButton = computed(() =>
@@ -61,6 +69,8 @@ const accentedButton = computed(() =>
       'btn-purple': color === 'purple',
       'btn-gray': color === 'gray',
       'btn-transparent': transparent,
+      'btn-hover-filled': hoverFilled,
+      'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
     }"
@@ -88,6 +98,8 @@ const accentedButton = computed(() =>
       'btn-purple': color === 'purple',
       'btn-gray': color === 'gray',
       'btn-transparent': transparent,
+      'btn-hover-filled': hoverFilled,
+      'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
     }"
diff --git a/lib/components/base/OverflowMenu.vue b/lib/components/base/OverflowMenu.vue
index c7dbae28a..328c88564 100644
--- a/lib/components/base/OverflowMenu.vue
+++ b/lib/components/base/OverflowMenu.vue
@@ -8,21 +8,28 @@
   >
     <slot></slot>
     <template #menu>
-      <Button
-        v-for="option in options"
-        :key="`option-${option.id}`"
-        :color="option.color ? option.color : 'default'"
-        transparent
-        :action="
-          () => {
-            option.action()
-            close()
-          }
-        "
-      >
-        <template v-if="!$slots[option.id]">{{ option.id }}</template>
-        <slot :name="option.id"></slot>
-      </Button>
+      <template v-for="(option, index) in options">
+        <div v-if="option.divider" :key="`divider-${index}`" class="card-divider"></div>
+        <Button
+          v-else
+          :key="`option-${option.id}`"
+          :color="option.color ? option.color : 'default'"
+          :hover-filled="option.hoverFilled"
+          :hover-filled-only="option.hoverFilledOnly"
+          transparent
+          :action="
+            () => {
+              option.action()
+              if (!option.remainOnClick) {
+                close()
+              }
+            }
+          "
+        >
+          <template v-if="!$slots[option.id]">{{ option.id }}</template>
+          <slot :name="option.id"></slot>
+        </Button>
+      </template>
     </template>
   </PopoutMenu>
 </template>
diff --git a/lib/components/base/PopoutMenu.vue b/lib/components/base/PopoutMenu.vue
index 13a2b6f5d..54cf0b2c1 100644
--- a/lib/components/base/PopoutMenu.vue
+++ b/lib/components/base/PopoutMenu.vue
@@ -89,7 +89,7 @@ onBeforeUnmount(() => {
     position: absolute;
     scale: 0.75;
     border: 1px solid var(--color-button-bg);
-    padding: var(--gap-md);
+    padding: var(--gap-sm);
     width: fit-content;
     border-radius: var(--radius-md);
     background-color: var(--color-raised-bg);
diff --git a/lib/components/index.js b/lib/components/index.js
index 8fd3d367e..44969fe98 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -59,6 +59,7 @@ export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg'
 export { default as CodeIcon } from '@/assets/icons/code.svg'
 export { default as CoinsIcon } from '@/assets/icons/coins.svg'
 export { default as ContractIcon } from '@/assets/icons/contract.svg'
+export { default as CopyIcon } from '@/assets/icons/copy.svg'
 export { default as CopyrightIcon } from '@/assets/icons/copyright.svg'
 export { default as CurrencyIcon } from '@/assets/icons/currency.svg'
 export { default as DashboardIcon } from '@/assets/icons/dashboard.svg'