From 7cf8aec28374b939335730cd70c1970f6fcd7db4 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 18 Dec 2019 23:59:43 +0530
Subject: [PATCH] add ghost style for special use cases

---
 .../_new/generic/BaseButton/BaseButton.story.js  | 11 +++++++++++
 .../_new/generic/BaseButton/BaseButton.vue       | 16 +++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js
index ec56b40c9..900c7b9a2 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js
@@ -71,3 +71,14 @@ storiesOf('Generic/BaseButton', module)
       </div>
     `,
   }))
+
+  .add('ghost', () => ({
+    // TODO: add documentation --> ghost button should only be used for very special occasions
+    // e.g. for the ContentMenu + for the EditorMenuBarButtons
+    components: { BaseButton },
+    template: `
+      <div>
+        <base-button size="small" icon="ellipsis-v" circle ghost />
+      </div>
+    `
+  }))
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index 30893bcb5..1044a30c7 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -1,5 +1,10 @@
 <template>
-  <button :type="type" :class="buttonClass" :disabled="loading" @click="$emit('click')">
+  <button
+    :type="type"
+    :class="buttonClass"
+    :disabled="loading"
+    @click.capture="(event) => $emit('click', event)"
+  >
     <loading-spinner v-if="loading" />
     <base-icon v-if="icon" :name="icon" />
     <slot />
@@ -21,6 +26,10 @@ export default {
     icon: {
       type: String,
     },
+    ghost: {
+      type: Boolean,
+      default: false,
+    },
     primary: {
       type: Boolean,
       default: false,
@@ -54,6 +63,7 @@ export default {
 
       if (this.$slots.default == null) buttonClass += ' --icon-only'
       if (this.circle) buttonClass += ' --circle'
+      if (this.ghost) buttonClass += ' --ghost'
       if (this.loading) buttonClass += ' --loading'
 
       if (this.primary) buttonClass += ' --primary'
@@ -166,6 +176,10 @@ export default {
     border-radius: 50%;
   }
 
+  &.--ghost {
+    border: none;
+  }
+
   &:not(.--icon-only) > .base-icon {
     margin-right: 6px;
   }