add style fixes for input button tabs

src/components/Button/SButton/SButton.vue

@@ -52,6 +52,12 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
    * By default it's set to `false`
    */
   @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
+  /**
+   * Primary property for `type="action"` buttons.
+   *
+   * By default it's set to `false`
+   */
+  @Prop({ default: false, type: Boolean }) readonly primary!: boolean
   /**
    * Icon name from icon collection of this library
    */
@@ -144,6 +150,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
     if (this.alternative) {
       cssClasses.push('s-alternative')
     }
+    if (this.primary) {
+      cssClasses.push('s-primary')
+    }
     if (this.pressed) {
       cssClasses.push('s-pressed')
     }
@@ -171,15 +180,14 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
   }
 
   get isRounded (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
+    if (([ButtonTypes.ACTION] as Array<string>).includes(this.type)) return this.rounded
 
-    return this.rounded
+    return false
   }
 
   get isLoading (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type) || this.isRounded) {
-      return false
-    }
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
+
     return this.loading
   }
 

src/components/DesignSystem/DesignSystemInject.ts

@@ -12,4 +12,8 @@ export default class DesignSystemInject extends Vue {
   get designSystemClass (): string {
     return this.useDesignSystem ? this.designSystem.value : ''
   }
+
+  get isNeumorphic (): boolean {
+    return this.designSystem.value === DesignSystem.NEUMORPHIC
+  }
 }

src/components/Input/SInput/SInput.vue

@@ -3,10 +3,10 @@
     class="s-input"
     :class="computedClasses"
   >
-    <slot name="top" />
+    <slot v-if="isNeumorphic" name="top" />
 
     <div class="s-input__content">
-      <slot name="left" />
+      <slot v-if="isNeumorphic" name="left" />
 
       <div class="s-input__input">
         <span v-if="value && isBigInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
@@ -57,15 +57,15 @@
           >
         </template>
       </div>
-      <slot name="right" />
+      <slot v-if="isNeumorphic" name="right" />
     </div>
 
-    <slot name="bottom"/>
+    <slot v-if="isNeumorphic" name="bottom"/>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref, Inject } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
 import Input from 'element-ui/lib/input'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
@@ -178,6 +178,16 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     this.$el.addEventListener('animationstart', this.changeAutofillValue)
   }
 
+  updated (): void {
+    if (!this.isNeumorphic) {
+      ['top', 'bottom', 'left', 'right'].forEach(slotName => {
+        if (this.$slots[slotName]) {
+          console.warn(`[s-input] Slot "${slotName}" is not available with used design system`)
+        }
+      })
+    }
+  }
+
   destroyed (): void {
     this.$el.removeEventListener('animationstart', this.changeAutofillValue)
   }

src/components/Tab/STabs/STabs.vue

@@ -8,7 +8,7 @@
     :addable="addable"
     :editable="editable"
     :stretch="stretch"
-    :tab-position="position"
+    :tab-position="computedPosition"
     :before-leave="beforeLeave"
     @tab-click="handleClick"
     @tab-remove="handleRemove"
@@ -92,22 +92,31 @@ export default class STabs extends Mixins(BorderRadiusMixin, DesignSystemInject)
   }
 
   get computedType (): string {
+    // neu tabs implemented only with TabsType.ROUNDED type
+    if (this.isNeumorphic) return ''
     if (!(Object.values(TabsType) as Array<string>).includes(this.type)) return ''
     if ([TabsType.ROUNDED, TabsType.ACCENT_ROUNDED].includes(this.type)) return ''
     return this.type
   }
 
+  get computedPosition (): string {
+    if (this.isNeumorphic && ([TabsPosition.LEFT, TabsPosition.RIGHT] as Array<string>).includes(this.position)) {
+      console.warn(`[s-tabs] "${this.position}" position is not available with used design system, "${TabsPosition.TOP}" is used instead`)
+      return TabsPosition.TOP
+    }
+
+    return this.position
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.designSystemClass) {
       cssClasses.push(this.designSystemClass)
     }
