add ghost style for special use cases

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>
+    `
+  }))

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;
   }