From 4006e9aff3c4e497dc23fe5bb88fc28c82a717d3 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Mon, 9 Nov 2020 23:27:06 +0300
Subject: [PATCH 01/22] Added Border Radius configuration, updated Tabs and
 Button components and stories.

---
 src/components/Button/SButton.vue | 19 +++++++++++-
 src/components/Button/consts.ts   |  3 +-
 src/components/Button/index.ts    |  4 +--
 src/components/Tab/STabs.vue      | 19 +++++++++++-
 src/components/Tab/consts.ts      |  4 +++
 src/components/Tab/index.ts       |  4 +--
 src/stories/SButton.stories.ts    | 26 +++++++++++++++-
 src/stories/Tab/STabs.stories.ts  |  6 +++-
 src/styles/button.scss            |  1 -
 src/styles/tabs.scss              | 50 ++++++++++++++++++++++++++-----
 src/styles/variables.scss         | 12 ++++++++
 src/types/index.ts                |  7 +++++
 12 files changed, 137 insertions(+), 18 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 14cb1635..c1d1d0b3 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -27,7 +27,7 @@ import { PopoverPlacement } from 'element-ui/types/popover'
 
 import { SIcon } from '../Icon'
 import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonSize, ButtonNativeTypes, BorderRadius } from './consts'
 
 @Component({
   components: { SIcon, STooltip }
@@ -52,6 +52,12 @@ export default class SButton extends Vue {
    * By default it's set to `"medium"`
    */
   @Prop({ default: ButtonSize.MEDIUM, type: String }) readonly size!: string
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Icon name from icon collection of this library
    */
@@ -113,6 +119,14 @@ export default class SButton extends Vue {
     return this.size
   }
 
+  get computedBrderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
   get computedType (): string {
     if (this.type === ButtonTypes.PRIMARY) {
       return this.type
@@ -127,6 +141,9 @@ export default class SButton extends Vue {
     } else if ((Object.values(ButtonSize) as Array<string>).includes(this.size)) {
       cssClasses.push(`s-${this.size}`)
     }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
       cssClasses.push(`s-${this.type}`)
     }
diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts
index 4599450b..fcd3e222 100644
--- a/src/components/Button/consts.ts
+++ b/src/components/Button/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types'
+import { Size, SizeExtended } from '../../types'
 
 export enum ButtonTypes {
   PRIMARY = 'primary',
@@ -15,3 +15,4 @@ export enum ButtonNativeTypes {
 }
 
 export const ButtonSize = Size
+export const BorderRadius = SizeExtended
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index f91e9931..b0f63a08 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,5 +1,5 @@
 import SButton from './SButton.vue'
 import SButtonGroup from './SButtonGroup.vue'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonSize, ButtonNativeTypes, BorderRadius } from './consts'
 
-export { SButton, SButtonGroup, ButtonTypes, ButtonSize, ButtonNativeTypes }
+export { SButton, SButtonGroup, ButtonTypes, ButtonSize, ButtonNativeTypes, BorderRadius }
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index 48af7487..77303fcb 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -22,7 +22,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
-import { TabsType, TabsPosition } from './consts'
+import { TabsType, TabsPosition, BorderRadius } from './consts'
 
 @Component
 export default class STabs extends Vue {
@@ -38,6 +38,12 @@ export default class STabs extends Vue {
    * `"rounded"` works only when position is `"top"` or `"bottom"`
    */
   @Prop({ type: String, default: '' }) readonly type!: string
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Will tabs be closable.
    *
@@ -93,12 +99,23 @@ export default class STabs extends Vue {
     return this.type !== TabsType.ROUNDED ? this.type : ''
   }
 
+  get computedBrderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.type === TabsType.ROUNDED &&
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
     }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     return cssClasses
   }
 
diff --git a/src/components/Tab/consts.ts b/src/components/Tab/consts.ts
index 5ae902a9..588e4a27 100644
--- a/src/components/Tab/consts.ts
+++ b/src/components/Tab/consts.ts
@@ -1,3 +1,5 @@
+import { SizeExtended } from '../../types'
+
 export enum TabsType {
   ROUNDED = 'rounded',
   CARD = 'card',
@@ -10,3 +12,5 @@ export enum TabsPosition {
   RIGHT = 'right',
   LEFT = 'left'
 }
+
+export const BorderRadius = SizeExtended
diff --git a/src/components/Tab/index.ts b/src/components/Tab/index.ts
index 7381c960..f832f521 100644
--- a/src/components/Tab/index.ts
+++ b/src/components/Tab/index.ts
@@ -2,8 +2,8 @@ import Vue from 'vue'
 import { TabPane } from 'element-ui'
 
 import STabs from './STabs.vue'
-import { TabsType, TabsPosition } from './consts'
+import { TabsType, TabsPosition, BorderRadius } from './consts'
 
 const STab = Vue.component('STab', TabPane)
 
-export { STab, STabs, TabsType, TabsPosition }
+export { STab, STabs, TabsType, TabsPosition, BorderRadius }
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index 980a010e..15ca1826 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -1,7 +1,7 @@
 import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components'
-import { ButtonSize, ButtonTypes } from '../components/Button'
+import { ButtonSize, ButtonTypes, BorderRadius } from '../components/Button'
 
 export default {
   component: SButton,
@@ -19,6 +19,7 @@ export const configurable = () => ({
                :icon="type === 'action' ? 'back' : ''"
                :type="type"
                :size="size"
+               :borderRadius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
                @click="handleClick"
@@ -38,6 +39,9 @@ export const configurable = () => ({
     size: {
       default: select('Size', Object.values(ButtonSize), ButtonSize.BIG)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     rounded: {
       default: boolean('Rounded', false)
     },
@@ -104,6 +108,26 @@ export const withDifferentSize = () => ({
   }
 })
 
+export const differentBorderRadiusData = Object.values(BorderRadius).map(borderRadius =>
+  ({ borderRadius, label: borderRadius[0].toUpperCase() + borderRadius.slice(1) }))
+export const withDifferentBorderRadius = () => ({
+  components: { SButton, SRow },
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-button
+                 v-for="item in items"
+                 :key="item.borderRadius"
+                 :borderRadius="item.borderRadius"
+               >
+                 {{ item.label }}
+               </s-button>
+             </s-row>`,
+  props: {
+    items: {
+      default: () => differentBorderRadiusData
+    }
+  }
+})
+
 export const disabled = () => ({
   components: { SButton, SRow },
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index ba750b3e..9dfcb1b7 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -1,7 +1,7 @@
 import { boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { STabs, STab } from '../../components'
-import { TabsPosition, TabsType } from '../../components/Tab'
+import { TabsPosition, TabsType, BorderRadius } from '../../components/Tab'
 
 export default {
   component: STabs,
@@ -14,6 +14,7 @@ export const defaultUsage = () => ({
   template: `<s-tabs
                v-model="activeName"
                :type="type"
+               :borderRadius="borderRadius"
                :position="position"
                :closable="closable"
                :addable="addable"
@@ -30,6 +31,9 @@ export const defaultUsage = () => ({
     type: {
       default: select('Type', [...Object.values(TabsType), '––'], '––')
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     position: {
       default: select('Position', Object.values(TabsPosition), TabsPosition.TOP)
     },
diff --git a/src/styles/button.scss b/src/styles/button.scss
index adf7d741..7eba54cd 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -145,7 +145,6 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
   color: var(--s-color-base-content-primary);
   background-color: var(--s-color-base-background);
   border-color: var(--s-color-base-background);
-  border-radius: 8px;
   &:hover, &:active, &:focus {
     color: var(--s-color-base-content-primary);
     background-color: var(--s-color-base-background-hover);
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 7df25f8f..a78dac59 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,7 +1,43 @@
 @import "./variables";
 
+@mixin tabs-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      &.el-tabs--card {
+        > .el-tabs__header {
+          .el-tabs__nav {
+            border-top-left-radius: $border-radius;
+            border-top-right-radius: $border-radius;
+          }
+        }
+      }
+      &.s-rounded {
+        .el-tabs__nav-wrap {
+          border-radius: $border-radius;
+          .el-tabs__item {
+            &.is-active {
+              border-radius: $border-radius;
+            }
+            &:focus.is-focus {
+              border-radius: $border-radius;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .s-tabs {
   width: 100%;
+  @include tabs-border-radius;
+  @include tabs-border-radius("medium", var(--s-border-radius-medium));
+  @include tabs-border-radius("small", var(--s-border-radius-small));
+  @include tabs-border-radius("mini", var(--s-border-radius-mini));
   .el-tabs__item {
     font-weight: bold;
     .el-icon-close {
@@ -31,8 +67,6 @@
       border-bottom-color: var(--s-color-base-background-hover);
       .el-tabs__nav {
         border-color: var(--s-color-base-background-hover);
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
       }
       .el-tabs__item {
         border-left-color: var(--s-color-base-background-hover);
@@ -45,7 +79,8 @@
       background-color: var(--s-color-base-background);
       border-bottom-color: var(--s-color-base-border-primary);
       .el-tabs__item {
-        &:hover, &.is-active {
+        &:hover,
+        &.is-active {
           color: var(--s-color-theme-accent);
         }
       }
@@ -57,29 +92,28 @@
     }
     .el-tabs__nav-wrap {
       background-color: var(--s-color-base-background);
-      border-radius: 8px;
       height: 32px;
-      &::after, .el-tabs__active-bar {
+      &::after,
+      .el-tabs__active-bar {
         height: 0;
       }
       .el-tabs__item {
         padding: 0 32px;
         height: 28px;
         line-height: 28px;
-        &:nth-child(2), &:last-child {
+        &:nth-child(2),
+        &:last-child {
           padding: 0 32px;
         }
         &.is-active {
           color: var(--s-color-base-content-primary);
           background-color: var(--s-color-base-on-accent);
           box-shadow: $s-shadow-surface;
-          border-radius: 8px;
           margin: 2px;
         }
         &:focus.is-focus {
           // TODO: make it more focusable
           box-shadow: $s-shadow-surface;
-          border-radius: 8px;
         }
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f9b61c17..4e7b3071 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -48,7 +48,15 @@ $s-size-medium: 40px !default;
 $s-size-small: 32px !default;
 $s-size-mini: 24px !default;
 
+// TODO: check do we need this default radius or not
 $s-border-radius-default: 4px !default;
+
+$s-border-radius-base: 4px;
+$s-border-radius-mini: $s-border-radius-base !default;
+$s-border-radius-small: $s-border-radius-base * 2 !default;
+$s-border-radius-medium: $s-border-radius-base * 3 !default;
+$s-border-radius-big: $s-border-radius-base * 4 !default;
+
 // Fonts
 $s-font-family-default: 'Sora', sans-serif !important;
 $s-font-family-mono: 'JetBrainsMono', monospace !important;
@@ -115,4 +123,8 @@ $--breakpoints-spec: (
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  --s-border-radius-mini: #{$s-border-radius-mini};
+  --s-border-radius-small: #{$s-border-radius-small};
+  --s-border-radius-medium: #{$s-border-radius-medium};
+  --s-border-radius-big: #{$s-border-radius-big};
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index 4c78a22f..50f485d2 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,6 +4,13 @@ export enum Size {
   SMALL = 'small'
 }
 
+export enum SizeExtended {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small',
+  MINI = 'mini'
+}
+
 export enum Direction {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'

From 451636349a8c98d459f30d4a550d0a721b11ee4b Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Mon, 9 Nov 2020 23:52:18 +0300
Subject: [PATCH 02/22] Updated Card component and story.

---
 src/components/Button/SButton.vue |  2 +-
 src/components/Card/SCard.vue     | 29 +++++++++++++++++++++++++++--
 src/components/Card/consts.ts     |  4 ++++
 src/components/Card/index.ts      |  4 ++--
 src/components/Tab/STabs.vue      |  2 +-
 src/stories/SCard.stories.ts      |  7 +++++--
 src/styles/card.scss              |  1 -
 src/styles/common.scss            | 18 +++++++++++++++++-
 8 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index c1d1d0b3..533e1e2c 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -119,7 +119,7 @@ export default class SButton extends Vue {
     return this.size
   }
 
-  get computedBrderRadius (): string {
+  get computedBorderRadius (): string {
     if (this.borderRadius === BorderRadius.SMALL ||
       !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
       return ''
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index bf2ea598..188e2d2a 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card
     class="s-card"
-    :class="{ 's-clickable': clickable }"
+    :class="computedClasses"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-import { CardShadow } from './consts'
+import { CardShadow, BorderRadius } from './consts'
 
 @Component
 export default class SCard extends Vue {
@@ -39,8 +39,33 @@ export default class SCard extends Vue {
    *
    * `false` by default
    */
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
+  get computedBorderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    if (this.clickable) {
+      cssClasses.push('s-clickable')
+    }
+    return cssClasses
+  }
+
   handleClick (): void {
     if (!this.clickable) {
       return
diff --git a/src/components/Card/consts.ts b/src/components/Card/consts.ts
index 30f195b8..478bba6c 100644
--- a/src/components/Card/consts.ts
+++ b/src/components/Card/consts.ts
@@ -1,5 +1,9 @@
+import { SizeExtended } from '../../types'
+
 export enum CardShadow {
   ALWAYS = 'always',
   HOVER = 'hover',
   NEVER = 'never'
 }
+
+export const BorderRadius = SizeExtended
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index 270ec29a..c8040734 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,4 +1,4 @@
 import SCard from './SCard.vue'
-import { CardShadow } from './consts'
+import { CardShadow, BorderRadius } from './consts'
 
-export { SCard, CardShadow }
+export { SCard, CardShadow, BorderRadius }
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index 77303fcb..a83d197b 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -99,7 +99,7 @@ export default class STabs extends Vue {
     return this.type !== TabsType.ROUNDED ? this.type : ''
   }
 
-  get computedBrderRadius (): string {
+  get computedBorderRadius (): string {
     if (this.borderRadius === BorderRadius.SMALL ||
       !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
       return ''
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 5146bc9b..55be060e 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCard, SRow, SDropdown, SDropdownItem } from '../components'
-import { CardShadow } from '../components/Card'
+import { CardShadow, BorderRadius } from '../components/Card'
 
 export default {
   component: SCard,
@@ -12,7 +12,7 @@ export default {
 export const configurable = () => ({
   components: { SCard, SRow, SDropdown, SDropdownItem },
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
-               <s-card style="width: 80%;" :shadow="shadow" :clickable="clickable" @click="handleClick">
+               <s-card style="width: 80%;" :shadow="shadow" :borderRadius="borderRadius" :clickable="clickable" @click="handleClick">
                  <template slot="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
@@ -38,6 +38,9 @@ export const configurable = () => ({
     header: {
       default: text('Header', 'Card header')
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     clickable: {
       default: boolean('Clickable', false)
     }
diff --git a/src/styles/card.scss b/src/styles/card.scss
index 9619569f..8a27928e 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -2,7 +2,6 @@
 
 .s-card {
   color: var(--s-color-base-content-primary);
-  border-radius: 8px;
   border-color: var(--s-color-base-border-primary);
   &.s-clickable {
     cursor: pointer;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 5909f007..c7b0ae39 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -71,6 +71,22 @@ h6 {
   height: $s-size-small;
 }
 
+.s-border-radius-big {
+  border-radius: var(--s-border-radius-big);
+}
+
+.s-border-radius-medium {
+  border-radius: var(--s-border-radius-medium);
+}
+
+.s-border-radius-small {
+  border-radius: var(--s-border-radius-small);
+}
+
+.s-border-radius-mini {
+  border-radius: var(--s-border-radius-mini);
+}
+
 button > span {
   position: relative;
 }
@@ -115,7 +131,7 @@ button > span {
     button.el-button.el-button--default.el-button--small {
       height: $s-size-medium;
       font-size: 14px;
-      border-radius: 4px;
+      border-radius: var(--s-border-radius-mini);;
       &:hover, &:active, &:focus {
         color: var(--s-color-theme-accent);
         background-color: var(--s-color-base-on-accent);

From 1e0194ac93acabe74307b0461d3baee3e98982e2 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 10 Nov 2020 00:24:07 +0300
Subject: [PATCH 03/22] Updated Dialog component and story.

---
 src/components/Dialog/SDialog.vue | 28 +++++++++++++++++++++++++++-
 src/components/Dialog/consts.ts   |  3 +++
 src/components/Dialog/index.ts    |  3 ++-
 src/stories/SDialog.stories.ts    |  7 ++++++-
 src/styles/dialog.scss            | 23 ++++++++++++++++++++++-
 5 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Dialog/consts.ts

diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index d2f1238e..9c7d9073 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -11,7 +11,7 @@
     :modal-append-to-body="modalAppendToBody"
     :append-to-body="appendToBody"
     :lock-scroll="lockScroll"
-    :custom-class="customClass"
+    :class="computedClasses"
     :close-on-click-modal="closeOnClickModal"
     :close-on-press-escape="closeOnEsc"
     :before-close="beforeClose"
@@ -30,6 +30,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { BorderRadius } from './consts'
 
 @Component
 export default class SDialog extends Vue {
@@ -90,6 +91,12 @@ export default class SDialog extends Vue {
    * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly lockScroll!: boolean
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Custom CSS class for the dialog component
    */
@@ -148,6 +155,25 @@ export default class SDialog extends Vue {
     this.$emit('update:visible', value)
   }
 
+  get computedBorderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    if (this.customClass) {
+      cssClasses.push(this.customClass)
+    }
+    return cssClasses
+  }
+
   mounted (): void {
     this.$nextTick(() => {
       const wrapper = (this.dialog || {}).$el as HTMLElement
diff --git a/src/components/Dialog/consts.ts b/src/components/Dialog/consts.ts
new file mode 100644
index 00000000..8f95c825
--- /dev/null
+++ b/src/components/Dialog/consts.ts
@@ -0,0 +1,3 @@
+import { SizeExtended } from '../../types'
+
+export const BorderRadius = SizeExtended
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
index 452d701a..b524176a 100644
--- a/src/components/Dialog/index.ts
+++ b/src/components/Dialog/index.ts
@@ -1,3 +1,4 @@
 import SDialog from './SDialog.vue'
+import { BorderRadius } from './consts'
 
-export { SDialog }
+export { SDialog, BorderRadius }
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index 9de70626..2dbfd8d0 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -1,6 +1,7 @@
-import { text, withKnobs, boolean } from '@storybook/addon-knobs'
+import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
 import { SDialog, SRow, SButton } from '../components'
+import { BorderRadius } from '../components/Dialog'
 
 export default {
   component: SDialog,
@@ -22,6 +23,7 @@ export const configurable = () => ({
                  :width="width"
                  :fullscreen="fullscreen"
                  :top="top"
+                 :borderRadius="borderRadius"
                  :show-close="showClose"
                  :close-on-click-modal="closeOnClickModal"
                  :close-on-esc="closeOnEsc"
@@ -51,6 +53,9 @@ export const configurable = () => ({
     fullscreen: {
       default: boolean('fullscreen', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     showClose: {
       default: boolean('Show close', true)
     },
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index d469b2ed..aeaebb6c 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -1,7 +1,28 @@
 @import "./variables";
 
 .el-dialog {
-  border-radius: 8px;
+  &__wrapper {
+    &.s-border-radius {
+      &-big,
+      &-medium,
+      &-small,
+      &-mini {
+        border-radius: 0;
+      }
+    }
+  }
+  .s-border-radius-big & {
+    border-radius: var(--s-border-radius-big);
+  }
+  .s-border-radius-medium & {
+    border-radius: var(--s-border-radius-medium);
+  }
+  .s-border-radius-small & {
+    border-radius: var(--s-border-radius-small);
+  }
+  .s-border-radius-mini & {
+    border-radius: var(--s-border-radius-mini);
+  }
   .el-dialog__title {
     font-weight: bold;
     font-size: 16px;

From 0d9621babd8dc7440dfd7445fbf780d1479a6c38 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 10 Nov 2020 13:05:28 +0300
Subject: [PATCH 04/22] Updated Pagination component and story.

---
 src/components/Card/SCard.vue             | 10 ++---
 src/components/Pagination/SPagination.vue | 24 +++++++++++
 src/components/Pagination/consts.ts       |  3 ++
 src/components/Pagination/index.ts        |  3 +-
 src/stories/SPagination.stories.ts        |  7 +++-
 src/styles/pagination.scss                | 51 +++++++++++++++++++----
 6 files changed, 82 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Pagination/consts.ts

diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 188e2d2a..e83846ab 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -34,17 +34,17 @@ export default class SCard extends Vue {
    * By default, it's set to `"hover"`
    */
   @Prop({ default: CardShadow.HOVER, type: String }) readonly shadow!: string
-  /**
-   * Clickable property of the Card component which means that the user can click on the card
-   *
-   * `false` by default
-   */
   /**
    * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
    *
    * By default it's set to `"small"`
    */
   @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
+  /**
+   * Clickable property of the Card component which means that the user can click on the card
+   *
+   * `false` by default
+   */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
   get computedBorderRadius (): string {
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 03f23c54..5b7a181b 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -7,6 +7,7 @@
     :total="total"
     :small="small"
     :background="background"
+    :class="computedClasses"
     :current-page.sync="currentPageModel"
     :popper-class="popperClass"
     :prev-text="prevText"
@@ -26,6 +27,7 @@
 import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
 import { ElPagination } from 'element-ui/types/pagination'
 import cloneDeep from 'lodash/fp/cloneDeep'
+import { BorderRadius } from './consts'
 
 @Component
 export default class SPagination extends Vue {
@@ -41,6 +43,12 @@ export default class SPagination extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly background!: boolean
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Items count of each page. It supports the .sync modifier.
    *
@@ -167,6 +175,22 @@ export default class SPagination extends Vue {
     return this.layout.includes('slot')
   }
 
+  get computedBorderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   mounted (): void {
     this.initPaginationItems()
     this.renderPaginationItems()
diff --git a/src/components/Pagination/consts.ts b/src/components/Pagination/consts.ts
new file mode 100644
index 00000000..8f95c825
--- /dev/null
+++ b/src/components/Pagination/consts.ts
@@ -0,0 +1,3 @@
+import { SizeExtended } from '../../types'
+
+export const BorderRadius = SizeExtended
diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts
index ae6a4363..36408f72 100644
--- a/src/components/Pagination/index.ts
+++ b/src/components/Pagination/index.ts
@@ -1,3 +1,4 @@
 import SPagination from './SPagination.vue'
+import { BorderRadius } from './consts'
 
-export { SPagination }
+export { SPagination, BorderRadius }
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index 85acfe7c..7a181187 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -1,6 +1,7 @@
-import { withKnobs, number, text, boolean } from '@storybook/addon-knobs'
+import { withKnobs, number, text, boolean, select } from '@storybook/addon-knobs'
 
 import { SPagination, SRow } from '../components'
+import { BorderRadius } from '../components/Pagination'
 
 export default {
   component: SPagination,
@@ -17,6 +18,7 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :small="small"
                  :background="background"
+                 :borderRadius="borderRadius"
                  :prev-text="prevText"
                  :next-text="nextText"
                  @size-change="handleSizeChange"
@@ -42,6 +44,9 @@ export const configurable = () => ({
     background: {
       default: boolean('Background', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     prevText: {
       default: text('Prev text', '')
     },
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index 5f7805c1..12a3ffcf 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -1,5 +1,28 @@
 @import "./variables";
 
+@mixin pagination-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-pagination__sizes {
+        .el-select .el-input {
+          .el-input__inner {
+            border-radius: $border-radius;
+          }
+        }
+      }
+      .el-pagination__editor.el-input {
+        .el-input__inner {
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
 .el-pagination {
   &.is-background .el-pager li:not(.disabled) {
     &.active {
@@ -10,7 +33,8 @@
       color: var(--s-color-theme-accent);
     }
   }
-  .btn-prev, .btn-next {
+  .btn-prev,
+  .btn-next {
     color: var(--s-color-base-content-primary);
   }
   button {
@@ -21,10 +45,15 @@
       color: var(--s-color-base-content-quaternary);
     }
   }
+  @include pagination-border-radius;
+  @include pagination-border-radius("medium", var(--s-border-radius-medium));
+  @include pagination-border-radius("small", var(--s-border-radius-small));
+  @include pagination-border-radius("mini", var(--s-border-radius-mini));
   .el-pagination__sizes {
     .el-select .el-input {
       width: 65px;
-      .el-select__caret, .el-input__inner {
+      .el-select__caret,
+      .el-input__inner {
         color: var(--s-color-base-content-primary);
         font-weight: bold;
       }
@@ -32,14 +61,14 @@
         margin-right: 6px;
       }
       .el-input__inner {
-        border-radius: 8px;
         padding-right: 20px;
         padding-left: 5px;
         background-color: var(--s-color-base-background);
         border-color: var(--s-color-base-background);
       }
       &.is-disabled {
-        .el-select__caret, .el-input__inner {
+        .el-select__caret,
+        .el-input__inner {
           color: var(--s-color-base-content-quaternary);
         }
       }
@@ -47,7 +76,6 @@
   }
   .el-pagination__editor.el-input {
     .el-input__inner {
-      border-radius: 8px;
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
       color: var(--s-color-base-content-primary);
@@ -56,17 +84,21 @@
       color: var(--s-color-base-content-quaternary);
     }
   }
-  .el-pagination__total, .per-page-text, .el-pagination__jump {
+  .el-pagination__total,
+  .per-page-text,
+  .el-pagination__jump {
     color: var(--s-color-base-content-tertiary);
     font-weight: normal;
   }
   .el-pager li {
     color: var(--s-color-base-content-primary);
-    &.btn-quicknext, &.btn-quickprev {
+    &.btn-quicknext,
+    &.btn-quickprev {
       color: var(--s-color-base-content-primary);
     }
     &:not(.disabled) {
-      &:hover, &.active {
+      &:hover,
+      &.active {
         color: var(--s-color-theme-accent);
       }
     }
@@ -81,7 +113,8 @@
         color: var(--s-color-base-content-quaternary);
       }
     }
-    .btn-prev, .btn-next {
+    .btn-prev,
+    .btn-next {
       background-color: var(--s-color-base-background);
       &:disabled {
         color: var(--s-color-base-content-quaternary);

From b189e042e4ee5340ee14b19860ec2d18128a0ad1 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 10 Nov 2020 16:26:06 +0300
Subject: [PATCH 05/22] Updated Checkbox component and story.

---
 src/components/Checkbox/SCheckbox.vue | 19 ++++++++++++++-
 src/components/Checkbox/consts.ts     |  3 ++-
 src/components/Checkbox/index.ts      |  4 ++--
 src/stories/SCheckbox.stories.ts      | 29 ++++++++++++++++++++++-
 src/styles/checkbox.scss              | 33 +++++++++++++++++++++++----
 5 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index c2759c5c..f91a3c08 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
-import { CheckboxSize } from './consts'
+import { CheckboxSize, BorderRadius } from './consts'
 
 @Component
 export default class SCheckbox extends Vue {
@@ -42,6 +42,12 @@ export default class SCheckbox extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly border!: boolean
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"mini"`
+   */
+  @Prop({ default: BorderRadius.MINI, type: String }) readonly borderRadius!: string
   /**
    * Checked state of the checkbox item.
    *
@@ -85,11 +91,22 @@ export default class SCheckbox extends Vue {
     return this.size
   }
 
+  get computedBorderRadius (): string {
+    if (this.borderRadius === BorderRadius.MINI ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
       cssClasses.push(`s-${this.size}`)
     }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     return cssClasses
   }
 
diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts
index f7d55fd0..2e35b751 100644
--- a/src/components/Checkbox/consts.ts
+++ b/src/components/Checkbox/consts.ts
@@ -1,3 +1,4 @@
-import { Size } from '../../types'
+import { Size, SizeExtended } from '../../types'
 
 export const CheckboxSize = Size
+export const BorderRadius = SizeExtended
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 5f2acf9d..e0240ab7 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,4 +1,4 @@
 import SCheckbox from './SCheckbox.vue'
-import { CheckboxSize } from './consts'
+import { CheckboxSize, BorderRadius } from './consts'
 
-export { SCheckbox, CheckboxSize }
+export { SCheckbox, CheckboxSize, BorderRadius }
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 517f77c1..461d84cb 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCheckbox, SRow, SCol } from '../components'
-import { CheckboxSize } from '../components/Checkbox'
+import { CheckboxSize, BorderRadius } from '../components/Checkbox'
 
 export default {
   component: SCheckbox,
@@ -17,6 +17,7 @@ export const configurable = () => ({
                  v-model="vModelValue"
                  :disabled="disabled"
                  :border="border"
+                 :borderRadius="borderRadius"
                  :size="size"
                  :label="label"
                  @change="(value) => changeValue = value"
@@ -37,6 +38,9 @@ export const configurable = () => ({
     border: {
       default: boolean('Border', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
+    },
     label: {
       default: text('Label', 'Checkbox')
     },
@@ -87,4 +91,27 @@ export const differentSize = () => ({
   data: () => ({
     items: differentSizeData
   })
+}
+)
+export const differentBorderRadiusData = Object.values(BorderRadius).map(borderRadius =>
+  ({ borderRadius, label: borderRadius[0].toUpperCase() + borderRadius.slice(1) }))
+export const differentBorderRadius = () => ({
+  components: { SCheckbox, SRow, SCol },
+  template: `<s-row :gutter="20" style="flex: 1;">
+               <template v-for="item in items">
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox :borderRadius="item.borderRadius" :value="false">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox border :borderRadius="item.borderRadius" :value="true">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+               </template>
+             </s-row>`,
+  data: () => ({
+    items: differentBorderRadiusData
+  })
 })
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index bb9e8af2..b9aa4a4e 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -1,10 +1,33 @@
 @import "./variables";
 @import "./common";
 
+@mixin checkbox-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      &.is-bordered {
+        border-radius: $border-radius;
+      }
+      .el-checkbox__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .el-checkbox {
   color: var(--s-color-base-content-primary);
+  @include checkbox-border-radius;
+  @include checkbox-border-radius("medium", var(--s-border-radius-medium));
+  @include checkbox-border-radius("small", var(--s-border-radius-small));
+  @include checkbox-border-radius("mini", var(--s-border-radius-mini));
   &.is-bordered {
-    &, &.is-disabled, &.is-disabled.is-checked {
+    &,
+    &.is-disabled,
+    &.is-disabled.is-checked {
       border-color: var(--s-color-base-border-primary);
     }
     &.is-checked {
@@ -20,7 +43,8 @@
   }
   &.s-medium {
     @extend .s-medium;
-    &, &.is-bordered {
+    &,
+    &.is-bordered {
       padding: 9px 15px 7px 10px;
       .el-checkbox__inner {
         height: 16px;
@@ -39,11 +63,11 @@
   }
   &.s-small {
     @extend .s-small;
-    border-radius: 4px;
     .el-checkbox__label {
       font-size: 12px;
     }
-    &, &.is-bordered {
+    &,
+    &.is-bordered {
       padding: 5px 15px 5px 10px;
       .el-checkbox__inner {
         height: 14px;
@@ -63,7 +87,6 @@
 }
 .el-checkbox__inner {
   border-color: var(--s-color-base-border-primary);
-  border-radius: 4px;
   width: 20px;
   height: 20px;
   &::after {

From 2f8e09b13e3ac986bfdf1ea6f97b28364c967891 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 10 Nov 2020 21:16:30 +0300
Subject: [PATCH 06/22] Pagination component and story: fixed dropdown border
 radius.

---
 src/components/Pagination/SPagination.vue | 13 ++++++++++++-
 src/stories/SPagination.stories.ts        |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 5b7a181b..e8108d55 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -9,7 +9,7 @@
     :background="background"
     :class="computedClasses"
     :current-page.sync="currentPageModel"
-    :popper-class="popperClass"
+    :popper-class="computedPopperClass"
     :prev-text="prevText"
     :next-text="nextText"
     :disabled="disabled"
@@ -183,6 +183,17 @@ export default class SPagination extends Vue {
     return this.borderRadius
   }
 
+  get computedPopperClass (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index 7a181187..0610e909 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -19,6 +19,7 @@ export const configurable = () => ({
                  :small="small"
                  :background="background"
                  :borderRadius="borderRadius"
+                 :popperClass="borderRadius"
                  :prev-text="prevText"
                  :next-text="nextText"
                  @size-change="handleSizeChange"

From 17eb5fbd36057d38b269a3860c3f2f47c8625cca Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 02:03:18 +0300
Subject: [PATCH 07/22] Updated Input component and story.

---
 src/components/Input/SInput.vue | 19 ++++++++++++++++++-
 src/components/Input/consts.ts  |  4 ++++
 src/components/Input/index.ts   |  4 ++--
 src/stories/SInput.stories.ts   |  6 +++++-
 src/styles/input.scss           |  4 +++-
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 4aa83ac4..3dd87e08 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -42,7 +42,7 @@ import { Vue, Component, Prop, Ref, Inject, Watch } from 'vue-property-decorator
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
-import { Autocomplete, InputSize, InputType } from './consts'
+import { Autocomplete, InputSize, InputType, BorderRadius } from './consts'
 
 @Component
 export default class SInput extends Vue {
@@ -65,6 +65,12 @@ export default class SInput extends Vue {
    * Disable state
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"mini"`
+   */
+  @Prop({ default: BorderRadius.MINI, type: String }) readonly borderRadius!: string
   /**
    * Show password flag. `false` by default
    */
@@ -173,6 +179,14 @@ export default class SInput extends Vue {
     return this.type === InputType.TEXT && this.size === InputSize.MEDIUM
   }
 
+  get computedBorderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.focused) {
@@ -181,6 +195,9 @@ export default class SInput extends Vue {
     if (this.disabled || (this.elForm || {}).disabled) {
       cssClasses.push('s-disabled')
     }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.type === InputType.TEXT_FILE) {
       cssClasses.push('s-text-file')
     }
diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts
index bb48a246..879f76ad 100644
--- a/src/components/Input/consts.ts
+++ b/src/components/Input/consts.ts
@@ -1,3 +1,5 @@
+import { SizeExtended } from '../../types'
+
 export enum Autocomplete {
   OFF = 'off',
   ON = 'on'
@@ -34,3 +36,5 @@ export enum InputSize {
   MEDIUM = 'medium',
   BIG = 'big'
 }
+
+export const BorderRadius = SizeExtended
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index e1b9b29e..e3cac624 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1,5 +1,5 @@
 import SInput from './SInput.vue'
 import SJsonInput from './SJsonInput.vue'
-import { Autocomplete, InputType, InputSize } from './consts'
+import { Autocomplete, InputType, InputSize, BorderRadius } from './consts'
 
-export { SInput, SJsonInput, Autocomplete, InputType, InputSize }
+export { SInput, SJsonInput, Autocomplete, InputType, InputSize, BorderRadius }
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 182d55e8..06f1d748 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -1,7 +1,7 @@
 import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
 
 import { SInput, SRow, SCol } from '../components'
-import { InputType, InputSize } from '../components/Input'
+import { InputType, InputSize, BorderRadius } from '../components/Input'
 
 export default {
   component: SInput,
@@ -17,6 +17,7 @@ export const configurable = () => ({
                :type="type"
                :placeholder="placeholder"
                :disabled="disabled"
+               :borderRadius="borderRadius"
                :show-password="showPassword"
                :readonly="readonly"
                :show-text-limit="showTextLimit"
@@ -47,6 +48,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
+    },
     showPassword: {
       default: boolean('Show password', false)
     },
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 2e748fa6..14a80344 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -17,7 +17,7 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
+    border-top-left-radius: inherit;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -26,11 +26,13 @@
   }
   .el-input,
   .el-textarea {
+    border-radius: inherit;
     height: 100%;
     > input,
     > textarea {
       height: $s-size-big;
       border: 1px solid var(--s-color-base-background);
+      border-radius: inherit;
       background-color: var(--s-color-base-background);
       &::placeholder {
         color: var(--s-color-base-content-tertiary);

From 54839ac5ec14721afccab627f85bbc013a091d29 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 02:37:06 +0300
Subject: [PATCH 08/22] Updated Select component and story.

---
 src/components/Select/SSelect.vue     | 35 ++++++++++++++++++++++++++-
 src/components/Select/consts.ts       |  4 +++
 src/components/Select/index.ts        |  4 +--
 src/stories/Select/SSelect.stories.ts |  9 +++++--
 src/styles/select.scss                | 30 +++++++++++++++++++----
 5 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 2a4e988f..84aeacb9 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -12,6 +12,7 @@
       :clearable="clearable"
       :multiple-limit="multipleLimit"
       :no-data-text="noDataText"
+      :popper-class="computedPopperClass"
       @blur="handleBlur"
       @focus="handleFocus"
       @visible-change="handleVisibleChange"
@@ -27,7 +28,7 @@
 import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
 
 import { Autocomplete } from '../Input'
-import { InputTypes } from './consts'
+import { InputTypes, BorderRadius } from './consts'
 
 @Component
 export default class SSelect extends Vue {
@@ -64,6 +65,10 @@ export default class SSelect extends Vue {
    * `"No data"` is set by default
    */
   @Prop({ type: String, default: 'No data' }) readonly noDataText!: string
+  /**
+   * Custom class name for the page size Select's dropdown
+   */
+  @Prop({ default: '', type: String }) readonly popperClass!: string
   /**
    * Name attribute for input
    */
@@ -78,6 +83,12 @@ export default class SSelect extends Vue {
    * `false` by default
    */
   @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Loading state of the select component.
    *
@@ -137,11 +148,33 @@ export default class SSelect extends Vue {
     this.$nextTick(this.updateInputValue)
   }
 
+  get computedBorderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
+  get computedPopperClass (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
diff --git a/src/components/Select/consts.ts b/src/components/Select/consts.ts
index 0484a8e2..384d86fb 100644
--- a/src/components/Select/consts.ts
+++ b/src/components/Select/consts.ts
@@ -1,4 +1,8 @@
+import { SizeExtended } from '../../types'
+
 export enum InputTypes {
   INPUT = 'input',
   SELECT = 'select'
 }
+
+export const BorderRadius = SizeExtended
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index fa6ba46e..cb681c23 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,6 +1,6 @@
 import SSelect from './SSelect.vue'
 import SOption from './SOption.vue'
 import SOptionGroup from './SOptionGroup.vue'
-import { InputTypes } from './consts'
+import { InputTypes, BorderRadius } from './consts'
 
-export { SSelect, SOption, SOptionGroup, InputTypes }
+export { SSelect, SOption, SOptionGroup, InputTypes, BorderRadius }
diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
index 94955808..a69cd00e 100644
--- a/src/stories/Select/SSelect.stories.ts
+++ b/src/stories/Select/SSelect.stories.ts
@@ -1,7 +1,7 @@
-import { text, withKnobs, boolean, number } from '@storybook/addon-knobs'
+import { text, withKnobs, boolean, number, select } from '@storybook/addon-knobs'
 
 import { SSelect, SRow, SCol, SOption } from '../../components'
-import { InputTypes } from '../../components/Select'
+import { InputTypes, BorderRadius } from '../../components/Select'
 
 export default {
   component: SSelect,
@@ -25,6 +25,7 @@ export const configurable = () => ({
                  <s-select
                    v-model="model"
                    :disabled="disabled"
+                   :borderRadius="borderRadius"
                    :loading="loading"
                    :multiple="multiple"
                    :input-type="item.inputType"
@@ -34,6 +35,7 @@ export const configurable = () => ({
                    :multiple-text-prefix="multipleTextPrefix"
                    :loading-text="loadingText"
                    :no-data-text="noDataText"
+                   :popperClass="borderRadius"
                    @change="handleChange"
                  >
                    <s-option
@@ -54,6 +56,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     loading: {
       default: boolean('Loading', false)
     },
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 7af02217..b59bdd53 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -1,10 +1,31 @@
 @import "./variables";
 @import "./icons";
 
+@mixin select-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      .el-input__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-select {
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
+  @include select-border-radius;
+  @include select-border-radius("medium", var(--s-border-radius-medium));
+  @include select-border-radius("small", var(--s-border-radius-small));
+  @include select-border-radius("mini", var(--s-border-radius-mini));
   .el-select {
     width: 100%;
     i.el-icon-arrow-up {
@@ -76,7 +97,8 @@
         .el-select__caret {
           color: var(--s-color-base-content-quaternary);
         }
-        .el-input__inner, .el-input__inner:hover {
+        .el-input__inner,
+        .el-input__inner:hover {
           border-color: var(--s-color-base-disabled);
           color: var(--s-color-base-content-quaternary);
           background-color: var(--s-color-base-disabled);
@@ -100,7 +122,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -110,7 +131,6 @@
   &.s-select-type {
     .el-select {
       .el-input__inner {
-        border-radius: 8px;
         padding-left: 12px;
         font-weight: bold;
         &:hover {
@@ -192,7 +212,7 @@
     font-size: 16px;
     font-weight: bold;
     padding: 1px;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius-mini);
   }
   &.selected {
     font-weight: normal;
@@ -208,7 +228,7 @@
       border-color: var(--s-color-theme-accent);
     }
     &::after {
-      content: '';
+      content: "";
     }
   }
 }

From f1b8c9bd7709c025872db07d0275ee63bb0a4d45 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 02:56:28 +0300
Subject: [PATCH 09/22] Updated Date Picker component and story.

---
 src/components/DatePicker/SDatePicker.vue | 36 ++++++++--
 src/components/DatePicker/consts.ts       |  3 +-
 src/components/DatePicker/index.ts        |  5 +-
 src/stories/SDatePicker.stories.ts        |  9 ++-
 src/styles/datepicker.scss                | 81 +++++++++++++++++------
 src/styles/table.scss                     |  2 +-
 6 files changed, 105 insertions(+), 31 deletions(-)

diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 29862d5a..75f82afc 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="s-date-picker" :class="computedClasses">
+  <div :class="computedClasses">
     <span v-if="willPlaceholderBeShown" class="s-placeholder">{{ placeholder }}</span>
     <el-date-picker
       ref="picker"
@@ -15,7 +15,7 @@
       :end-placeholder="endPlaceholder"
       :format="format"
       :align="align"
-      :popper-class="popperClass"
+      :popper-class="computedPopperClass"
       :picker-options="pickerOptions"
       :range-separator="rangeSeparator"
       :default-value="defaultValue"
@@ -37,7 +37,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
 
-import { PickerTypes, PickerSize, PickerAlignment, InputTypes } from './consts'
+import { PickerTypes, PickerSize, PickerAlignment, InputTypes, BorderRadius } from './consts'
 
 @Component
 export default class SDatePicker extends Vue {
@@ -121,6 +121,12 @@ export default class SDatePicker extends Vue {
    * `"left"` is set by default
    */
   @Prop({ type: String, default: PickerAlignment.LEFT }) readonly align!: string
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Custom class name for date picker's dropdown
    */
@@ -209,11 +215,33 @@ export default class SDatePicker extends Vue {
     return !!(this.model && this.placeholder)
   }
 
-  get computedClasses (): Array<string> {
+  get computedBorderRadius (): string {
+    if (this.borderRadius === BorderRadius.SMALL ||
+      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      return ''
+    }
+    return this.borderRadius
+  }
+
+  get computedPopperClass (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = ['s-date-picker']
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
diff --git a/src/components/DatePicker/consts.ts b/src/components/DatePicker/consts.ts
index b28af7a3..64d2e2c6 100644
--- a/src/components/DatePicker/consts.ts
+++ b/src/components/DatePicker/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types'
+import { Size, SizeExtended } from '../../types'
 
 export enum PickerTypes {
   YEAR = 'year',
@@ -24,3 +24,4 @@ export enum InputTypes {
 }
 
 export const PickerSize = Size
+export const BorderRadius = SizeExtended
diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts
index e100a2dc..95d6b304 100644
--- a/src/components/DatePicker/index.ts
+++ b/src/components/DatePicker/index.ts
@@ -1,10 +1,11 @@
 import SDatePicker from './SDatePicker.vue'
-import { PickerTypes, PickerAlignment, InputTypes, PickerSize } from './consts'
+import { PickerTypes, PickerAlignment, InputTypes, PickerSize, BorderRadius } from './consts'
 
 export {
   SDatePicker,
   PickerTypes,
   PickerAlignment,
   InputTypes,
-  PickerSize
+  PickerSize,
+  BorderRadius
 }
diff --git a/src/stories/SDatePicker.stories.ts b/src/stories/SDatePicker.stories.ts
index 428593f3..bc0b3a9d 100644
--- a/src/stories/SDatePicker.stories.ts
+++ b/src/stories/SDatePicker.stories.ts
@@ -1,7 +1,7 @@
-import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SDatePicker, SRow, SCol } from '../components'
-import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePicker'
+import { PickerAlignment, PickerTypes, InputTypes, BorderRadius } from '../components/DatePicker'
 
 export default {
   component: SDatePicker,
@@ -21,6 +21,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :clearable="clearable"
                  :align="align"
+                 :borderRadius="borderRadius"
+                 :popperClass="borderRadius"
                  :input-type="inputType"
                  placeholder="Select date"
                  start-placeholder="From"
@@ -60,6 +62,9 @@ export const configurable = () => ({
     },
     align: {
       default: select('Align', Object.values(PickerAlignment), PickerAlignment.LEFT)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
     }
   },
   methods: {
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index 76705c12..b3c06c5d 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -1,18 +1,37 @@
 @import "./variables";
 
+@mixin date-picker-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      & .el-input__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-date-picker {
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
   .el-date-editor {
     width: 100%;
-    &.el-input, &.el-input__inner {
+    &.el-input,
+    &.el-input__inner {
       width: 100%;
     }
     .el-range-separator {
       color: var(--s-color-base-content-tertiary);
     }
-    .el-input__inner, .el-range-input {
+    .el-input__inner,
+    .el-range-input {
       &::placeholder {
         color: var(--s-color-base-content-tertiary);
         opacity: 1; // Firefox
@@ -22,6 +41,10 @@
       border-color: var(--s-color-base-border-primary);
     }
   }
+  @include date-picker-border-radius;
+  @include date-picker-border-radius("medium", var(--s-border-radius-medium));
+  @include date-picker-border-radius("small", var(--s-border-radius-small));
+  @include date-picker-border-radius("mini", var(--s-border-radius-mini));
   &.s-has-value {
     .el-date-editor .el-range-separator {
       color: var(--s-color-base-content-primary);
@@ -42,7 +65,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-background-hover);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         background-color: var(--s-color-base-background-hover);
       }
     }
@@ -58,7 +82,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-border-primary);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         background-color: var(--s-color-utility-surface);
       }
     }
@@ -66,7 +91,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-disabled);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         color: var(--s-color-base-content-quaternary);
         background-color: var(--s-color-base-disabled);
       }
@@ -81,7 +107,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -90,16 +115,19 @@
   }
   &.s-select-type {
     .el-date-editor {
-      .el-input__inner, .el-range-input, .el-range-separator {
+      .el-input__inner,
+      .el-range-input,
+      .el-range-separator {
         font-weight: bold;
       }
-      &.el-input__inner, & .el-input__inner {
-        border-radius: 8px;
+      &.el-input__inner,
+      & .el-input__inner {
         padding-left: 12px;
         &:hover {
           border-color: var(--s-color-base-border-primary);
         }
-        &::placeholder, .el-range-input::placeholder {
+        &::placeholder,
+        .el-range-input::placeholder {
           color: var(--s-color-base-content-tertiary);
           font-weight: bold;
         }
@@ -111,7 +139,7 @@
       top: 30%;
       pointer-events: none;
       color: var(--s-color-base-content-tertiary);
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
     &.s-focused {
       .el-date-editor.el-input__inner,
@@ -180,13 +208,18 @@
   .el-picker-panel__content {
     .el-date-table {
       td {
-        &.available:hover, &.today span {
+        &.available:hover,
+        &.today span {
           color: var(--s-color-theme-accent);
         }
-        &.next-month, &.prev-month {
+        &.next-month,
+        &.prev-month {
           color: var(--s-color-base-content-quaternary);
         }
-        &.current:not(.disabled), &.selected, &.start-date, &.end-date {
+        &.current:not(.disabled),
+        &.selected,
+        &.start-date,
+        &.end-date {
           span {
             background-color: var(--s-color-theme-accent);
             color: var(--s-color-utility-surface);
@@ -198,7 +231,8 @@
       }
     }
     .el-month-table td {
-      &.start-date, &.end-date {
+      &.start-date,
+      &.end-date {
         .cell {
           background-color: var(--s-color-theme-accent);
           color: var(--s-color-utility-surface);
@@ -208,14 +242,18 @@
   }
   .el-picker-panel__footer {
     border-top-color: var(--s-color-base-background-hover);
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
     > .el-button {
       height: 32px;
-      border-radius: 4px;
-      &:hover, &:focus {
+      border-radius: var(--s-border-radius-mini);
+      &:hover,
+      &:focus {
         color: var(--s-color-theme-accent);
       }
       &.is-plain {
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           border-color: var(--s-color-theme-accent);
         }
       }
@@ -226,7 +264,6 @@
   }
 }
 .el-time-panel {
-  border-radius: 4px;
   border-color: var(--s-color-base-background-hover);
   .el-time-panel__footer {
     border-top-color: var(--s-color-base-background-hover);
@@ -243,14 +280,16 @@
     }
   }
   .el-time-panel__content {
-    &::after, &::before {
+    &::after,
+    &::before {
       border-top-color: var(--s-color-base-background-hover);
       border-bottom-color: var(--s-color-base-background-hover);
     }
   }
 }
 .el-date-table.is-week-mode .el-date-table__row {
-  &.current, &:hover {
+  &.current,
+  &:hover {
     div {
       background-color: var(--s-color-base-background-hover);
     }
diff --git a/src/styles/table.scss b/src/styles/table.scss
index f4a3319c..74f9af7f 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -62,7 +62,7 @@
   .el-checkbox__inner {
     height: 20px;
     width: 20px;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius-mini);
     &::after {
       border-width: 2px;
       height: 10px;

From 4033793b4050c9f4436bf064cb60ca3e7b524b02 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 03:22:51 +0300
Subject: [PATCH 10/22] Updated Menu component and story.

---
 src/components/Menu/SMenu.vue     | 18 ++++++++++++++++--
 src/components/Menu/consts.ts     |  4 ++++
 src/components/Menu/index.ts      |  4 ++--
 src/stories/Menu/SMenu.stories.ts | 20 ++++++++++++++++++++
 src/styles/menu.scss              | 25 +++++++++++++++++++++----
 5 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue
index 41169236..5ae0727a 100644
--- a/src/components/Menu/SMenu.vue
+++ b/src/components/Menu/SMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <el-menu
-    class="s-menu"
     ref="el-menu"
+    :class="computedClasses"
     :style="computedStyles"
     :mode="mode"
     :collapse="collapse"
@@ -27,7 +27,7 @@
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import { ElMenu } from 'element-ui/types/menu'
 
-import { MenuMode, MenuTrigger } from './consts'
+import { MenuMode, MenuTrigger, BorderRadius } from './consts'
 
 @Component
 export default class SMenu extends Vue {
@@ -53,6 +53,12 @@ export default class SMenu extends Vue {
    * Menu shadow if it exists
    */
   @Prop({ default: 'none', type: String }) readonly boxShadow!: string
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Text color of menu in hex format.
    *
@@ -107,6 +113,14 @@ export default class SMenu extends Vue {
 
   @Ref('el-menu') elMenu!: ElMenu
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = ['s-menu']
+    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedStyles (): object {
     const styles = {} as any
     if (this.boxShadow) {
diff --git a/src/components/Menu/consts.ts b/src/components/Menu/consts.ts
index 88c08daa..91edf7e2 100644
--- a/src/components/Menu/consts.ts
+++ b/src/components/Menu/consts.ts
@@ -1,3 +1,5 @@
+import { SizeExtended } from '../../types'
+
 export enum MenuMode {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'
@@ -7,3 +9,5 @@ export enum MenuTrigger {
   HOVER = 'hover',
   CLICK = 'click'
 }
+
+export const BorderRadius = SizeExtended
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index d352b296..3671ae5f 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -2,6 +2,6 @@ import SMenu from './SMenu.vue'
 import SMenuItem from './SMenuItem.vue'
 import SMenuItemGroup from './SMenuItemGroup.vue'
 import SSubmenu from './SSubmenu.vue'
-import { MenuMode, MenuTrigger } from './consts'
+import { MenuMode, MenuTrigger, BorderRadius } from './consts'
 
-export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu, MenuMode, MenuTrigger }
+export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu, MenuMode, MenuTrigger, BorderRadius }
diff --git a/src/stories/Menu/SMenu.stories.ts b/src/stories/Menu/SMenu.stories.ts
index e56016a9..68b02c9b 100644
--- a/src/stories/Menu/SMenu.stories.ts
+++ b/src/stories/Menu/SMenu.stories.ts
@@ -1,4 +1,6 @@
+import { select } from '@storybook/addon-knobs'
 import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../components'
+import { BorderRadius } from '../../components/Menu'
 
 export default {
   component: SMenu,
@@ -11,6 +13,7 @@ export const basicMenu = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="1"
+                 :borderRadius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -36,6 +39,11 @@ export const basicMenu = () => ({
                  </s-menu-item-group>
                </s-menu>
              </s-aside>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleOpen (key: string, keyPath: Array<string>): void {
       console.log('handleOpen', key, keyPath)
@@ -54,6 +62,7 @@ export const sideBar = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="2"
+                 :borderRadius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -89,6 +98,11 @@ export const sideBar = () => ({
                  </s-menu-item>
                </s-menu>
              </s-aside>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleOpen (key: string, keyPath: Array<string>): void {
       console.log('handleOpen', key, keyPath)
@@ -107,6 +121,7 @@ export const topBar = () => ({
   template: `<s-menu
                default-active="4"
                mode="horizontal"
+               :borderRadius="borderRadius"
                @select="handleSelect">
                <s-menu-item index="1">Navigator One</s-menu-item>
                <s-submenu index="2">
@@ -124,6 +139,11 @@ export const topBar = () => ({
                <s-menu-item index="3" disabled>Navigator Three</s-menu-item>
                <s-menu-item index="4">Navigator Four</s-menu-item>
              </s-menu>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleSelect (key: string, keyPath: Array<string>): void {
       console.log('handleSelect', key, keyPath)
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index e9a9597f..51bbb91a 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -1,8 +1,27 @@
 $margin-bottom-menu-item: 8px;
 
+@mixin menu-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-menu-item,
+      .el-submenu__title {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-menu {
   box-shadow: var(--s-menu-box-shadow);
   padding: 20px 12px;
+  @include menu-border-radius;
+  @include menu-border-radius("medium", var(--s-border-radius-medium));
+  @include menu-border-radius("small", var(--s-border-radius-small));
+  @include menu-border-radius("mini", var(--s-border-radius-mini));
   &:not(.el-menu--horizontal) > :not(:last-child) {
     margin-bottom: $margin-bottom-menu-item;
   }
@@ -12,7 +31,6 @@ $margin-bottom-menu-item: 8px;
 }
 .el-menu-item {
   align-items: center;
-  border-radius: 6px;
   &:not(.is-disabled):hover,
   &.is-active {
     background-color: var(--s-menu-color-hover) !important;
@@ -21,7 +39,7 @@ $margin-bottom-menu-item: 8px;
       color: var(--s-menu-text-color-active);
     }
   }
-  [class^=s-icon-] {
+  [class^="s-icon-"] {
     margin-right: 12px;
     font-size: 20px;
   }
@@ -47,8 +65,7 @@ $margin-bottom-menu-item: 8px;
 .el-submenu__title {
   display: flex;
   align-items: center;
-  border-radius: 6px;
-  [class^=s-icon-] {
+  [class^="s-icon-"] {
     margin-right: 12px;
     font-size: 20px;
   }

From 4daf5c2331c105479be0a6d3d6e1057cbeedd139 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 03:28:07 +0300
Subject: [PATCH 11/22] Updated Input component and story.

---
 src/styles/input.scss | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/styles/input.scss b/src/styles/input.scss
index 14a80344..ae2be2dc 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -1,10 +1,35 @@
 @import "./variables";
 
+@mixin input-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      .el-input,
+      .el-textarea {
+        > input,
+        > textarea {
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
 .s-input {
   font-family: $s-font-family-default;
   width: 100%;
   min-height: $s-size-big;
   position: relative;
+  @include input-border-radius;
+  @include input-border-radius("medium", var(--s-border-radius-medium));
+  @include input-border-radius("small", var(--s-border-radius-small));
+  @include input-border-radius("mini", var(--s-border-radius-mini));
   .el-input__suffix {
     z-index: 1;
   }
@@ -17,7 +42,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: inherit;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -26,13 +50,11 @@
   }
   .el-input,
   .el-textarea {
-    border-radius: inherit;
     height: 100%;
     > input,
     > textarea {
       height: $s-size-big;
       border: 1px solid var(--s-color-base-background);
-      border-radius: inherit;
       background-color: var(--s-color-base-background);
       &::placeholder {
         color: var(--s-color-base-content-tertiary);

From dc336a79e7ef796b77fe3e8163664ba73bac67a2 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 05:26:16 +0300
Subject: [PATCH 12/22] Updated Lib version and Customization.

---
 package.json                               |  2 +-
 src/components/Input/SInput.vue            |  2 +-
 src/stories/Intro/Customization.stories.ts | 31 +++++++++++++++++++++-
 src/styles/common.scss                     |  2 +-
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e639ba48..38c7556d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 3dd87e08..5d477162 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -23,7 +23,7 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
-      :prefix-icon="isMediumInput && prefix"
+      :prefix-icon="(isMediumInput && prefix) ? prefix : ''"
       :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 43df1693..a40e14c5 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors } from '../../types'
+import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, SizeExtended } from '../../types'
 import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
 import { differentTypeButtonsData } from '../SButton.stories'
 
@@ -10,6 +10,12 @@ export default {
   excludeStories: /.*Data$/
 }
 
+const getRadiusData = (SizeExtended) => Object.values(SizeExtended).map(borderRadius => {
+  const varPrefix = 'border-radius-'
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`--s-${varPrefix}${borderRadius}`)
+  return { label: varPrefix + borderRadius, value }
+})
+
 const getColorsData = (colors) => Object.values(colors).map(color => {
   const value = getComputedStyle(document.documentElement).getPropertyValue(`--s-color-${color}`)
   const isRgb = value.includes('rgb')
@@ -69,6 +75,25 @@ export const configurable = () => ({
                </s-col>
              </s-row>
              <s-divider />
+             <s-row>
+               <s-col class="s-flex" :span="12" style="justify-content: space-between;">
+               <div v-for="button in borderRadiusButtons" :key="button.borderRadius">
+                  <s-button
+                    size="medium"
+                    type="primary"
+                    :borderRadius="button.borderRadius"
+                  >
+                    {{ button.label }}
+                  </s-button>
+                  <el-input
+                    ref="el-input"
+                    v-model="button.borderRadius"
+                    @change="(value) => handleBorderRadiusChange(button.label, value)"
+                  />
+               </div>
+               </s-col>
+             </s-row>
+             <s-divider />
              <s-row :gutter="20">
                <s-col v-for="input in inputs" :key="input" :span="4">
                  <s-input :placeholder="input" :type="input" />
@@ -80,11 +105,15 @@ export const configurable = () => ({
   data: () => ({
     sections: colorsSectionsData,
     buttons: differentTypeButtonsData,
+    borderRadiusButtons: getRadiusData(SizeExtended),
     inputs: themeInputsData
   }),
   methods: {
     handleColorChange: (label: string, color: string) => {
       document.documentElement.style.setProperty(label, color)
+    },
+    handleBorderRadiusChange: (label: string, value: string) => {
+      document.documentElement.style.setProperty(label, value)
     }
   }
 })
diff --git a/src/styles/common.scss b/src/styles/common.scss
index c7b0ae39..f3c29121 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -131,7 +131,7 @@ button > span {
     button.el-button.el-button--default.el-button--small {
       height: $s-size-medium;
       font-size: 14px;
-      border-radius: var(--s-border-radius-mini);;
+      border-radius: var(--s-border-radius-mini);
       &:hover, &:active, &:focus {
         color: var(--s-color-theme-accent);
         background-color: var(--s-color-base-on-accent);

From fad39fa367fa888d5b208bed6a04fb72891231ac Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 23:02:51 +0300
Subject: [PATCH 13/22] Fixed Border Radius Customization.

---
 src/stories/Intro/Customization.stories.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 7951aef8..433d7a0d 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -78,17 +78,19 @@ export const configurable = () => ({
              <s-divider />
              <s-row>
                <s-col class="s-flex" :span="12" style="justify-content: space-between;">
-               <div v-for="button in borderRadiusButtons" :key="button.borderRadius">
+               <div class="s-flex" v-for="button in borderRadiusButtons" :key="button.borderRadius">
                   <s-button
                     size="medium"
                     type="primary"
-                    :borderRadius="button.borderRadius"
-                  >
-                    {{ button.label }}
+                    :borderRadius="button.label"
+                    style="margin-left: 15px; margin-right: 5px;"
+                    >
+                    {{ button.label }} (px)
                   </s-button>
-                  <el-input
-                    ref="el-input"
-                    v-model="button.borderRadius"
+                  <s-input
+                    type="number"
+                    style="margin-right: 15px;"
+                    :placeholder="button.borderRadius"
                     @change="(value) => handleBorderRadiusChange(button.label, value)"
                   />
                </div>
@@ -114,7 +116,7 @@ export const configurable = () => ({
       document.documentElement.style.setProperty(`${colorPropertyPrefix}${label}`, color)
     },
     handleBorderRadiusChange: (label: string, borderRadius: string) => {
-      document.documentElement.style.setProperty(`${borderRadiusPropertyPrefix}${label}`, borderRadius)
+      document.documentElement.style.setProperty(`${borderRadiusPropertyPrefix}${label}`, `${+borderRadius > 0 ? borderRadius : '0'}px`)
     }
   }
 })

From 257cc14fbac46edf051b6f2348ddce60dfec8dc2 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 11 Nov 2020 23:19:19 +0300
Subject: [PATCH 14/22] Fixed Border Radius Customization.

---
 src/stories/Intro/Customization.stories.ts | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 433d7a0d..a15aac90 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -77,20 +77,14 @@ export const configurable = () => ({
              </s-row>
              <s-divider />
              <s-row>
+               <h6 style="margin-bottom: 10px">Border Radius</h6>
                <s-col class="s-flex" :span="12" style="justify-content: space-between;">
                <div class="s-flex" v-for="button in borderRadiusButtons" :key="button.borderRadius">
-                  <s-button
-                    size="medium"
-                    type="primary"
-                    :borderRadius="button.label"
-                    style="margin-left: 15px; margin-right: 5px;"
-                    >
-                    {{ button.label }} (px)
-                  </s-button>
                   <s-input
                     type="number"
-                    style="margin-right: 15px;"
-                    :placeholder="button.borderRadius"
+                    :placeholder="button.label + ' (px)'"
+                    :borderRadius="button.label"
+                    style="margin-right: 10px; margin-right: 10px;"
                     @change="(value) => handleBorderRadiusChange(button.label, value)"
                   />
                </div>

From 2c66031c7b80e8d8d4572ef29156f6db3a119d58 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Mon, 16 Nov 2020 09:34:54 +0300
Subject: [PATCH 15/22] Added StandardPropsMixin, refactored Border Radius
 implementation.

---
 src/components/Button/SButton.vue          | 32 ++++-----------
 src/components/Button/consts.ts            |  5 ---
 src/components/Button/index.ts             |  4 +-
 src/components/Card/SCard.vue              | 18 +++-----
 src/components/Card/consts.ts              |  4 --
 src/components/Card/index.ts               |  4 +-
 src/components/Checkbox/SCheckbox.vue      | 31 ++++----------
 src/components/Checkbox/consts.ts          |  4 --
 src/components/Checkbox/index.ts           |  3 +-
 src/components/DatePicker/SDatePicker.vue  | 22 ++++------
 src/components/DatePicker/consts.ts        |  5 ---
 src/components/DatePicker/index.ts         |  5 +--
 src/components/Dialog/SDialog.vue          | 18 +++-----
 src/components/Dialog/consts.ts            |  3 --
 src/components/Dialog/index.ts             |  3 +-
 src/components/Dropdown/SDropdown.vue      | 48 +++++++++++++++-------
 src/components/Dropdown/consts.ts          |  2 -
 src/components/Dropdown/index.ts           |  3 +-
 src/components/Input/SInput.vue            | 18 +++-----
 src/components/Input/consts.ts             |  4 --
 src/components/Input/index.ts              |  4 +-
 src/components/Menu/SMenu.vue              | 10 +++--
 src/components/Menu/consts.ts              |  4 --
 src/components/Menu/index.ts               |  4 +-
 src/components/Pagination/SPagination.vue  | 20 ++++-----
 src/components/Pagination/consts.ts        |  3 --
 src/components/Pagination/index.ts         |  3 +-
 src/components/Select/SSelect.vue          | 20 ++++-----
 src/components/Select/consts.ts            |  4 --
 src/components/Select/index.ts             |  4 +-
 src/components/Tab/STabs.vue               | 18 +++-----
 src/components/Tab/consts.ts               |  4 --
 src/components/Tab/index.ts                |  4 +-
 src/components/Tooltip/STooltip.vue        | 25 ++++++++++-
 src/mixins/StandardPropsMixin.ts           | 20 +++++++++
 src/stories/Dropdown/SDropdown.stories.ts  | 14 +++++--
 src/stories/Intro/Customization.stories.ts |  6 +--
 src/stories/Menu/SMenu.stories.ts          |  2 +-
 src/stories/SButton.stories.ts             |  7 ++--
 src/stories/SCard.stories.ts               |  5 ++-
 src/stories/SCheckbox.stories.ts           |  6 +--
 src/stories/SDatePicker.stories.ts         |  3 +-
 src/stories/SDialog.stories.ts             |  2 +-
 src/stories/SInput.stories.ts              |  3 +-
 src/stories/SPagination.stories.ts         |  2 +-
 src/stories/STooltip.stories.ts            |  5 +++
 src/stories/Select/SSelect.stories.ts      |  3 +-
 src/stories/Tab/STabs.stories.ts           |  3 +-
 src/styles/dropdown.scss                   | 18 ++++++++
 src/types/index.ts                         |  2 +-
 50 files changed, 223 insertions(+), 241 deletions(-)
 delete mode 100644 src/components/Checkbox/consts.ts
 delete mode 100644 src/components/Dialog/consts.ts
 delete mode 100644 src/components/Pagination/consts.ts
 create mode 100644 src/mixins/StandardPropsMixin.ts

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 533e1e2c..54ec4f9a 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -3,7 +3,7 @@
     <el-button
       :type="computedType"
       :native-type="nativeType"
-      :size="computedSize"
+      :size="getComponentSize(size)"
       :class="computedClasses"
       :style="computedStyles"
       :disabled="disabled"
@@ -20,19 +20,21 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Inject } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 import { PopoverPlacement } from 'element-ui/types/popover'
 
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
 import { SIcon } from '../Icon'
 import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes, BorderRadius } from './consts'
+import { Size, BorderRadius } from '../../types'
+import { ButtonTypes, ButtonNativeTypes } from './consts'
 
 @Component({
   components: { SIcon, STooltip }
 })
-export default class SButton extends Vue {
+export default class SButton extends Mixins(StandardPropsMixin) {
   readonly ButtonTypes = ButtonTypes
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
@@ -51,7 +53,7 @@ export default class SButton extends Vue {
    *
    * By default it's set to `"medium"`
    */
-  @Prop({ default: ButtonSize.MEDIUM, type: String }) readonly size!: string
+  @Prop({ default: Size.MEDIUM, type: String }) readonly size!: string
   /**
    * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
    *
@@ -111,22 +113,6 @@ export default class SButton extends Vue {
   private iconLeftOffset = 0
   elementIcon = ''
 
-  get computedSize (): string {
-    if (this.size === ButtonSize.BIG ||
-      !(Object.values(ButtonSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedType (): string {
     if (this.type === ButtonTypes.PRIMARY) {
       return this.type
@@ -138,10 +124,10 @@ export default class SButton extends Vue {
     const cssClasses: Array<string> = []
     if ((this.elForm || this.elFormItem || {}).size) {
       cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
-    } else if ((Object.values(ButtonSize) as Array<string>).includes(this.size)) {
+    } else if (this.isStandardSize(this.size)) {
       cssClasses.push(`s-${this.size}`)
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts
index fcd3e222..d11d2a08 100644
--- a/src/components/Button/consts.ts
+++ b/src/components/Button/consts.ts
@@ -1,5 +1,3 @@
-import { Size, SizeExtended } from '../../types'
-
 export enum ButtonTypes {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
@@ -13,6 +11,3 @@ export enum ButtonNativeTypes {
   SUBMIT = 'submit',
   RESET = 'reset'
 }
-
-export const ButtonSize = Size
-export const BorderRadius = SizeExtended
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index b0f63a08..53b5d0b7 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,5 +1,5 @@
 import SButton from './SButton.vue'
 import SButtonGroup from './SButtonGroup.vue'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes, BorderRadius } from './consts'
+import { ButtonTypes, ButtonNativeTypes } from './consts'
 
-export { SButton, SButtonGroup, ButtonTypes, ButtonSize, ButtonNativeTypes, BorderRadius }
+export { SButton, SButtonGroup, ButtonTypes, ButtonNativeTypes }
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index e83846ab..d03aa704 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -12,12 +12,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 
-import { CardShadow, BorderRadius } from './consts'
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { CardShadow } from './consts'
+import { BorderRadius } from '../../types'
 
 @Component
-export default class SCard extends Vue {
+export default class SCard extends Mixins(StandardPropsMixin) {
   /**
    * Header of the card. Also it can be set by slot#header
    */
@@ -47,17 +49,9 @@ export default class SCard extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.clickable) {
diff --git a/src/components/Card/consts.ts b/src/components/Card/consts.ts
index 478bba6c..30f195b8 100644
--- a/src/components/Card/consts.ts
+++ b/src/components/Card/consts.ts
@@ -1,9 +1,5 @@
-import { SizeExtended } from '../../types'
-
 export enum CardShadow {
   ALWAYS = 'always',
   HOVER = 'hover',
   NEVER = 'never'
 }
-
-export const BorderRadius = SizeExtended
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index c8040734..270ec29a 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,4 +1,4 @@
 import SCard from './SCard.vue'
-import { CardShadow, BorderRadius } from './consts'
+import { CardShadow } from './consts'
 
-export { SCard, CardShadow, BorderRadius }
+export { SCard, CardShadow }
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index f91a3c08..ac2e4f8a 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -6,7 +6,7 @@
     :disabled="disabled"
     :border="border"
     :checked="checked"
-    :size="computedSize"
+    :size="getComponentSize(size)"
     :name="name"
     :indeterminate="indeterminate"
     @change="handleChange"
@@ -16,12 +16,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { CheckboxSize, BorderRadius } from './consts'
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { Size, BorderRadius } from '../../types'
 
 @Component
-export default class SCheckbox extends Vue {
+export default class SCheckbox extends Mixins(StandardPropsMixin) {
   /**
    * Value of the checkbox item. Can be `string / number / boolean`
    */
@@ -59,7 +60,7 @@ export default class SCheckbox extends Vue {
    *
    * By default it's set to `"medium"`
    */
-  @Prop({ default: CheckboxSize.MEDIUM, type: String }) readonly size!: string
+  @Prop({ default: Size.MEDIUM, type: String }) readonly size!: string
   /**
    * Native name property of the checkbox item
    */
@@ -83,28 +84,12 @@ export default class SCheckbox extends Vue {
     this.$emit('input', value)
   }
 
-  get computedSize (): string {
-    if (this.size === CheckboxSize.BIG ||
-      !(Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.MINI ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
+    if (this.isStandardSize(this.size)) {
       cssClasses.push(`s-${this.size}`)
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts
deleted file mode 100644
index 2e35b751..00000000
--- a/src/components/Checkbox/consts.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Size, SizeExtended } from '../../types'
-
-export const CheckboxSize = Size
-export const BorderRadius = SizeExtended
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index e0240ab7..c30a6ad3 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,4 +1,3 @@
 import SCheckbox from './SCheckbox.vue'
-import { CheckboxSize, BorderRadius } from './consts'
 
-export { SCheckbox, CheckboxSize, BorderRadius }
+export { SCheckbox }
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 75f82afc..91590a35 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -35,12 +35,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
-import { PickerTypes, PickerSize, PickerAlignment, InputTypes, BorderRadius } from './consts'
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { Size, BorderRadius } from '../../types'
+import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 @Component
-export default class SDatePicker extends Vue {
+export default class SDatePicker extends Mixins(StandardPropsMixin) {
   /**
    * Value of date picker component. Can be used with `v-model`.
    * Can be date object / array with date objects for date range picker
@@ -96,7 +98,7 @@ export default class SDatePicker extends Vue {
    * TODO: ask design team
    * `"medium"` by default
    */
-  // @Prop({ type: String, default: PickerSize.MEDIUM }) readonly size!: string
+  // @Prop({ type: String, default: Size.MEDIUM }) readonly size!: string
   /**
    * Placeholder in non-range mode
    */
@@ -215,20 +217,12 @@ export default class SDatePicker extends Vue {
     return !!(this.model && this.placeholder)
   }
 
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedPopperClass (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
@@ -239,7 +233,7 @@ export default class SDatePicker extends Vue {
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.focused) {
diff --git a/src/components/DatePicker/consts.ts b/src/components/DatePicker/consts.ts
index 64d2e2c6..a39cd70e 100644
--- a/src/components/DatePicker/consts.ts
+++ b/src/components/DatePicker/consts.ts
@@ -1,5 +1,3 @@
-import { Size, SizeExtended } from '../../types'
-
 export enum PickerTypes {
   YEAR = 'year',
   MONTH = 'month',
@@ -22,6 +20,3 @@ export enum InputTypes {
   INPUT = 'input',
   SELECT = 'select'
 }
-
-export const PickerSize = Size
-export const BorderRadius = SizeExtended
diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts
index 95d6b304..e100a2dc 100644
--- a/src/components/DatePicker/index.ts
+++ b/src/components/DatePicker/index.ts
@@ -1,11 +1,10 @@
 import SDatePicker from './SDatePicker.vue'
-import { PickerTypes, PickerAlignment, InputTypes, PickerSize, BorderRadius } from './consts'
+import { PickerTypes, PickerAlignment, InputTypes, PickerSize } from './consts'
 
 export {
   SDatePicker,
   PickerTypes,
   PickerAlignment,
   InputTypes,
-  PickerSize,
-  BorderRadius
+  PickerSize
 }
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index 9c7d9073..f92710c7 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -28,12 +28,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import { BorderRadius } from './consts'
+
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { BorderRadius } from '../../types'
 
 @Component
-export default class SDialog extends Vue {
+export default class SDialog extends Mixins(StandardPropsMixin) {
   /**
    * Visibility of the dialog component.
    *
@@ -155,17 +157,9 @@ export default class SDialog extends Vue {
     this.$emit('update:visible', value)
   }
 
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.customClass) {
diff --git a/src/components/Dialog/consts.ts b/src/components/Dialog/consts.ts
deleted file mode 100644
index 8f95c825..00000000
--- a/src/components/Dialog/consts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SizeExtended } from '../../types'
-
-export const BorderRadius = SizeExtended
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
index b524176a..452d701a 100644
--- a/src/components/Dialog/index.ts
+++ b/src/components/Dialog/index.ts
@@ -1,4 +1,3 @@
 import SDialog from './SDialog.vue'
-import { BorderRadius } from './consts'
 
-export { SDialog, BorderRadius }
+export { SDialog }
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index 679a9c9c..38224f1a 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -2,7 +2,8 @@
   <el-dropdown
     ref="dropdown"
     :split-button="splitButton"
-    :size="computedSize"
+    :size="getComponentSize(size)"
+    :class="computedClasses"
     :type="computedType"
     :placement="placement"
     :trigger="computedTrigger"
@@ -35,20 +36,22 @@
         </template>
       </s-tooltip>
     </template>
-    <el-dropdown-menu :class="{'ellipsis': type === DropdownType.ELLIPSIS}">
+    <el-dropdown-menu :class="computedPopperClass">
       <slot name="menu"></slot>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElDropdown } from 'element-ui/types/dropdown'
 
-import { DropdownType, DropdownSize, DropdownPlacement, DropdownTrigger } from './consts'
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
 import { ButtonTypes, SButton } from '../Button'
 import { Icons, SIcon } from '../Icon'
 import { STooltip } from '../Tooltip'
+import { Size, BorderRadius } from '../../types'
+import { DropdownType, DropdownPlacement, DropdownTrigger } from './consts'
 
 @Component({
   components: {
@@ -57,7 +60,7 @@ import { STooltip } from '../Tooltip'
     STooltip
   }
 })
-export default class SDropdown extends Vue {
+export default class SDropdown extends Mixins(StandardPropsMixin) {
   readonly DropdownType = DropdownType
   /**
    * A type of the dropdown component. Possible values: `"default"`, `"button"`, `"ellipsis"`.
@@ -84,7 +87,13 @@ export default class SDropdown extends Vue {
    *
    * By default, it's set to `"big"`
    */
-  @Prop({ type: String, default: DropdownSize.BIG }) readonly size!: string
+  @Prop({ type: String, default: Size.BIG }) readonly size!: string
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * A placement of the popup menu. You can use any value from `DropdownPlacement` enum.
    *
@@ -133,6 +142,25 @@ export default class SDropdown extends Vue {
 
   willTooltipBeDisabled = false
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
+  get computedPopperClass (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.type === DropdownType.ELLIPSIS) {
+      cssClasses.push('ellipsis')
+    }
+    if (this.isStandardBorderRadius(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedType () {
     if (this.type === DropdownType.BUTTON) {
       return this.computedButtonType
@@ -150,14 +178,6 @@ export default class SDropdown extends Vue {
     return this.trigger
   }
 
-  get computedSize (): string {
-    if (this.size === DropdownSize.BIG ||
-      !(Object.values(DropdownSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
   get computedButtonType (): string {
     if (this.buttonType === ButtonTypes.ACTION ||
       !(Object.values(ButtonTypes) as Array<string>).includes(this.buttonType)) {
diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts
index 8fd34a23..694634fa 100644
--- a/src/components/Dropdown/consts.ts
+++ b/src/components/Dropdown/consts.ts
@@ -19,5 +19,3 @@ export enum DropdownTrigger {
   HOVER = 'hover',
   CLICK = 'click'
 }
-
-export const DropdownSize = Size
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
index 87bb2280..70b3392c 100644
--- a/src/components/Dropdown/index.ts
+++ b/src/components/Dropdown/index.ts
@@ -1,12 +1,11 @@
 import SDropdown from './SDropdown.vue'
 import SDropdownItem from './SDropdownItem.vue'
-import { DropdownPlacement, DropdownSize, DropdownTrigger, DropdownType } from './consts'
+import { DropdownPlacement, DropdownTrigger, DropdownType } from './consts'
 
 export {
   SDropdown,
   SDropdownItem,
   DropdownPlacement,
-  DropdownSize,
   DropdownTrigger,
   DropdownType
 }
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 4aa0fb0d..afd9ec62 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -38,14 +38,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
-import { Autocomplete, InputSize, InputType, BorderRadius } from './consts'
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { BorderRadius } from '../../types'
+import { Autocomplete, InputSize, InputType } from './consts'
 
 @Component
-export default class SInput extends Vue {
+export default class SInput extends Mixins(StandardPropsMixin) {
   readonly InputType = InputType
   readonly emptyValue = null
   /**
@@ -179,14 +181,6 @@ export default class SInput extends Vue {
     return this.type === InputType.TEXT && this.size === InputSize.MEDIUM
   }
 
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.focused) {
@@ -195,7 +189,7 @@ export default class SInput extends Vue {
     if (this.disabled || (this.elForm || {}).disabled) {
       cssClasses.push('s-disabled')
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.type === InputType.TEXT_FILE) {
diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts
index 879f76ad..bb48a246 100644
--- a/src/components/Input/consts.ts
+++ b/src/components/Input/consts.ts
@@ -1,5 +1,3 @@
-import { SizeExtended } from '../../types'
-
 export enum Autocomplete {
   OFF = 'off',
   ON = 'on'
@@ -36,5 +34,3 @@ export enum InputSize {
   MEDIUM = 'medium',
   BIG = 'big'
 }
-
-export const BorderRadius = SizeExtended
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index e3cac624..e1b9b29e 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1,5 +1,5 @@
 import SInput from './SInput.vue'
 import SJsonInput from './SJsonInput.vue'
-import { Autocomplete, InputType, InputSize, BorderRadius } from './consts'
+import { Autocomplete, InputType, InputSize } from './consts'
 
-export { SInput, SJsonInput, Autocomplete, InputType, InputSize, BorderRadius }
+export { SInput, SJsonInput, Autocomplete, InputType, InputSize }
diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue
index 5ae0727a..9e1d8202 100644
--- a/src/components/Menu/SMenu.vue
+++ b/src/components/Menu/SMenu.vue
@@ -24,13 +24,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElMenu } from 'element-ui/types/menu'
 
-import { MenuMode, MenuTrigger, BorderRadius } from './consts'
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { BorderRadius } from '../../types'
+import { MenuMode, MenuTrigger } from './consts'
 
 @Component
-export default class SMenu extends Vue {
+export default class SMenu extends Mixins(StandardPropsMixin) {
   /**
    * Mode of menu. Possible values: `"horizontal"`, `"vertical"`.
    *
@@ -115,7 +117,7 @@ export default class SMenu extends Vue {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = ['s-menu']
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Menu/consts.ts b/src/components/Menu/consts.ts
index 91edf7e2..88c08daa 100644
--- a/src/components/Menu/consts.ts
+++ b/src/components/Menu/consts.ts
@@ -1,5 +1,3 @@
-import { SizeExtended } from '../../types'
-
 export enum MenuMode {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'
@@ -9,5 +7,3 @@ export enum MenuTrigger {
   HOVER = 'hover',
   CLICK = 'click'
 }
-
-export const BorderRadius = SizeExtended
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index 3671ae5f..d352b296 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -2,6 +2,6 @@ import SMenu from './SMenu.vue'
 import SMenuItem from './SMenuItem.vue'
 import SMenuItemGroup from './SMenuItemGroup.vue'
 import SSubmenu from './SSubmenu.vue'
-import { MenuMode, MenuTrigger, BorderRadius } from './consts'
+import { MenuMode, MenuTrigger } from './consts'
 
-export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu, MenuMode, MenuTrigger, BorderRadius }
+export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu, MenuMode, MenuTrigger }
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index e8108d55..28b3f2bd 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -24,13 +24,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import { ElPagination } from 'element-ui/types/pagination'
 import cloneDeep from 'lodash/fp/cloneDeep'
-import { BorderRadius } from './consts'
+
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { BorderRadius } from '../../types'
 
 @Component
-export default class SPagination extends Vue {
+export default class SPagination extends Mixins(StandardPropsMixin) {
   /**
    * Will pagination component be small.
    *
@@ -175,20 +177,12 @@ export default class SPagination extends Vue {
     return this.layout.includes('slot')
   }
 
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedPopperClass (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
@@ -196,7 +190,7 @@ export default class SPagination extends Vue {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Pagination/consts.ts b/src/components/Pagination/consts.ts
deleted file mode 100644
index 8f95c825..00000000
--- a/src/components/Pagination/consts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SizeExtended } from '../../types'
-
-export const BorderRadius = SizeExtended
diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts
index 36408f72..ae6a4363 100644
--- a/src/components/Pagination/index.ts
+++ b/src/components/Pagination/index.ts
@@ -1,4 +1,3 @@
 import SPagination from './SPagination.vue'
-import { BorderRadius } from './consts'
 
-export { SPagination, BorderRadius }
+export { SPagination }
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 84aeacb9..df4a19bb 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -25,13 +25,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
 import { Autocomplete } from '../Input'
-import { InputTypes, BorderRadius } from './consts'
+import { BorderRadius } from '../../types'
+import { InputTypes } from './consts'
 
 @Component
-export default class SSelect extends Vue {
+export default class SSelect extends Mixins(StandardPropsMixin) {
   /**
    * Selected value. Can be used with `v-model`
    */
@@ -148,20 +150,12 @@ export default class SSelect extends Vue {
     this.$nextTick(this.updateInputValue)
   }
 
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedPopperClass (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
@@ -172,7 +166,7 @@ export default class SSelect extends Vue {
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.focused) {
diff --git a/src/components/Select/consts.ts b/src/components/Select/consts.ts
index 384d86fb..0484a8e2 100644
--- a/src/components/Select/consts.ts
+++ b/src/components/Select/consts.ts
@@ -1,8 +1,4 @@
-import { SizeExtended } from '../../types'
-
 export enum InputTypes {
   INPUT = 'input',
   SELECT = 'select'
 }
-
-export const BorderRadius = SizeExtended
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index cb681c23..fa6ba46e 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,6 +1,6 @@
 import SSelect from './SSelect.vue'
 import SOption from './SOption.vue'
 import SOptionGroup from './SOptionGroup.vue'
-import { InputTypes, BorderRadius } from './consts'
+import { InputTypes } from './consts'
 
-export { SSelect, SOption, SOptionGroup, InputTypes, BorderRadius }
+export { SSelect, SOption, SOptionGroup, InputTypes }
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index a83d197b..9bdc4727 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -20,12 +20,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { TabsType, TabsPosition, BorderRadius } from './consts'
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { BorderRadius } from '../../types'
+import { TabsType, TabsPosition } from './consts'
 
 @Component
-export default class STabs extends Vue {
+export default class STabs extends Mixins(StandardPropsMixin) {
   /**
    * Name of the selected tab. Can be used with `v-model`.
    *
@@ -99,21 +101,13 @@ export default class STabs extends Vue {
     return this.type !== TabsType.ROUNDED ? this.type : ''
   }
 
-  get computedBorderRadius (): string {
-    if (this.borderRadius === BorderRadius.SMALL ||
-      !(Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
-      return ''
-    }
-    return this.borderRadius
-  }
-
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.type === TabsType.ROUNDED &&
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
     }
-    if ((Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)) {
+    if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Tab/consts.ts b/src/components/Tab/consts.ts
index 588e4a27..5ae902a9 100644
--- a/src/components/Tab/consts.ts
+++ b/src/components/Tab/consts.ts
@@ -1,5 +1,3 @@
-import { SizeExtended } from '../../types'
-
 export enum TabsType {
   ROUNDED = 'rounded',
   CARD = 'card',
@@ -12,5 +10,3 @@ export enum TabsPosition {
   RIGHT = 'right',
   LEFT = 'left'
 }
-
-export const BorderRadius = SizeExtended
diff --git a/src/components/Tab/index.ts b/src/components/Tab/index.ts
index f832f521..7381c960 100644
--- a/src/components/Tab/index.ts
+++ b/src/components/Tab/index.ts
@@ -2,8 +2,8 @@ import Vue from 'vue'
 import { TabPane } from 'element-ui'
 
 import STabs from './STabs.vue'
-import { TabsType, TabsPosition, BorderRadius } from './consts'
+import { TabsType, TabsPosition } from './consts'
 
 const STab = Vue.component('STab', TabPane)
 
-export { STab, STabs, TabsType, TabsPosition, BorderRadius }
+export { STab, STabs, TabsType, TabsPosition }
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 7d1ba338..f4c386db 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -11,6 +11,7 @@
     :transition="animation"
     :visible-arrow="showArrow"
     :open-delay="openDelay"
+    :popper-class="computedPopperClass"
     :manual="manual"
     :hide-after="closeDelay"
     :tabindex="tabindex"
@@ -21,15 +22,17 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
+import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import { BorderRadius } from '../../types'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component
-export default class STooltip extends Vue {
+export default class STooltip extends Mixins(StandardPropsMixin) {
   /**
    * Theme of the tooltip. Supported values: `"dark"` or `"light"`.
    *
@@ -58,6 +61,12 @@ export default class STooltip extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Offset of the tooltip.
    *
@@ -80,6 +89,10 @@ export default class STooltip extends Vue {
    * `0` by default
    */
   @Prop({ default: 0, type: Number }) readonly openDelay!: number
+  /**
+   * Custom class name for tooltip's popper
+   */
+  @Prop({ type: String }) readonly popperClass!: string
   /**
    * Manual mode of the tooltip. `Mouseenter` and `mouseleave` won't have
    * effects if set to true.
@@ -102,6 +115,14 @@ export default class STooltip extends Vue {
 
   @Ref('tooltip') tooltip!: any
 
+  get computedPopperClass (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius(this.borderRadius)) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   model = this.value
 
   @Watch('value')
diff --git a/src/mixins/StandardPropsMixin.ts b/src/mixins/StandardPropsMixin.ts
new file mode 100644
index 00000000..227ce723
--- /dev/null
+++ b/src/mixins/StandardPropsMixin.ts
@@ -0,0 +1,20 @@
+import { Vue, Component } from 'vue-property-decorator'
+import { Size, BorderRadius } from '../types'
+
+@Component
+export default class StandardPropsMixin extends Vue {
+  isStandardSize (size: string): boolean {
+    return (Object.values(Size) as Array<string>).includes(size)
+  }
+
+  getComponentSize (size: string): string {
+    if (size === Size.BIG || !this.isStandardSize(size)) {
+      return ''
+    }
+    return size
+  }
+
+  isStandardBorderRadius (borderRadius: string): boolean {
+    return (Object.values(BorderRadius) as Array<string>).includes(borderRadius)
+  }
+}
diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index a4ec4086..b01e3d03 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -1,7 +1,8 @@
 import { number, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCol, SDropdown, SDropdownItem, SRow } from '../../components'
-import { DropdownPlacement, DropdownSize, DropdownTrigger, DropdownType } from '../../components/Dropdown'
+import { Size, BorderRadius } from '../../types'
+import { DropdownPlacement, DropdownTrigger, DropdownType } from '../../components/Dropdown'
 import { ButtonTypes } from '../../components/Button'
 
 export default {
@@ -15,7 +16,8 @@ export const configurable = () => ({
   components: { SDropdown, SDropdownItem },
   template: `<s-dropdown
                type="button"
-               size="big"
+               :size="size"
+               :borderRadius="borderRadius"
                :buttonType="buttonType"
                :placement="placement"
                :hide-on-click="hideOnClick"
@@ -35,6 +37,12 @@ export const configurable = () => ({
     buttonType: {
       default: select('Button Type', Object.values(ButtonTypes), ButtonTypes.SECONDARY)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     placement: {
       default: select('Placement', Object.values(DropdownPlacement), DropdownPlacement.BOTTOM_END)
     },
@@ -126,7 +134,7 @@ export const differentTypes = () => ({
   }
 })
 
-export const differentSizeData = Object.values(DropdownSize).map(size => {
+export const differentSizeData = Object.values(Size).map(size => {
   const data = { size, type: DropdownType.BUTTON, buttonType: ButtonTypes.PRIMARY } as any
   data.label = size[0].toUpperCase() + size.slice(1)
   return data
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index a15aac90..f74e9ce0 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, SizeExtended } from '../../types'
+import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, BorderRadius } from '../../types'
 import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
 import { differentTypeButtonsData } from '../SButton.stories'
 
@@ -11,7 +11,7 @@ export default {
 }
 
 const borderRadiusPropertyPrefix = '--s-border-radius-'
-const getRadiusData = (SizeExtended) => Object.values(SizeExtended).map(borderRadiusPropertyName => {
+const getRadiusData = (BorderRadius) => Object.values(BorderRadius).map(borderRadiusPropertyName => {
   const value = getComputedStyle(document.documentElement).getPropertyValue(`${borderRadiusPropertyPrefix}${borderRadiusPropertyName}`)
   return { label: borderRadiusPropertyName, value }
 })
@@ -102,7 +102,7 @@ export const configurable = () => ({
   data: () => ({
     sections: colorsSectionsData,
     buttons: differentTypeButtonsData,
-    borderRadiusButtons: getRadiusData(SizeExtended),
+    borderRadiusButtons: getRadiusData(BorderRadius),
     inputs: themeInputsData
   }),
   methods: {
diff --git a/src/stories/Menu/SMenu.stories.ts b/src/stories/Menu/SMenu.stories.ts
index 68b02c9b..246c197b 100644
--- a/src/stories/Menu/SMenu.stories.ts
+++ b/src/stories/Menu/SMenu.stories.ts
@@ -1,6 +1,6 @@
 import { select } from '@storybook/addon-knobs'
 import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../components'
-import { BorderRadius } from '../../components/Menu'
+import { BorderRadius } from '../../types'
 
 export default {
   component: SMenu,
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index 15ca1826..011e73d1 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -1,7 +1,8 @@
 import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components'
-import { ButtonSize, ButtonTypes, BorderRadius } from '../components/Button'
+import { Size, BorderRadius } from '../types'
+import { ButtonTypes } from '../components/Button'
 
 export default {
   component: SButton,
@@ -37,7 +38,7 @@ export const configurable = () => ({
       default: select('Type', Object.values(ButtonTypes), ButtonTypes.PRIMARY)
     },
     size: {
-      default: select('Size', Object.values(ButtonSize), ButtonSize.BIG)
+      default: select('Size', Object.values(Size), Size.BIG)
     },
     borderRadius: {
       default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
@@ -88,7 +89,7 @@ export const withDifferentTypes = () => ({
   }
 })
 
-export const differentSizeData = Object.values(ButtonSize).map(size =>
+export const differentSizeData = Object.values(Size).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const withDifferentSize = () => ({
   components: { SButton, SRow },
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 55be060e..1150b755 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -1,7 +1,8 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCard, SRow, SDropdown, SDropdownItem } from '../components'
-import { CardShadow, BorderRadius } from '../components/Card'
+import { BorderRadius } from '../types'
+import { CardShadow } from '../components/Card'
 
 export default {
   component: SCard,
@@ -16,7 +17,7 @@ export const configurable = () => ({
                  <template slot="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
-                     <s-dropdown type="ellipsis">
+                     <s-dropdown type="ellipsis" :borderRadius="borderRadius">
                        Menu
                        <template #menu>
                          <s-dropdown-item>First</s-dropdown-item>
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 461d84cb..b97569ce 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCheckbox, SRow, SCol } from '../components'
-import { CheckboxSize, BorderRadius } from '../components/Checkbox'
+import { Size, BorderRadius } from '../types'
 
 export default {
   component: SCheckbox,
@@ -45,7 +45,7 @@ export const configurable = () => ({
       default: text('Label', 'Checkbox')
     },
     size: {
-      default: select('Size', Object.values(CheckboxSize), CheckboxSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     }
   }
 })
@@ -70,7 +70,7 @@ export const disabled = () => ({
   })
 })
 
-export const differentSizeData = Object.values(CheckboxSize).map(size =>
+export const differentSizeData = Object.values(Size).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const differentSize = () => ({
   components: { SCheckbox, SRow, SCol },
diff --git a/src/stories/SDatePicker.stories.ts b/src/stories/SDatePicker.stories.ts
index bc0b3a9d..5afd3413 100644
--- a/src/stories/SDatePicker.stories.ts
+++ b/src/stories/SDatePicker.stories.ts
@@ -1,7 +1,8 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SDatePicker, SRow, SCol } from '../components'
-import { PickerAlignment, PickerTypes, InputTypes, BorderRadius } from '../components/DatePicker'
+import { BorderRadius } from '../types'
+import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePicker'
 
 export default {
   component: SDatePicker,
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index 2dbfd8d0..a56e4518 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
 import { SDialog, SRow, SButton } from '../components'
-import { BorderRadius } from '../components/Dialog'
+import { BorderRadius } from '../types'
 
 export default {
   component: SDialog,
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 06f1d748..85381d27 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -1,7 +1,8 @@
 import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
 
 import { SInput, SRow, SCol } from '../components'
-import { InputType, InputSize, BorderRadius } from '../components/Input'
+import { BorderRadius } from '../types'
+import { InputType, InputSize } from '../components/Input'
 
 export default {
   component: SInput,
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index 0610e909..d18d3012 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -1,7 +1,7 @@
 import { withKnobs, number, text, boolean, select } from '@storybook/addon-knobs'
 
 import { SPagination, SRow } from '../components'
-import { BorderRadius } from '../components/Pagination'
+import { BorderRadius } from '../types'
 
 export default {
   component: SPagination,
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index a75c75ed..e533a174 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -1,6 +1,7 @@
 import { text, withKnobs, boolean, select, number } from '@storybook/addon-knobs'
 
 import { SButton, STooltip, SRow, SMain } from '../components'
+import { Size, BorderRadius } from '../types'
 import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
 
 export default {
@@ -18,6 +19,7 @@ export const configurable = () => ({
                  v-model="model"
                  :content="content"
                  :disabled="disabled"
+                 :borderRadius="borderRadius"
                  :offset="offset"
                  :openDelay="openDelay"
                  @change="handleChange"
@@ -38,6 +40,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     offset: {
       default: number('Offset', 0)
     },
diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
index a69cd00e..85215c81 100644
--- a/src/stories/Select/SSelect.stories.ts
+++ b/src/stories/Select/SSelect.stories.ts
@@ -1,7 +1,8 @@
 import { text, withKnobs, boolean, number, select } from '@storybook/addon-knobs'
 
 import { SSelect, SRow, SCol, SOption } from '../../components'
-import { InputTypes, BorderRadius } from '../../components/Select'
+import { BorderRadius } from '../../types'
+import { InputTypes } from '../../components/Select'
 
 export default {
   component: SSelect,
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index 9dfcb1b7..ec8886d6 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -1,7 +1,8 @@
 import { boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { STabs, STab } from '../../components'
-import { TabsPosition, TabsType, BorderRadius } from '../../components/Tab'
+import { BorderRadius } from '../../types'
+import { TabsPosition, TabsType } from '../../components/Tab'
 
 export default {
   component: STabs,
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index ac7eb2e4..bd0ad04d 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -1,7 +1,25 @@
 @import "./variables";
 
+@mixin dropdown-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-button {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .el-dropdown {
   color: var(--s-color-base-content-primary);
+  @include dropdown-border-radius;
+  @include dropdown-border-radius("medium", var(--s-border-radius-medium));
+  @include dropdown-border-radius("small", var(--s-border-radius-small));
+  @include dropdown-border-radius("mini", var(--s-border-radius-mini));
   > .el-button-group {
     > .el-button {
       float: left;
diff --git a/src/types/index.ts b/src/types/index.ts
index 50f485d2..dc62dba7 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,7 +4,7 @@ export enum Size {
   SMALL = 'small'
 }
 
-export enum SizeExtended {
+export enum BorderRadius {
   BIG = 'big',
   MEDIUM = 'medium',
   SMALL = 'small',

From ea7832a9a0163643ef61e465da1b033cc6757418 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Mon, 16 Nov 2020 09:46:39 +0300
Subject: [PATCH 16/22] Added StandardPropsMixin, refactored Border Radius
 implementation.

---
 src/components/DatePicker/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts
index e100a2dc..9a55cca4 100644
--- a/src/components/DatePicker/index.ts
+++ b/src/components/DatePicker/index.ts
@@ -1,10 +1,9 @@
 import SDatePicker from './SDatePicker.vue'
-import { PickerTypes, PickerAlignment, InputTypes, PickerSize } from './consts'
+import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 export {
   SDatePicker,
   PickerTypes,
   PickerAlignment,
-  InputTypes,
-  PickerSize
+  InputTypes
 }

From b8a1203fffb23155dfee22d0c5e978160eccdb19 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Mon, 16 Nov 2020 10:19:57 +0300
Subject: [PATCH 17/22] Added StandardPropsMixin, refactored Border Radius
 implementation.

---
 src/components/Dropdown/consts.ts   | 2 --
 src/components/Tooltip/STooltip.vue | 3 +++
 src/stories/STooltip.stories.ts     | 2 +-
 src/styles/json-input.scss          | 4 ++--
 src/styles/variables.scss           | 3 ---
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts
index 694634fa..d9a6ec1e 100644
--- a/src/components/Dropdown/consts.ts
+++ b/src/components/Dropdown/consts.ts
@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum DropdownType {
   DEFAULT = 'default',
   BUTTON = 'button',
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index f4c386db..3e91a831 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -117,6 +117,9 @@ export default class STooltip extends Mixins(StandardPropsMixin) {
 
   get computedPopperClass (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
     if (this.isStandardBorderRadius(this.borderRadius)) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index e533a174..9d9a0eba 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, boolean, select, number } from '@storybook/addon-knobs'
 
 import { SButton, STooltip, SRow, SMain } from '../components'
-import { Size, BorderRadius } from '../types'
+import { BorderRadius } from '../types'
 import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
 
 export default {
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 2229f1c9..c9759f29 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -9,7 +9,7 @@ $color-ide-boolean: #0000FF;
 .s-json-input {
   width: 100%;
   border: 1px solid var(--s-color-base-border-primary);
-  border-radius: $s-border-radius-default;
+  border-radius: var(--s-border-radius-mini);
   &.s-disabled {
     .ace-jsoneditor {
       pointer-events: none;
@@ -106,7 +106,7 @@ $color-ide-boolean: #0000FF;
     background: var(--s-color-base-content-primary);
     border-color: var(--s-color-base-content-primary);
     color: var(--s-color-base-on-accent);
-    border-radius: $s-border-radius-default;
+    border-radius: var(--s-border-radius-mini);
     padding: 10px;
     font-size: 12px;
     line-height: 1.2;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4e7b3071..4f057946 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -48,9 +48,6 @@ $s-size-medium: 40px !default;
 $s-size-small: 32px !default;
 $s-size-mini: 24px !default;
 
-// TODO: check do we need this default radius or not
-$s-border-radius-default: 4px !default;
-
 $s-border-radius-base: 4px;
 $s-border-radius-mini: $s-border-radius-base !default;
 $s-border-radius-small: $s-border-radius-base * 2 !default;

From a7d61f6ee93182b3a9b215389620c08f958ab3bb Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 17 Nov 2020 11:33:32 +0300
Subject: [PATCH 18/22] Refactored, added Size and Border Radius mixins.

---
 src/components/Button/SButton.vue         | 24 +++++---------------
 src/components/Card/SCard.vue             | 13 +++--------
 src/components/Checkbox/SCheckbox.vue     | 24 +++++---------------
 src/components/DatePicker/SDatePicker.vue | 27 +++++++----------------
 src/components/Dialog/SDialog.vue         | 13 +++--------
 src/components/Dropdown/SDropdown.vue     | 25 +++++----------------
 src/components/Input/SInput.vue           | 13 +++--------
 src/components/Menu/SMenu.vue             | 13 +++--------
 src/components/Pagination/SPagination.vue | 19 +++++-----------
 src/components/Select/SSelect.vue         | 19 +++++-----------
 src/components/Tab/STabs.vue              | 13 +++--------
 src/components/Tooltip/STooltip.vue       | 17 +++++---------
 src/mixins/BorderRadiusMixin.ts           | 16 ++++++++++++++
 src/mixins/SizeMixin.ts                   | 23 +++++++++++++++++++
 src/mixins/StandardPropsMixin.ts          | 20 -----------------
 15 files changed, 97 insertions(+), 182 deletions(-)
 create mode 100644 src/mixins/BorderRadiusMixin.ts
 create mode 100644 src/mixins/SizeMixin.ts
 delete mode 100644 src/mixins/StandardPropsMixin.ts

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 54ec4f9a..db8e2d9b 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -3,7 +3,7 @@
     <el-button
       :type="computedType"
       :native-type="nativeType"
-      :size="getComponentSize(size)"
+      :size="getComponentSize"
       :class="computedClasses"
       :style="computedStyles"
       :disabled="disabled"
@@ -25,16 +25,16 @@ import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 import { PopoverPlacement } from 'element-ui/types/popover'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { SIcon } from '../Icon'
 import { STooltip, TooltipPlacement } from '../Tooltip'
-import { Size, BorderRadius } from '../../types'
 import { ButtonTypes, ButtonNativeTypes } from './consts'
 
 @Component({
   components: { SIcon, STooltip }
 })
-export default class SButton extends Mixins(StandardPropsMixin) {
+export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
   readonly ButtonTypes = ButtonTypes
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
@@ -48,18 +48,6 @@ export default class SButton extends Mixins(StandardPropsMixin) {
    * By default it's set to `false`
    */
   @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
-  /**
-   * Size of button. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: Size.MEDIUM, type: String }) readonly size!: string
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Icon name from icon collection of this library
    */
@@ -124,10 +112,10 @@ export default class SButton extends Mixins(StandardPropsMixin) {
     const cssClasses: Array<string> = []
     if ((this.elForm || this.elFormItem || {}).size) {
       cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
-    } else if (this.isStandardSize(this.size)) {
+    } else if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index d03aa704..81810fbc 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -14,12 +14,11 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { CardShadow } from './consts'
-import { BorderRadius } from '../../types'
 
 @Component
-export default class SCard extends Mixins(StandardPropsMixin) {
+export default class SCard extends Mixins(BorderRadiusMixin) {
   /**
    * Header of the card. Also it can be set by slot#header
    */
@@ -36,12 +35,6 @@ export default class SCard extends Mixins(StandardPropsMixin) {
    * By default, it's set to `"hover"`
    */
   @Prop({ default: CardShadow.HOVER, type: String }) readonly shadow!: string
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Clickable property of the Card component which means that the user can click on the card
    *
@@ -51,7 +44,7 @@ export default class SCard extends Mixins(StandardPropsMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.clickable) {
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index ac2e4f8a..72082224 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -6,7 +6,7 @@
     :disabled="disabled"
     :border="border"
     :checked="checked"
-    :size="getComponentSize(size)"
+    :size="getComponentSize"
     :name="name"
     :indeterminate="indeterminate"
     @change="handleChange"
@@ -18,11 +18,11 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { Size, BorderRadius } from '../../types'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 
 @Component
-export default class SCheckbox extends Mixins(StandardPropsMixin) {
+export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Value of the checkbox item. Can be `string / number / boolean`
    */
@@ -43,24 +43,12 @@ export default class SCheckbox extends Mixins(StandardPropsMixin) {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly border!: boolean
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"mini"`
-   */
-  @Prop({ default: BorderRadius.MINI, type: String }) readonly borderRadius!: string
   /**
    * Checked state of the checkbox item.
    *
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly checked!: boolean
-  /**
-   * Size of the checkbox item. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: Size.MEDIUM, type: String }) readonly size!: string
   /**
    * Native name property of the checkbox item
    */
@@ -86,10 +74,10 @@ export default class SCheckbox extends Mixins(StandardPropsMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if (this.isStandardSize(this.size)) {
+    if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 91590a35..deb95519 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -37,12 +37,13 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { Size, BorderRadius } from '../../types'
+// TODO: ask do we need size prop for the component?
+// Prev comment => TODO: ask design team
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 @Component
-export default class SDatePicker extends Mixins(StandardPropsMixin) {
+export default class SDatePicker extends Mixins(BorderRadiusMixin) {
   /**
    * Value of date picker component. Can be used with `v-model`.
    * Can be date object / array with date objects for date range picker
@@ -93,12 +94,6 @@ export default class SDatePicker extends Mixins(StandardPropsMixin) {
    * `true` by default
    */
   @Prop({ type: Boolean, default: true }) readonly clearable!: boolean
-  /**
-   * Size of the date picker input
-   * TODO: ask design team
-   * `"medium"` by default
-   */
-  // @Prop({ type: String, default: Size.MEDIUM }) readonly size!: string
   /**
    * Placeholder in non-range mode
    */
@@ -123,12 +118,6 @@ export default class SDatePicker extends Mixins(StandardPropsMixin) {
    * `"left"` is set by default
    */
   @Prop({ type: String, default: PickerAlignment.LEFT }) readonly align!: string
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Custom class name for date picker's dropdown
    */
@@ -217,15 +206,15 @@ export default class SDatePicker extends Mixins(StandardPropsMixin) {
     return !!(this.model && this.placeholder)
   }
 
-  get computedPopperClass (): Array<string> {
+  get computedPopperClass (): string {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
-    return cssClasses
+    return cssClasses.join(' ')
   }
 
   get computedClasses (): Array<string> {
@@ -233,7 +222,7 @@ export default class SDatePicker extends Mixins(StandardPropsMixin) {
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.focused) {
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index f92710c7..ff094302 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -31,11 +31,10 @@
 import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import elementResizeDetectorMaker from 'element-resize-detector'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { BorderRadius } from '../../types'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 
 @Component
-export default class SDialog extends Mixins(StandardPropsMixin) {
+export default class SDialog extends Mixins(BorderRadiusMixin) {
   /**
    * Visibility of the dialog component.
    *
@@ -93,12 +92,6 @@ export default class SDialog extends Mixins(StandardPropsMixin) {
    * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly lockScroll!: boolean
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Custom CSS class for the dialog component
    */
@@ -159,7 +152,7 @@ export default class SDialog extends Mixins(StandardPropsMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.customClass) {
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index 38224f1a..42a8f7be 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -2,7 +2,7 @@
   <el-dropdown
     ref="dropdown"
     :split-button="splitButton"
-    :size="getComponentSize(size)"
+    :size="getComponentSize"
     :class="computedClasses"
     :type="computedType"
     :placement="placement"
@@ -46,11 +46,11 @@
 import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElDropdown } from 'element-ui/types/dropdown'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { ButtonTypes, SButton } from '../Button'
 import { Icons, SIcon } from '../Icon'
 import { STooltip } from '../Tooltip'
-import { Size, BorderRadius } from '../../types'
 import { DropdownType, DropdownPlacement, DropdownTrigger } from './consts'
 
 @Component({
@@ -60,7 +60,7 @@ import { DropdownType, DropdownPlacement, DropdownTrigger } from './consts'
     STooltip
   }
 })
-export default class SDropdown extends Mixins(StandardPropsMixin) {
+export default class SDropdown extends Mixins(SizeMixin, BorderRadiusMixin) {
   readonly DropdownType = DropdownType
   /**
    * A type of the dropdown component. Possible values: `"default"`, `"button"`, `"ellipsis"`.
@@ -81,19 +81,6 @@ export default class SDropdown extends Mixins(StandardPropsMixin) {
    * By default, it's set to `"secondary"`
    */
   @Prop({ type: String, default: ButtonTypes.SECONDARY }) readonly buttonType!: string
-  /**
-   * A size of the dropdown items. Possible values: `"big"`, `"medium"`, `"small"`.
-   * It affects on the button size if `type="button"` as well.
-   *
-   * By default, it's set to `"big"`
-   */
-  @Prop({ type: String, default: Size.BIG }) readonly size!: string
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * A placement of the popup menu. You can use any value from `DropdownPlacement` enum.
    *
@@ -144,7 +131,7 @@ export default class SDropdown extends Mixins(StandardPropsMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
@@ -155,7 +142,7 @@ export default class SDropdown extends Mixins(StandardPropsMixin) {
     if (this.type === DropdownType.ELLIPSIS) {
       cssClasses.push('ellipsis')
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index afd9ec62..730dde91 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -42,12 +42,11 @@ import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decora
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { BorderRadius } from '../../types'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete, InputSize, InputType } from './consts'
 
 @Component
-export default class SInput extends Mixins(StandardPropsMixin) {
+export default class SInput extends Mixins(BorderRadiusMixin) {
   readonly InputType = InputType
   readonly emptyValue = null
   /**
@@ -67,12 +66,6 @@ export default class SInput extends Mixins(StandardPropsMixin) {
    * Disable state
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"mini"`
-   */
-  @Prop({ default: BorderRadius.MINI, type: String }) readonly borderRadius!: string
   /**
    * Show password flag. `false` by default
    */
@@ -189,7 +182,7 @@ export default class SInput extends Mixins(StandardPropsMixin) {
     if (this.disabled || (this.elForm || {}).disabled) {
       cssClasses.push('s-disabled')
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.type === InputType.TEXT_FILE) {
diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue
index 9e1d8202..fefd9b8a 100644
--- a/src/components/Menu/SMenu.vue
+++ b/src/components/Menu/SMenu.vue
@@ -27,12 +27,11 @@
 import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElMenu } from 'element-ui/types/menu'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { BorderRadius } from '../../types'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { MenuMode, MenuTrigger } from './consts'
 
 @Component
-export default class SMenu extends Mixins(StandardPropsMixin) {
+export default class SMenu extends Mixins(BorderRadiusMixin) {
   /**
    * Mode of menu. Possible values: `"horizontal"`, `"vertical"`.
    *
@@ -55,12 +54,6 @@ export default class SMenu extends Mixins(StandardPropsMixin) {
    * Menu shadow if it exists
    */
   @Prop({ default: 'none', type: String }) readonly boxShadow!: string
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Text color of menu in hex format.
    *
@@ -117,7 +110,7 @@ export default class SMenu extends Mixins(StandardPropsMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = ['s-menu']
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 28b3f2bd..bb06f139 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -28,11 +28,10 @@ import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import { ElPagination } from 'element-ui/types/pagination'
 import cloneDeep from 'lodash/fp/cloneDeep'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { BorderRadius } from '../../types'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 
 @Component
-export default class SPagination extends Mixins(StandardPropsMixin) {
+export default class SPagination extends Mixins(BorderRadiusMixin) {
   /**
    * Will pagination component be small.
    *
@@ -45,12 +44,6 @@ export default class SPagination extends Mixins(StandardPropsMixin) {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly background!: boolean
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Items count of each page. It supports the .sync modifier.
    *
@@ -177,20 +170,20 @@ export default class SPagination extends Mixins(StandardPropsMixin) {
     return this.layout.includes('slot')
   }
 
-  get computedPopperClass (): Array<string> {
+  get computedPopperClass (): string {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
-    return cssClasses
+    return cssClasses.join(' ')
   }
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index df4a19bb..c706e329 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -27,13 +27,12 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete } from '../Input'
-import { BorderRadius } from '../../types'
 import { InputTypes } from './consts'
 
 @Component
-export default class SSelect extends Mixins(StandardPropsMixin) {
+export default class SSelect extends Mixins(BorderRadiusMixin) {
   /**
    * Selected value. Can be used with `v-model`
    */
@@ -85,12 +84,6 @@ export default class SSelect extends Mixins(StandardPropsMixin) {
    * `false` by default
    */
   @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Loading state of the select component.
    *
@@ -150,15 +143,15 @@ export default class SSelect extends Mixins(StandardPropsMixin) {
     this.$nextTick(this.updateInputValue)
   }
 
-  get computedPopperClass (): Array<string> {
+  get computedPopperClass (): string {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
-    return cssClasses
+    return cssClasses.join(' ')
   }
 
   get computedClasses (): Array<string> {
@@ -166,7 +159,7 @@ export default class SSelect extends Mixins(StandardPropsMixin) {
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.focused) {
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index 9bdc4727..51cfa17a 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -22,12 +22,11 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { BorderRadius } from '../../types'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TabsType, TabsPosition } from './consts'
 
 @Component
-export default class STabs extends Mixins(StandardPropsMixin) {
+export default class STabs extends Mixins(BorderRadiusMixin) {
   /**
    * Name of the selected tab. Can be used with `v-model`.
    *
@@ -40,12 +39,6 @@ export default class STabs extends Mixins(StandardPropsMixin) {
    * `"rounded"` works only when position is `"top"` or `"bottom"`
    */
   @Prop({ type: String, default: '' }) readonly type!: string
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Will tabs be closable.
    *
@@ -107,7 +100,7 @@ export default class STabs extends Mixins(StandardPropsMixin) {
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     return cssClasses
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 3e91a831..48807ffc 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -27,12 +27,11 @@ import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
-import StandardPropsMixin from '../../mixins/StandardPropsMixin'
-import { BorderRadius } from '../../types'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component
-export default class STooltip extends Mixins(StandardPropsMixin) {
+export default class STooltip extends Mixins(BorderRadiusMixin) {
   /**
    * Theme of the tooltip. Supported values: `"dark"` or `"light"`.
    *
@@ -61,12 +60,6 @@ export default class STooltip extends Mixins(StandardPropsMixin) {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
-  /**
-   * Border radius of button. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
-   *
-   * By default it's set to `"small"`
-   */
-  @Prop({ default: BorderRadius.SMALL, type: String }) readonly borderRadius!: string
   /**
    * Offset of the tooltip.
    *
@@ -115,15 +108,15 @@ export default class STooltip extends Mixins(StandardPropsMixin) {
 
   @Ref('tooltip') tooltip!: any
 
-  get computedPopperClass (): Array<string> {
+  get computedPopperClass (): string {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
-    if (this.isStandardBorderRadius(this.borderRadius)) {
+    if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
-    return cssClasses
+    return cssClasses.join(' ')
   }
 
   model = this.value
diff --git a/src/mixins/BorderRadiusMixin.ts b/src/mixins/BorderRadiusMixin.ts
new file mode 100644
index 00000000..7249934f
--- /dev/null
+++ b/src/mixins/BorderRadiusMixin.ts
@@ -0,0 +1,16 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { BorderRadius } from '../types'
+
+@Component
+export default class BorderRadiusMixin extends Vue {
+  /**
+   * Border radius of component. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL }) borderRadius!: any
+
+  get isStandardBorderRadius (): boolean {
+    return (Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)
+  }
+}
diff --git a/src/mixins/SizeMixin.ts b/src/mixins/SizeMixin.ts
new file mode 100644
index 00000000..73c98db1
--- /dev/null
+++ b/src/mixins/SizeMixin.ts
@@ -0,0 +1,23 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Size } from '../types'
+
+@Component
+export default class SizeMixin extends Vue {
+  /**
+   * Size of component. Possible values: `"big"`, `"medium"`, `"small"`.
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: Size.MEDIUM }) readonly size!: any
+
+  get isStandardSize (): boolean {
+    return (Object.values(Size) as Array<string>).includes(this.size)
+  }
+
+  get getComponentSize (): Size | string {
+    if (this.size === Size.BIG || !this.isStandardSize) {
+      return ''
+    }
+    return this.size
+  }
+}
diff --git a/src/mixins/StandardPropsMixin.ts b/src/mixins/StandardPropsMixin.ts
deleted file mode 100644
index 227ce723..00000000
--- a/src/mixins/StandardPropsMixin.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Vue, Component } from 'vue-property-decorator'
-import { Size, BorderRadius } from '../types'
-
-@Component
-export default class StandardPropsMixin extends Vue {
-  isStandardSize (size: string): boolean {
-    return (Object.values(Size) as Array<string>).includes(size)
-  }
-
-  getComponentSize (size: string): string {
-    if (size === Size.BIG || !this.isStandardSize(size)) {
-      return ''
-    }
-    return size
-  }
-
-  isStandardBorderRadius (borderRadius: string): boolean {
-    return (Object.values(BorderRadius) as Array<string>).includes(borderRadius)
-  }
-}

From d04762e3de7905f453d7eaa1897380b4589f9777 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 17 Nov 2020 13:57:27 +0300
Subject: [PATCH 19/22] Refactored components size settings.

---
 src/components/Radio/SRadio.vue      | 14 ++++----------
 src/components/Radio/SRadioGroup.vue | 14 ++++----------
 src/components/Radio/consts.ts       |  3 ---
 src/components/Radio/index.ts        |  3 +--
 src/components/Table/STable.vue      | 15 +++++----------
 src/components/Table/consts.ts       |  2 --
 src/components/Table/index.ts        |  5 ++---
 src/stories/SRadio.stories.ts        |  6 +++---
 src/stories/Table/STable.stories.ts  |  4 ++--
 9 files changed, 21 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/Radio/consts.ts

diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index d30b2246..ff62d7d5 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { RadioSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Vue {
+export default class SRadio extends Mixins(SizeMixin) {
   /**
    * Binding value of the radio component. Can be `string` / `number` / `boolean`
    */
@@ -56,12 +56,6 @@ export default class SRadio extends Vue {
    * Native name property
    */
   @Prop({ default: '', type: String }) readonly name!: string
-  /**
-   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
 
   model = this.value
 
@@ -78,7 +72,7 @@ export default class SRadio extends Vue {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(RadioSize) as Array<string>).includes(this.size)) {
+    if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
     return cssClasses
diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup.vue
index 93382e17..6ee68138 100644
--- a/src/components/Radio/SRadioGroup.vue
+++ b/src/components/Radio/SRadioGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <el-radio-group
     v-model="model"
-    :size="size"
+    :size="getComponentSize"
     :disabled="disabled"
   >
     <slot></slot>
@@ -9,22 +9,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { RadioSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Vue {
+export default class SRadio extends Mixins(SizeMixin) {
   /**
    * Binding value of the radio group. Can be `string` / `number` / `boolean`
    */
   @Prop() readonly value!: string | number | boolean
-  /**
-   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Whether the nesting radios are disabled.
    */
diff --git a/src/components/Radio/consts.ts b/src/components/Radio/consts.ts
deleted file mode 100644
index 63f35931..00000000
--- a/src/components/Radio/consts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Size } from '../../types'
-
-export const RadioSize = Size
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
index 9392d611..4448645d 100644
--- a/src/components/Radio/index.ts
+++ b/src/components/Radio/index.ts
@@ -1,5 +1,4 @@
 import SRadio from './SRadio.vue'
 import SRadioGroup from './SRadioGroup.vue'
-import { RadioSize } from './consts'
 
-export { SRadio, SRadioGroup, RadioSize }
+export { SRadio, SRadioGroup }
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index f59493f3..8b7a75b9 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -6,7 +6,7 @@
     :max-height="maxHeight"
     :stripe="stripe"
     :border="border"
-    :size="size"
+    :size="getComponentSize"
     :fit="fit"
     :show-header="showHeader"
     :highlight-current-row="highlightCurrentRow"
@@ -58,15 +58,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 import { ElTableColumn } from 'element-ui/types/table-column'
 
+import SizeMixin from '../../mixins/SizeMixin'
 import { TooltipTheme } from '../Tooltip'
-import { TableSize, SortDirection } from './consts'
+import { SortDirection } from './consts'
 
 @Component
-export default class STable extends Vue {
+export default class STable extends Mixins(SizeMixin) {
   /**
    * Data of the table.
    *
@@ -97,12 +98,6 @@ export default class STable extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly border!: boolean
-  /**
-   * Table's size attribute.
-   *
-   * `"big"` by default
-   */
-  @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
   /**
    * Will width of column automatically be fit its container.
    *
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index bb5ff572..93104b42 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,4 +1,3 @@
-import { Size } from '../../types'
 import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {
@@ -23,5 +22,4 @@ export enum ColumnAlignment {
   RIGHT = 'right'
 }
 
-export const TableSize = Size
 export const ColumnFilterPlacement = TooltipPlacement
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 2a46f9ea..1c87173f 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -1,6 +1,6 @@
 import STable from './STable.vue'
 import STableColumn from './STableColumn.vue'
-import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection, TableSize } from './consts'
+import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection } from './consts'
 
 export {
   STable,
@@ -8,6 +8,5 @@ export {
   ColumnAlignment,
   ColumnFixedPosition,
   ColumnType,
-  SortDirection,
-  TableSize
+  SortDirection
 }
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index 15a21449..226c63de 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -1,7 +1,7 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SRadio, SRadioGroup, SRow, SCol } from '../components'
-import { RadioSize } from '../components/Radio'
+import { Size } from '../types'
 
 export default {
   component: SRadio,
@@ -41,7 +41,7 @@ export const configurable = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
@@ -115,7 +115,7 @@ export const radioButtonGroup = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 4814232f..4209c7c8 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { STable, STableColumn } from '../../components'
-import { TableSize } from '../../components/Table'
+import { Size } from '../../types'
 
 export default {
   component: STable,
@@ -72,7 +72,7 @@ export const configurable = () => ({
       default: boolean('Show header', true)
     },
     size: {
-      default: select('Size', Object.values(TableSize), TableSize.BIG)
+      default: select('Size', Object.values(Size), Size.BIG)
     },
     highlightCurrentRow: {
       default: boolean('Highlight current row', false)

From 6500cc164b910da1a4f87306a2b2f311d34fe691 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Tue, 17 Nov 2020 14:01:03 +0300
Subject: [PATCH 20/22] Added TODO for Form and FormItem components.

---
 src/components/Form/SForm.vue     | 1 +
 src/components/Form/SFormItem.vue | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/SForm.vue b/src/components/Form/SForm.vue
index b9ca19e3..fd269a9f 100644
--- a/src/components/Form/SForm.vue
+++ b/src/components/Form/SForm.vue
@@ -81,6 +81,7 @@ export default class SForm extends Vue {
   /**
    * Size of form items. Possible values: `"big"`, `"medium"`, `"small"`
    */
+  // TODO: play with Form size setting
   @Prop({ type: String }) readonly size!: string
   /**
    * Disabled form state. You can disable all form's elements using this property.
diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index 90a18bc1..d6e34373 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -73,7 +73,8 @@ export default class SFormItem extends Vue {
   /**
    * Size of form items. Possible values: `"big"`, `"medium"`, `"small"`
    */
-  @Prop({ type: String }) readonly size!: string // TODO: think about size for all items, not only for button
+  // TODO: think about size for all items, not only for button
+  @Prop({ type: String }) readonly size!: string
 
   @Ref('formItem') formItem!: ElFormItem
 

From ab5c40a96fb4f4366a395c825c17a1281338e151 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 18 Nov 2020 13:13:27 +0300
Subject: [PATCH 21/22] Refactored some types and names.

---
 src/components/Button/SButton.vue     | 2 +-
 src/components/Checkbox/SCheckbox.vue | 2 +-
 src/components/Dropdown/SDropdown.vue | 2 +-
 src/components/Radio/SRadioGroup.vue  | 2 +-
 src/components/Table/STable.vue       | 2 +-
 src/mixins/BorderRadiusMixin.ts       | 2 +-
 src/mixins/SizeMixin.ts               | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index db8e2d9b..e2cecedc 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -3,7 +3,7 @@
     <el-button
       :type="computedType"
       :native-type="nativeType"
-      :size="getComponentSize"
+      :size="computedSize"
       :class="computedClasses"
       :style="computedStyles"
       :disabled="disabled"
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index 72082224..6e25e862 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -6,7 +6,7 @@
     :disabled="disabled"
     :border="border"
     :checked="checked"
-    :size="getComponentSize"
+    :size="computedSize"
     :name="name"
     :indeterminate="indeterminate"
     @change="handleChange"
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index 42a8f7be..15ce5173 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -2,7 +2,7 @@
   <el-dropdown
     ref="dropdown"
     :split-button="splitButton"
-    :size="getComponentSize"
+    :size="computedSize"
     :class="computedClasses"
     :type="computedType"
     :placement="placement"
diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup.vue
index 6ee68138..36f0ace0 100644
--- a/src/components/Radio/SRadioGroup.vue
+++ b/src/components/Radio/SRadioGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <el-radio-group
     v-model="model"
-    :size="getComponentSize"
+    :size="computedSize"
     :disabled="disabled"
   >
     <slot></slot>
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 8b7a75b9..1f6410a2 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -6,7 +6,7 @@
     :max-height="maxHeight"
     :stripe="stripe"
     :border="border"
-    :size="getComponentSize"
+    :size="computedSize"
     :fit="fit"
     :show-header="showHeader"
     :highlight-current-row="highlightCurrentRow"
diff --git a/src/mixins/BorderRadiusMixin.ts b/src/mixins/BorderRadiusMixin.ts
index 7249934f..8703a66e 100644
--- a/src/mixins/BorderRadiusMixin.ts
+++ b/src/mixins/BorderRadiusMixin.ts
@@ -8,7 +8,7 @@ export default class BorderRadiusMixin extends Vue {
    *
    * By default it's set to `"small"`
    */
-  @Prop({ default: BorderRadius.SMALL }) borderRadius!: any
+  @Prop({ default: BorderRadius.SMALL }) borderRadius!: string
 
   get isStandardBorderRadius (): boolean {
     return (Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)
diff --git a/src/mixins/SizeMixin.ts b/src/mixins/SizeMixin.ts
index 73c98db1..fdacc3a6 100644
--- a/src/mixins/SizeMixin.ts
+++ b/src/mixins/SizeMixin.ts
@@ -8,13 +8,13 @@ export default class SizeMixin extends Vue {
    *
    * By default it's set to `"medium"`
    */
-  @Prop({ default: Size.MEDIUM }) readonly size!: any
+  @Prop({ default: Size.MEDIUM }) readonly size!: string
 
   get isStandardSize (): boolean {
     return (Object.values(Size) as Array<string>).includes(this.size)
   }
 
-  get getComponentSize (): Size | string {
+  get computedSize (): Size | string {
     if (this.size === Size.BIG || !this.isStandardSize) {
       return ''
     }

From af20e1835e0aac992dc476b98f8e9bd78bc68cc5 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 18 Nov 2020 13:48:01 +0300
Subject: [PATCH 22/22] Add size css var-s

---
 src/styles/variables.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a0f4f7cf..f98e6898 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -121,6 +121,11 @@ $--breakpoints-spec: (
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  // Size
+  --s-size-mini: #{$s-size-mini};
+  --s-size-small: #{$s-size-small};
+  --s-size-medium: #{$s-size-medium};
+  --s-size-big: #{$s-size-big};
   // Border Radius
   --s-border-radius-mini: #{$s-border-radius-mini};
   --s-border-radius-small: #{$s-border-radius-small};