-    if (this.type === TabsType.ROUNDED &&
-      ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
+    // neu tabs implemented only with TabsType.ROUNDED type
+    if (this.isNeumorphic || (this.type === TabsType.ROUNDED && ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position))) {
       cssClasses.push('s-rounded')
-    }
-    if (this.type === TabsType.ACCENT_ROUNDED &&
-      ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
+    } else if (this.type === TabsType.ACCENT_ROUNDED && ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-accent-rounded')
     }
     if (this.isStandardBorderRadius) {

src/stories/SButton.stories.ts

@@ -26,10 +26,11 @@ export const configurable = () => ({
                :border-radius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
+               :primary="primary"
                @click="handleClick"
               >
-                <span v-if="content">{{ content }}</span>
-                <s-icon v-else :name="icon"/>
+                <s-icon v-if="isAction" :name="icon"/>
+                <span v-else>{{ content }}</span>
               </s-button>
             </s-design-system-provider>`,
   props: {
@@ -57,6 +58,9 @@ export const configurable = () => ({
     alternative: {
       default: boolean('Alternative', false)
     },
+    primary: {
+      default: boolean('Primary', false)
+    },
     tooltip: {
       default: text('Tooltip', '')
     },
@@ -72,6 +76,11 @@ export const configurable = () => ({
   },
   methods: {
     handleClick: () => alert('clicked')
+  },
+  computed: {
+    isAction: ({ type }) => {
+      return type === ButtonTypes.ACTION
+    }
   }
 })
 

src/styles/button.scss

@@ -139,24 +139,26 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
         font-size: var(--s-icon-font-size-mini);
       }
     }
-    color: var(--s-color-base-content-primary);
-    background-color: var(--s-color-base-background);
-    border-color: var(--s-color-base-background);
-    &.focusing, &:hover, &.s-pressed {
+    &:not(.s-primary) {
       color: var(--s-color-base-content-primary);
-      background-color: var(--s-color-base-background-hover);
-      border-color: var(--s-color-base-background-hover);
-    }
-    @include disabled;
-    &.s-alternative {
-      background-color: var(--s-color-base-on-accent);
-      border-color: var(--s-color-base-border-primary);
+      background-color: var(--s-color-base-background);
+      border-color: var(--s-color-base-background);
       &.focusing, &:hover, &.s-pressed {
         color: var(--s-color-base-content-primary);
-        background-color: var(--s-color-base-background);
-        border-color: var(--s-color-base-background);
+        background-color: var(--s-color-base-background-hover);
+        border-color: var(--s-color-base-background-hover);
       }
       @include disabled;
+      &.s-alternative {
+        background-color: var(--s-color-base-on-accent);
+        border-color: var(--s-color-base-border-primary);
+        &.focusing, &:hover, &.s-pressed {
+          color: var(--s-color-base-content-primary);
+          background-color: var(--s-color-base-background);
+          border-color: var(--s-color-base-background);
+        }
+        @include disabled;
+      }
     }
   }
   span {

src/styles/neumorphism/button.scss

@@ -171,7 +171,7 @@ $neu-button-padding-mini: 3px 6px !default;
     }
     @include disabled;
 
-    &.s-alternative {
+    &.s-alternative:not(.s-action) {
       background: $neu-button-primary-background-color-alternative;
       border-width: $neu-button-primary-border-width-alternative;
       box-shadow: $neu-button-primary-box-shadow-alternative;
@@ -244,43 +244,45 @@ $neu-button-padding-mini: 3px 6px !default;
   }
 
   &.s-action {
-    background: $neu-button-action-background-color;
-    border-color: $neu-button-action-border-color;
-    border-style: $neu-button-action-border-style;
-    border-width: $neu-button-action-border-width;
-    box-shadow: $neu-button-action-box-shadow;
-    color: $neu-button-action-text-color;
-
     @include action-size('big');
     @include action-size('medium');
     @include action-size('small');
     @include action-size('mini');
 
-    &:hover, &:focus, &.focusing {
-      background: $neu-button-action-background-color-hover;
-      border-color: $neu-button-action-border-color-hover;
-      color: $neu-button-action-text-color-hover;
-      box-shadow: $neu-button-action-box-shadow-hover;
-    }
-    &:active, &.s-pressed {
-      background: $neu-button-action-background-color-pressed;
-      border-color: $neu-button-action-border-color-pressed;
-      color: $neu-button-action-text-color-pressed;
-      box-shadow: $neu-button-action-box-shadow-pressed;
-    }
-    @include disabled($neu-button-action-border-width, $neu-button-action-background-color, $neu-button-action-box-shadow-pressed);
-    &.s-alternative {
-      color: $neu-button-action-text-color-alternative;
+    &:not(.s-primary) {
+      background: $neu-button-action-background-color;
+      border-color: $neu-button-action-border-color;
+      border-style: $neu-button-action-border-style;
+      border-width: $neu-button-action-border-width;
+      box-shadow: $neu-button-action-box-shadow;
+      color: $neu-button-action-text-color;
 
-      &, &:hover, &:focus, &.focusing, &:active, &.s-pressed {
-        background-color: $neu-button-action-background-color-alternative;
-        border-color: $neu-button-action-border-color-alternative;
-        box-shadow: $neu-button-action-box-shadow-alternative;
+      &:hover, &:focus, &.focusing {
+        background: $neu-button-action-background-color-hover;
+        border-color: $neu-button-action-border-color-hover;
+        color: $neu-button-action-text-color-hover;
+        box-shadow: $neu-button-action-box-shadow-hover;
       }
-      &:hover, &:focus, &.focusing, &:active, &.s-pressed {
-        color: $neu-button-action-text-color-alternative-active;
+      &:active, &.s-pressed {
+        background: $neu-button-action-background-color-pressed;
+        border-color: $neu-button-action-border-color-pressed;
+        color: $neu-button-action-text-color-pressed;
+        box-shadow: $neu-button-action-box-shadow-pressed;
+      }
+      @include disabled($neu-button-action-border-width, $neu-button-action-background-color, $neu-button-action-box-shadow-pressed);
+      &.s-alternative {
+        color: $neu-button-action-text-color-alternative;
+
+        &, &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+          background-color: $neu-button-action-background-color-alternative;
+          border-color: $neu-button-action-border-color-alternative;
+          box-shadow: $neu-button-action-box-shadow-alternative;
+        }
+        &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+          color: $neu-button-action-text-color-alternative-active;
+        }
+        @include disabled($neu-button-action-border-width, $neu-button-action-background-color-alternative, $neu-button-action-box-shadow-alternative);
       }
-      @include disabled($neu-button-action-border-width, $neu-button-action-background-color-alternative, $neu-button-action-box-shadow-alternative);
     }
   }
 }