manage button states and color schemes with mixin

webapp/assets/_new/styles/mixins/buttonStates.scss

@@ -0,0 +1,69 @@
+@mixin buttonStates($color-scheme: primary, $filled: false) {
+  $main-color: $color-primary;
+  $active-color: $color-primary-dark;
+  $hover-color: $color-primary-light;
+
+  @if $color-scheme == danger {
+    $main-color: $color-danger;
+    $active-color: $color-danger-dark;
+    $hover-color: $color-danger-light;
+  }
+
+  color: $main-color;
+  border-color: $main-color;
+  background-color: transparent;
+  transition: background-color 0.1s;
+
+  &:focus {
+    outline: 1px dashed $main-color;
+  }
+
+  &:enabled {
+    &:hover {
+      color: $color-neutral-100;
+      border-color: $main-color;
+      background-color: $main-color;
+    }
+
+    &:active {
+      color: $color-neutral-100;
+      border-color: $active-color;
+      background-color: $active-color;
+    }
+  }
+
+  &:disabled {
+    color: $color-neutral-60;
+    border-color: $color-neutral-60;
+    cursor: default;
+  }
+
+  &.--loading {
+    color: $color-neutral-80;
+  }
+
+  @if $filled {
+    color: $color-neutral-100;
+    border-color: $main-color;
+    background-color: $main-color;
+
+    &:enabled {
+      &:hover {
+        border-color: $hover-color;
+        background-color: $hover-color;
+      }
+
+      &:active {
+        color: $color-neutral-100;
+        border-color: $active-color;
+        background-color: $active-color;
+      }
+    }
+
+    &:disabled {
+      color: $color-neutral-80;
+      background-color: $color-neutral-60;
+      border-color: $color-neutral-60;
+    }
+  }
+}

webapp/components/_new/generic/BaseButton/BaseButton.story.js

@@ -40,27 +40,6 @@ storiesOf('Generic/BaseButton', module)
     `,
   }))
 
-  .add('small', () => ({
-    components: { BaseButton },
-    template: `
-      <div>
-        <base-button size="small">Small</base-button>
-        <base-button size="small" circle>S</base-button>
-      </div>
-    `,
-  }))
-
-  .add('primary', () => ({
-    components: { BaseButton },
-    template: `
-      <div>
-        <base-button primary>Primary</base-button>
-        <base-button primary disabled>Disabled</base-button>
-        <base-button primary loading>Loading</base-button>
-      </div>
-    `,
-  }))
-
   .add('danger', () => ({
     components: { BaseButton },
     template: `
