Border Radius Configuration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/Button/SButton.vue

@@ -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 SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { SIcon } from '../Icon'
 import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonNativeTypes } from './consts'
 
 @Component({
   components: { SIcon, STooltip }
 })
-export default class SButton extends Vue {
+export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
   readonly ButtonTypes = ButtonTypes
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
@@ -46,12 +48,6 @@ export default class SButton extends Vue {
    * 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: ButtonSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Icon name from icon collection of this library
    */
@@ -105,14 +101,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 computedType (): string {
     if (this.type === ButtonTypes.PRIMARY) {
       return this.type
@@ -124,9 +112,12 @@ 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) {
       cssClasses.push(`s-${this.size}`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
       cssClasses.push(`s-${this.type}`)
     }

src/components/Button/consts.ts

@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum ButtonTypes {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
@@ -13,5 +11,3 @@ export enum ButtonNativeTypes {
   SUBMIT = 'submit',
   RESET = 'reset'
 }
-
-export const ButtonSize = Size

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, ButtonNativeTypes } from './consts'
 
-export { SButton, SButtonGroup, ButtonTypes, ButtonSize, ButtonNativeTypes }
+export { SButton, SButtonGroup, ButtonTypes, ButtonNativeTypes }

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"
@@ -12,12 +12,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { CardShadow } from './consts'
 
 @Component
-export default class SCard extends Vue {
+export default class SCard extends Mixins(BorderRadiusMixin) {
   /**
    * Header of the card. Also it can be set by slot#header
    */
@@ -41,6 +42,17 @@ export default class SCard extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    if (this.clickable) {
+      cssClasses.push('s-clickable')
+    }
+    return cssClasses
+  }
+
   handleClick (): void {
     if (!this.clickable) {
       return

src/components/Checkbox/SCheckbox.vue

@@ -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 } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 
 @Component
-export default class SCheckbox extends Vue {
+export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Value of the checkbox item. Can be `string / number / boolean`
    */
@@ -48,12 +49,6 @@ export default class SCheckbox extends Vue {
    * `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: CheckboxSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Native name property of the checkbox item
    */
@@ -77,19 +72,14 @@ 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 computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
+    if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     return cssClasses
   }
 

src/components/Checkbox/index.ts

@@ -1,4 +1,3 @@
 import SCheckbox from './SCheckbox.vue'
-import { CheckboxSize } from './consts'
 
-export { SCheckbox, CheckboxSize }
+export { SCheckbox }

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"
@@ -35,12 +35,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 { PickerTypes, PickerSize, PickerAlignment, InputTypes } from './consts'
+// 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 Vue {
+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
@@ -91,12 +94,6 @@ export default class SDatePicker extends Vue {
    * `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: PickerSize.MEDIUM }) readonly size!: string
   /**
    * Placeholder in non-range mode
    */
@@ -209,11 +206,25 @@ export default class SDatePicker extends Vue {
     return !!(this.model && this.placeholder)
   }
 
-  get computedClasses (): Array<string> {
+  get computedPopperClass (): string {
     const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
+  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 (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }

src/components/DatePicker/consts.ts

@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum PickerTypes {
   YEAR = 'year',
   MONTH = 'month',
@@ -22,5 +20,3 @@ export enum InputTypes {
   INPUT = 'input',
   SELECT = 'select'
 }
-
-export const PickerSize = Size

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
 }

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"
@@ -28,11 +28,13 @@
 </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 BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+
 @Component
-export default class SDialog extends Vue {
+export default class SDialog extends Mixins(BorderRadiusMixin) {
   /**
    * Visibility of the dialog component.
    *
@@ -148,6 +150,17 @@ export default class SDialog extends Vue {
     this.$emit('update:visible', value)
   }
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      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