@@ -72,6 +51,28 @@ storiesOf('Generic/BaseButton', module)
     `,
   }))
 
+  .add('filled', () => ({
+    components: { BaseButton },
+    template: `
+      <div>
+        <base-button filled>Filled</base-button>
+        <base-button filled danger>Filled Danger</base-button>
+        <base-button filled disabled>Disabled</base-button>
+        <base-button filled loading>Loading</base-button>
+      </div>
+    `,
+  }))
+
+  .add('small', () => ({
+    components: { BaseButton },
+    template: `
+      <div>
+        <base-button size="small">Small</base-button>
+        <base-button size="small" circle>S</base-button>
+      </div>
+    `,
+  }))
+
   .add('ghost', () => ({
     // TODO: add documentation --> ghost button should only be used for very special occasions
     // e.g. for the ContentMenu + for the EditorMenuBarButtons

webapp/components/_new/generic/BaseButton/BaseButton.vue

@@ -1,12 +1,12 @@
 <template>
   <button
-    :type="type"
     :class="buttonClass"
     :disabled="loading"
+    :type="type"
     @click.capture="event => $emit('click', event)"
   >
-    <loading-spinner v-if="loading" />
     <base-icon v-if="icon" :name="icon" />
+    <loading-spinner v-if="loading" />
     <slot />
   </button>
 </template>
@@ -23,20 +23,20 @@ export default {
       type: Boolean,
       default: false,
     },
-    icon: {
+    danger: {
-      type: String,
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
     },
     ghost: {
       type: Boolean,
       default: false,
     },
-    primary: {
+    icon: {
-      type: Boolean,
+      type: String,
-      default: false,
-    },
-    danger: {
-      type: Boolean,
-      default: false,
     },
     loading: {
       type: Boolean,
@@ -46,7 +46,7 @@ export default {
       type: String,
       default: 'regular',
       validator(value) {
-        return value.match(/(small|regular|large)/)
+        return value.match(/(small|regular)/)
       },
     },
     type: {
@@ -63,14 +63,12 @@ export default {
 
       if (this.$slots.default == null) buttonClass += ' --icon-only'
       if (this.circle) buttonClass += ' --circle'
-      if (this.ghost) buttonClass += ' --ghost'
+      if (this.danger) buttonClass += ' --danger'
       if (this.loading) buttonClass += ' --loading'
-
-      if (this.primary) buttonClass += ' --primary'
-      else if (this.danger) buttonClass += ' --danger'
-
       if (this.size === 'small') buttonClass += ' --small'
-      else if (this.size === 'large') buttonClass += ' --large'
+
+      if (this.filled) buttonClass += ' --filled'
+      else if (this.ghost) buttonClass += ' --ghost'
 
       return buttonClass
     },
@@ -79,95 +77,32 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/_new/styles/mixins/buttonStates.scss';
+
 .base-button {
+  @include buttonStates;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 36px;
   padding: 0 12px;
   vertical-align: bottom;
-  color: $color-primary;
+  border: 1px solid;
-  background-color: transparent;
-  border: 1px solid $color-primary;
   border-radius: 6px;
   overflow: hidden;
   font-weight: $font-weight-bold;
   cursor: pointer;
-  transition: background-color 0.1s;
-
-  &:focus {
-    outline: 1px dashed $color-primary;
-  }
-
-  &:hover {
-    color: $color-neutral-100;
-    background-color: $color-primary;
-  }
-
-  &:active {
-    color: $color-neutral-100;
-    border-color: $color-primary-dark;
-    background-color: $color-primary-dark;
-  }
-
-  &:disabled {
-    color: $color-neutral-60;
-    border-color: $color-neutral-60;
-    background-color: transparent;
-    cursor: default;
-  }
-
-  &.--primary {
-    color: $color-neutral-100;
-    background-color: $color-primary;
-
-    &:hover {
-      background-color: $color-primary-light;
-      border-color: $color-primary-light;
-    }
-
-    &:active {
-      background-color: $color-primary-dark;
-      border-color: $color-primary-dark;
-    }
-
-    &:disabled {
-      background-color: $color-neutral-60;
-      border-color: $color-neutral-60;
-    }
-  }
 
   &.--danger {
-    color: $color-neutral-100;
+    @include buttonStates($color-scheme: danger);
-    background-color: $color-danger;
-    border-color: $color-danger;
-
-    &:hover {
-      background-color: $color-danger-light;
-      border-color: $color-danger-light;
-    }
-
-    &:active {
-      background-color: $color-danger-dark;
-      border-color: $color-danger-dark;
-    }
-
-    &:disabled {
-      background-color: $color-neutral-60;
-      border-color: $color-neutral-60;
-    }
   }
 
-  &.--small {
+  &.--filled {
-    height: 26px;
+    @include buttonStates($filled: true);
-    font-size: $font-size-small;
-
-    &.--circle {
-      width: 26px;
-    }
   }
 
-  &.--large {
+  &.--danger.--filled {
+    @include buttonStates($color-scheme: danger, $filled: true)
   }
 
   &.--circle {
@@ -179,6 +114,15 @@ export default {
     border: none;
   }
 
+  &.--small {
+    height: 26px;
+    font-size: $font-size-small;
+
+    &.--circle {
+      width: 26px;
+    }
+  }
+
   &:not(.--icon-only) > .base-icon {
     margin-right: 6px;
   }
@@ -189,13 +133,8 @@ export default {
     color: $color-neutral-60;
   }
 
-  &.--loading {
+  &.--filled > .loading-spinner {
-    color: $color-neutral-80;
+    color: $color-neutral-100;
-
-    &.--primary > .loading-spinner,
-    &.--danger > .loading-spinner {
-      color: $color-neutral-100;
-    }
   }
 }
 </style>