From e92b3fb6283246930658d0612da0846b2fc0438a Mon Sep 17 00:00:00 2001 From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com> Date: Mon, 31 May 2021 16:51:32 +0300 Subject: [PATCH 1/5] Neomorphism. Button. (#205) * add color variables * add provide inject components * fix inject design system * add primary secondary tertiary styles * add action and alternative states * remove duplicated styles * fefactoring neo css vars usage * fix ln * fix export * fix config * remove console.log * rename neo to neu * Neumorphism/input (#206) * wip neumorphic input * add neu input styles & refactoring * fix file input * export setDesignTheme --- build/rollup.config.js | 5 +- package.json | 4 +- src/components/Button/SButton.vue | 6 +- .../DesignSystem/DesignSystemInject.ts | 13 + .../DesignSystem/SDesignSystemProvider.vue | 24 ++ src/components/DesignSystem/consts.ts | 6 + src/components/DesignSystem/index.ts | 9 + src/components/Input/SInput.vue | 91 ++++--- src/components/index.ts | 2 + src/index.ts | 10 +- src/store/Theme.ts | 16 +- src/stories/SButton.stories.ts | 49 ++-- src/stories/SFloatInput.stories.ts | 17 +- src/stories/SInput.stories.ts | 32 ++- src/styles/index.scss | 1 + src/styles/input.scss | 214 +++++++++------- src/styles/neumorphism/button.scss | 237 ++++++++++++++++++ src/styles/neumorphism/index.scss | 3 + src/styles/neumorphism/input.scss | 49 ++++ src/styles/neumorphism/variables.scss | 70 ++++++ src/types/components.ts | 1 + src/utils/DesignSystem.ts | 4 + src/utils/index.ts | 4 + yarn.lock | 8 +- 24 files changed, 709 insertions(+), 166 deletions(-) create mode 100644 src/components/DesignSystem/DesignSystemInject.ts create mode 100644 src/components/DesignSystem/SDesignSystemProvider.vue create mode 100644 src/components/DesignSystem/consts.ts create mode 100644 src/components/DesignSystem/index.ts create mode 100644 src/styles/neumorphism/button.scss create mode 100644 src/styles/neumorphism/index.scss create mode 100644 src/styles/neumorphism/input.scss create mode 100644 src/styles/neumorphism/variables.scss create mode 100644 src/utils/DesignSystem.ts diff --git a/build/rollup.config.js b/build/rollup.config.js index aa95fda3..2d7a79bc 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -33,7 +33,7 @@ export default { targets: [ { src: 'src/assets/*', dest: 'lib/assets' }, { - src: 'src/styles/*', + src: 'src/styles/*.scss', dest: 'lib/styles', // Replace all imports for scss files which will be used as theming files transform: (content) => { @@ -43,7 +43,8 @@ export default { .replace('../../node_modules/element-ui/packages/theme-chalk/src/index', './element-ui/index') } }, - { src: 'node_modules/element-ui/packages/theme-chalk/src/*', dest: 'lib/styles/element-ui' } + { src: 'node_modules/element-ui/packages/theme-chalk/src/*', dest: 'lib/styles/element-ui' }, + { src: 'src/styles/neumorphism/*', dest: 'lib/styles/neumorphism' } ] }), typescript({ diff --git a/package.json b/package.json index 6e8bcc79..23486122 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.8.9", + "version": "0.9.0", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" @@ -71,7 +71,7 @@ "postcss": "^8.2.10", "rollup": "^1.27.8", "rollup-plugin-commonjs": "^10.1.0", - "rollup-plugin-copy": "^3.3.0", + "rollup-plugin-copy": "^3.4.0", "rollup-plugin-delete": "^1.1.0", "rollup-plugin-scss": "^2.5.0", "rollup-plugin-terser": "^5.1.2", diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 7d971e2a..b4d15841 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -26,6 +26,7 @@ import { ElForm } from 'element-ui/types/form' import { ElFormItem } from 'element-ui/types/form-item' import { PopoverPlacement } from 'element-ui/types/popover' +import { DesignSystemInject } from '../DesignSystem' import SizeMixin from '../../mixins/SizeMixin' import BorderRadiusMixin from '../../mixins/BorderRadiusMixin' import { SIcon } from '../Icon' @@ -35,7 +36,7 @@ import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts' @Component({ components: { SIcon, STooltip } }) -export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) { +export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, DesignSystemInject) { readonly IconPosition = ButtonIconPosition readonly ButtonTypes = ButtonTypes /** @@ -119,6 +120,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) { get computedClasses (): Array { const cssClasses: Array = [] + if (this.designSystemClass) { + cssClasses.push(this.designSystemClass) + } if ((this.elForm || this.elFormItem || {}).size) { cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`) } else if (this.isStandardSize) { diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts new file mode 100644 index 00000000..9b276cee --- /dev/null +++ b/src/components/DesignSystem/DesignSystemInject.ts @@ -0,0 +1,13 @@ +import { Component, Vue, Inject, Prop } from 'vue-property-decorator' +import { DesignSystemProvideKey } from './consts' +import { DesignSystemTypes } from '../../utils/DesignSystem' + +@Component +export default class DesignSystemInject extends Vue { + @Prop({ default: true, type: Boolean }) readonly useDesignSystem!: boolean + @Inject({ from: DesignSystemProvideKey, default: DesignSystemTypes.DEFAULT }) readonly designSystem!: any + + get designSystemClass (): string { + return this.useDesignSystem ? this.designSystem.value : '' + } +} diff --git a/src/components/DesignSystem/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider.vue new file mode 100644 index 00000000..a6922930 --- /dev/null +++ b/src/components/DesignSystem/SDesignSystemProvider.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/src/components/DesignSystem/consts.ts b/src/components/DesignSystem/consts.ts new file mode 100644 index 00000000..8b8a958c --- /dev/null +++ b/src/components/DesignSystem/consts.ts @@ -0,0 +1,6 @@ +export const DesignSystemProvideKey = 'designSystem' + +export enum DesignSystemTypes { + DEFAULT = '', + NEUMORPHIC = 'neumorphic' +} diff --git a/src/components/DesignSystem/index.ts b/src/components/DesignSystem/index.ts new file mode 100644 index 00000000..32bb8ea2 --- /dev/null +++ b/src/components/DesignSystem/index.ts @@ -0,0 +1,9 @@ +import SDesignSystemProvider from './SDesignSystemProvider.vue' +import DesignSystemInject from './DesignSystemInject' +import { DesignSystemProvideKey } from './consts' + +export { + SDesignSystemProvider, + DesignSystemProvideKey, + DesignSystemInject +} diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue index e80d1ffd..9efb076e 100644 --- a/src/components/Input/SInput.vue +++ b/src/components/Input/SInput.vue @@ -3,40 +3,51 @@ class="s-input" :class="computedClasses" > - {{ placeholder }} - - - - + + +
+ + +
+ {{ placeholder }} + + + + +
+ +
+ + @@ -46,13 +57,14 @@ import { ElInput } from 'element-ui/types/input' import { ElForm } from 'element-ui/types/form' import { SIcon } from '../Icon' +import { DesignSystemInject } from '../DesignSystem' import BorderRadiusMixin from '../../mixins/BorderRadiusMixin' import { Autocomplete, InputSize, InputType } from './consts' @Component({ components: { SIcon } }) -export default class SInput extends Mixins(BorderRadiusMixin) { +export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject) { readonly InputType = InputType readonly emptyValue = null /** @@ -170,6 +182,9 @@ export default class SInput extends Mixins(BorderRadiusMixin) { get computedClasses (): Array { const cssClasses: Array = [] + if (this.designSystemClass) { + cssClasses.push(this.designSystemClass) + } if (this.focused) { cssClasses.push('s-focused') } @@ -191,6 +206,12 @@ export default class SInput extends Mixins(BorderRadiusMixin) { if (this.size) { cssClasses.push(this.sizeClass) } + if (this.prefix) { + cssClasses.push('s-input--prefix') + } + if (this.suffix) { + cssClasses.push('s-input--suffix') + } return cssClasses } diff --git a/src/components/index.ts b/src/components/index.ts index ec7cbf6d..b2f4448c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -12,6 +12,7 @@ import { SCol } from './Layout/Col' import { SCollapse, SCollapseItem } from './Collapse' import { SContainer } from './Layout/Container' import { SDatePicker } from './DatePicker' +import { SDesignSystemProvider } from './DesignSystem' import { SDialog } from './Dialog' import { SDivider } from './Divider' import { SDropdown, SDropdownItem } from './Dropdown' @@ -47,6 +48,7 @@ export { SCollapseItem, SContainer, SDatePicker, + SDesignSystemProvider, SDialog, SDivider, SDropdown, diff --git a/src/index.ts b/src/index.ts index 8f4cf815..9f43d725 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,6 +14,7 @@ import { SCollapseItem, SContainer, SDatePicker, + SDesignSystemProvider, SDialog, SDivider, SDropdown, @@ -53,7 +54,9 @@ import { Float, Integer } from './directives' import { Components } from './types/components' import { Directives } from './types/directives' import { modules, Modules } from './store' -import { setTheme } from './utils' +import { setTheme, setDesignSystem } from './utils' +import { DesignSystemTypes } from './utils/DesignSystem' +import { Themes } from './utils/Theme' import { Loading, Message, MessageBox, Notification } from './plugins/elementUI' import { SDialogMixin } from './mixins' @@ -71,6 +74,7 @@ const components = [ { component: SCollapseItem, name: Components.SCollapseItem }, { component: SContainer, name: Components.SContainer }, { component: SDatePicker, name: Components.SDatePicker }, + { component: SDesignSystemProvider, name: Components.SDesignSystemProvider }, { component: SDialog, name: Components.SDialog }, { component: SDivider, name: Components.SDivider }, { component: SDropdown, name: Components.SDropdown }, @@ -131,6 +135,9 @@ if (typeof window !== 'undefined' && window.Vue) { export { setTheme, + Themes, + setDesignSystem, + DesignSystemTypes, Loading, Message, MessageBox, @@ -148,6 +155,7 @@ export { SCollapseItem, SContainer, SDatePicker, + SDesignSystemProvider, SDialog, SDivider, SDropdown, diff --git a/src/store/Theme.ts b/src/store/Theme.ts index 0e0ccf66..b30acf28 100644 --- a/src/store/Theme.ts +++ b/src/store/Theme.ts @@ -5,11 +5,13 @@ import flow from 'lodash/fp/flow' import concat from 'lodash/fp/concat' import { Theme, Themes } from '../utils/Theme' +import { DesignSystemTypes } from '../utils/DesignSystem' const types = flow( flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']), concat([ - 'CHANGE_THEME' + 'CHANGE_THEME', + 'SET_DESIGN_SYSTEM' ]), map(x => [x, x]), fromPairs @@ -17,7 +19,8 @@ const types = flow( function initialState () { return { - theme: Themes.LIGHT + theme: Themes.LIGHT, + designSystem: DesignSystemTypes.DEFAULT } } @@ -26,18 +29,27 @@ const state = initialState() const getters = { libraryTheme (state) { return state.theme + }, + libraryDesignSystem (state) { + return state.designSystem } } const mutations = { [types.CHANGE_THEME] (state, theme: Theme) { state.theme = theme + }, + [types.SET_DESIGN_SYSTEM] (state, designSystem: DesignSystemTypes) { + state.designSystem = designSystem } } const actions = { changeTheme ({ commit }, { theme }) { commit(types.CHANGE_THEME, theme) + }, + setDesignSystem ({ commit }, designSystem: DesignSystemTypes) { + commit(types.SET_DESIGN_SYSTEM, designSystem) } } diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 6b90d8c3..e38ebff7 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,8 +1,9 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain, SDesignSystemProvider } from '../components' import { Size, BorderRadius } from '../types' import { ButtonTypes, ButtonIconPosition } from '../components/Button' +import { DesignSystemTypes } from '../utils/DesignSystem' export default { component: SButton, @@ -12,22 +13,28 @@ export default { } export const configurable = () => ({ - components: { SButton }, - template: ` + + > {{ type !== 'action' ? 'Default' : '' }} - `, + + `, props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, disabled: { default: boolean('Disabled', false) }, @@ -70,19 +77,25 @@ export const differentTypeButtonsData = Object.values(ButtonTypes).map(type => { return data }) export const withDifferentTypes = () => ({ - components: { SButton, SRow }, - template: ` - - {{ item.label }} - - `, + components: { SButton, SRow, SDesignSystemProvider }, + template: ` + + + + {{ item.label }} + + + `, props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, items: { default: () => differentTypeButtonsData } diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts index 7c0234d8..13309571 100644 --- a/src/stories/SFloatInput.stories.ts +++ b/src/stories/SFloatInput.stories.ts @@ -1,6 +1,7 @@ -import { number, text, boolean, object, withKnobs } from '@storybook/addon-knobs' +import { number, text, boolean, object, select, withKnobs } from '@storybook/addon-knobs' -import { SFloatInput, SRow } from '../components' +import { SFloatInput, SRow, SDesignSystemProvider } from '../components' +import { DesignSystemTypes } from '../utils/DesignSystem' export default { component: SFloatInput, @@ -9,8 +10,10 @@ export default { } export const configurable = () => ({ - components: { SFloatInput, SRow }, - template: ` + components: { SFloatInput, SRow, SDesignSystemProvider }, + template: ` + + ({ :delimiters="delimiters" :max="max" /> - `, + + `, data: () => ({ model: '' }), props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, decimals: { default: number('Decimals', 18) }, diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts index 8e394b96..29981c57 100644 --- a/src/stories/SInput.stories.ts +++ b/src/stories/SInput.stories.ts @@ -1,8 +1,9 @@ import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs' -import { SInput, SRow, SCol } from '../components' +import { SInput, SRow, SCol, SDesignSystemProvider } from '../components' import { BorderRadius } from '../types' import { InputType, InputSize } from '../components/Input' +import { DesignSystemTypes } from '../utils/DesignSystem' export default { component: SInput, @@ -12,8 +13,10 @@ export default { } export const configurable = () => ({ - components: { SInput }, - template: ` + ({ :size="size" :prefix="prefix" :suffix="suffix" - />`, + > +
{{ top }}
+
{{ bottom }}
+
{{ left }}
+
{{ right }}
+ + `, data: () => ({ input: '' }), props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, + top: { + default: text('Top slot content', '') + }, + bottom: { + default: text('Bottom slot content', '') + }, + left: { + default: text('Left slot content', '') + }, + right: { + default: text('Right slot content', '') + }, type: { default: select('Type', Object.values(InputType), InputType.TEXT) }, diff --git a/src/styles/index.scss b/src/styles/index.scss index 93009ec5..c3775b6d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ +@import "./neumorphism/index.scss"; @import "./variables"; @import "./element-variables"; @import "./common"; diff --git a/src/styles/input.scss b/src/styles/input.scss index 35cf091b..626971f0 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss @@ -4,117 +4,157 @@ ) { &.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; - } - } + border-radius: $border-radius; } } } +$input-icon-width: 18px; +$input-border-width: 1px; +$input-padding-top: $s-padding-input / 2 - $input-border-width; +$input-padding-left: $s-padding-input - $input-border-width; + .s-input { + display: flex; + flex-direction: column; + justify-content: center; + + background-color: var(--s-color-base-background); + border-color: var(--s-color-base-background); + border-style: solid; + border-width: $input-border-width; font-family: $s-font-family-default; - width: 100%; min-height: $s-size-big; + padding: $input-padding-top $input-padding-left; position: relative; + width: 100%; + @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; + + &__content { + display: flex; + align-items: center; + width: 100%; } + + &__input { + flex: 1; + position: relative; + } + + &.s-size-medium { + min-height: $s-size-medium; + } + .s-placeholder { // TODO: add default animation from material-ui color: var(--s-color-base-content-tertiary); text-align: left; font-size: var(--s-font-size-mini); - padding: 0 15px; - padding-top: 5px; - top: 1px; - left: 1px; - position: absolute; + line-height: 1.5; z-index: 1; - width: calc(100% - 15px); - background-color: var(--s-color-base-background); pointer-events: none; - } - .el-input, - .el-textarea { - height: 100%; - > input, - > textarea { - height: $s-size-big; - border: 1px solid var(--s-color-base-background); - background-color: var(--s-color-base-background); - &::placeholder { - color: var(--s-color-base-content-tertiary); - opacity: 1; // Firefox + position: absolute; + top: -3px; + + & + .el-input, & + .el-textarea { + padding-top: $s-padding-input; + + .el-input__validateIcon { + padding-top: 11px; } } - > textarea { - padding-top: 12px; - } - [class^="el-input__count"] { - background-color: transparent; - } } + &:hover { - .s-placeholder, - .el-input > input, - .el-textarea > textarea { - background-color: var(--s-color-base-background-hover); - } - .el-input > input, - .el-textarea > textarea { - border-color: var(--s-color-base-background-hover); - } + background-color: var(--s-color-base-background-hover); + border-color: var(--s-color-base-background-hover); } - &.s-size-medium { - min-height: $s-size-medium; - .el-input, - .el-textarea { - height: 100%; - > input, - > textarea { - height: $s-size-medium; - } - } - } &.s-focused { - .s-placeholder, - .el-input > input, - .el-textarea > textarea { - background-color: var(--s-color-utility-surface); - } - .el-input > input, - .el-textarea > textarea { - border-color: var(--s-color-base-border-primary); - } + background-color: var(--s-color-utility-surface); + border-color: var(--s-color-base-border-primary); } + &.s-disabled { - .s-placeholder, - .el-input > input, - .el-textarea > textarea { + color: var(--s-color-base-content-quaternary); + background-color: var(--s-color-base-disabled); + border-color: var(--s-color-base-disabled); + + .s-placeholder { color: var(--s-color-base-content-quaternary); - background-color: var(--s-color-base-disabled); } - .el-input > input, - .el-textarea > textarea { - border-color: var(--s-color-base-disabled); + } + + &--prefix:not(.s-textarea) { + .s-placeholder { + padding-left: $input-icon-width + $s-padding-input / 2; } } - &:not(.s-textarea) { + + &--suffix:not(.s-textarea) { .s-placeholder { - background-color: transparent !important; + padding-right: $input-icon-width + $s-padding-input / 2; + } + } + + .el-input, .el-textarea { + font-size: inherit; + position: unset; + + [class^="el-input__count"] { + background-color: transparent; + } + + &.is-disabled { + .el-input__inner { + background-color: transparent; + color: inherit; + } + } + + &__inner { + height: auto; + line-height: 1.5; + border: none; + border-radius: 0; + background-color: transparent; + padding: 0; + text-align: left; + + &::placeholder { + color: var(--s-color-base-content-tertiary); + opacity: 1; // Firefox + } + } + + &__icon { + line-height: 1; + width: $input-icon-width; + } + + &__prefix { + z-index: 1; + left: 0; + } + + &__suffix { + z-index: 1; + right: 0; + } + + &--prefix { + .el-input__inner { + padding-left: $input-icon-width + $s-padding-input / 2; + } + } + &--suffix { + .el-input__inner { + padding-right: $input-icon-width + $s-padding-input / 2; + } } } .el-input > input { @@ -132,27 +172,17 @@ animation-name: onAutoFillCancel; } } - .s-placeholder + .el-input { - > input { - padding-top: 12px; - } - .el-input__validateIcon { - padding-top: 11px; - } - } - .s-placeholder + .el-textarea > textarea { - padding-top: 24px; - } + &.s-text-file { .el-input > input { padding-right: 56px; } .s-icon-file-file-upload-24 { - top: 16px; - right: 16px; + right: 0; font-size: var(--s-icon-font-size-big); - z-index: 1; + z-index: 2; position: absolute; + cursor: pointer; + input { cursor: pointer; position: absolute; @@ -161,7 +191,7 @@ right: 0; width: 56px; height: 100%; - z-index: 2; + z-index: 1; } } } diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss new file mode 100644 index 00000000..c781ddf2 --- /dev/null +++ b/src/styles/neumorphism/button.scss @@ -0,0 +1,237 @@ +// Neu button common variables +$neu-button-border-width: 2px !default; +$neu-button-border-style: solid !default; +$neu-button-transition: all 0.25s ease-in-out !default; + +$neu-button-background-color-disabled: var(--neu-color-utility-surface) !default; +$neu-button-border-color-disabled: var(--neu-color-utility-body) !default; +$neu-button-box-shadow-disabled: -1px -1px 5px rgba(255, 255, 255, 0.6) !default; +$neu-button-text-color-disabled: var(--neu-color-base-content-tertiary) !default; + +// Primary button: common +$neu-button-primary-border-width: $neu-button-border-width !default; +$neu-button-primary-border-width-alternative: 0px !default; +$neu-button-primary-border-style: $neu-button-border-style !default; +// Primary button: background colors +$neu-button-primary-background-color: var(--neu-color-theme-accent) !default; +$neu-button-primary-background-color-hover: var(--neu-color-theme-accent-hover) !default; +$neu-button-primary-background-color-pressed: var(--neu-color-theme-accent-pressed) !default; +$neu-button-primary-background-color-alternative: var(--neu-color-theme-secondary) !default; +$neu-button-primary-background-color-alternative-active: var(--neu-color-theme-secondary-hover) !default; +// Primary button: text colors +$neu-button-primary-text-color: var(--neu-color-base-on-accent) !default; +$neu-button-primary-text-color-hover: $neu-button-primary-text-color !default; +$neu-button-primary-text-color-pressed: $neu-button-primary-text-color !default; +// Primary button: border colors +$neu-button-primary-border-color: var(--neu-color-base-border-secondary) !default; +$neu-button-primary-border-color-hover: var(--neu-color-utility-surface) !default; +$neu-button-primary-border-color-pressed: $neu-button-primary-border-color-hover !default; +// Primary button: box-shadow +$neu-button-primary-box-shadow: 1px 1px 5px var(--neu-color-base-on-accent), -1px -1px 5px var(--neu-color-base-on-accent) !default; +$neu-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--neu-color-base-on-accent), 0px 0px 20px rgba(247, 84, 163, 0.5) !default; +$neu-button-primary-box-shadow-pressed: $neu-button-primary-box-shadow-hover !default; +$neu-button-primary-box-shadow-alternative: none !default; + +// Secondary button: common +$neu-button-secondary-border-width: 0px !default; +$neu-button-secondary-border-style: $neu-button-border-style !default; +// Secondary button: background colors +$neu-button-secondary-background-color: var(--neu-color-base-content-tertiary) !default; +$neu-button-secondary-background-color-active: var(--neu-color-base-content-secondary) !default; +$neu-button-secondary-background-color-alternative: var(--neu-color-utility-body) !default; +$neu-button-secondary-background-color-alternative-active: var(--neu-color-base-content-tertiary) !default; +// Secondary button: text colors +$neu-button-secondary-text-color: var(--neu-color-base-on-accent) !default; +$neu-button-secondary-text-color-active: $neu-button-secondary-text-color !default; +$neu-button-secondary-text-color-alternative: var(--neu-color-base-content-tertiary) !default; +$neu-button-secondary-text-color-alternative-active: var(--neu-color-base-on-accent) !default; +// Secondary button: border colors +$neu-button-secondary-border-color: transparent !default; +$neu-button-secondary-border-color-active: $neu-button-secondary-border-color !default; +// Secondary button: box-shadow +$neu-button-secondary-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(0, 0, 0, 0.1) !default; +$neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default; +$neu-button-secondary-box-shadow-alternative: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8) !default; + +// Tertiary button: common +$neu-button-tertiary-border-width: 0px !default; +$neu-button-tertiary-border-style: $neu-button-border-style !default; +// Tertiary button: background colors +$neu-button-tertiary-background-color: var(--neu-color-utility-surface) !default; +$neu-button-tertiary-background-color-active: $neu-button-tertiary-background-color !default; +$neu-button-tertiary-background-color-alternative: var(--neu-color-utility-body) !default; +// Tertiary button: text colors +$neu-button-tertiary-text-color: var(--neu-color-base-content-secondary) !default; +$neu-button-tertiary-text-color-active: var(--neu-color-base-content-primary) !default; +// Tertiary button: border colors +$neu-button-tertiary-border-color: transparent !default; +$neu-button-tertiary-border-color-active: $neu-button-tertiary-border-color !default; +// Tertiary button: box-shadow +$neu-button-tertiary-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #FFFFFF !default; +$neu-button-tertiary-box-shadow-active: $neu-button-tertiary-box-shadow !default; + +// Action button: common +$neu-button-action-border-width: 0px !default; +$neu-button-action-border-style: $neu-button-border-style !default; +// Action button: background colors +$neu-button-action-background-color: var(--neu-color-utility-body) !default; +$neu-button-action-background-color-hover: $neu-button-action-background-color !default; +$neu-button-action-background-color-pressed: $neu-button-action-background-color !default; +$neu-button-action-background-color-alternative: transparent !default; +// Action button: text colors +$neu-button-action-text-color: var(--neu-color-base-content-tertiary) !default; +$neu-button-action-text-color-hover: var(--neu-color-base-content-secondary) !default; +$neu-button-action-text-color-pressed: var(--neu-color-theme-accent) !default; +$neu-button-action-text-color-alternative: var(--neu-color-base-content-tertiary) !default; +$neu-button-action-text-color-alternative-active: var(--neu-color-base-content-secondary) !default; +// Action button: border colors +$neu-button-action-border-color: transparent !default; +$neu-button-action-border-color-hover: $neu-button-action-border-color !default; +$neu-button-action-border-color-pressed: $neu-button-action-border-color !default; +$neu-button-action-border-color-alternative: transparent !default; +// Action button: box-shadow +$neu-button-action-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8) !default; +$neu-button-action-box-shadow-hover: $neu-button-action-box-shadow !default; +$neu-button-action-box-shadow-pressed: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default; +$neu-button-action-box-shadow-alternative: none !default; + +@mixin disabled ( + $border-width: $neu-button-border-width, + $background-color: $neu-button-background-color-disabled, + $box-shadow: $neu-button-box-shadow-disabled +) { + &:disabled, &:disabled:hover { + color: $neu-button-text-color-disabled; + background-color: $background-color; + border-color: $neu-button-border-color-disabled; + box-shadow: $box-shadow; + border-width: $border-width; + } +} + +.el-button.neumorphic { + transition: $neu-button-transition; + + &.s-primary { + background: $neu-button-primary-background-color; + border-color: $neu-button-primary-border-color; + border-style: $neu-button-primary-border-style; + border-width: $neu-button-primary-border-width; + box-shadow: $neu-button-primary-box-shadow; + color: $neu-button-primary-text-color; + + &:hover, &:focus, &.focusing { + background: $neu-button-primary-background-color-hover; + border-color: $neu-button-primary-border-color-hover; + color: $neu-button-primary-text-color-hover; + box-shadow: $neu-button-primary-box-shadow-hover; + } + &:active, &.s-pressed { + background: $neu-button-primary-background-color-pressed; + border-color: $neu-button-primary-border-color-pressed; + color: $neu-button-primary-text-color-pressed; + box-shadow: $neu-button-primary-box-shadow-pressed; + } + @include disabled; + + &.s-alternative { + background: $neu-button-primary-background-color-alternative; + border-width: $neu-button-primary-border-width-alternative; + box-shadow: $neu-button-primary-box-shadow-alternative; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-primary-background-color-alternative-active; + } + + @include disabled($neu-button-primary-border-width-alternative); + } + } + + &.s-secondary { + background: $neu-button-secondary-background-color; + border-color: $neu-button-secondary-border-color; + border-style: $neu-button-secondary-border-style; + border-width: $neu-button-secondary-border-width; + box-shadow: $neu-button-secondary-box-shadow; + color: $neu-button-secondary-text-color; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-secondary-background-color-active; + border-color: $neu-button-secondary-border-color-active; + color: $neu-button-secondary-text-color-active; + box-shadow: $neu-button-secondary-box-shadow-active; + } + @include disabled($neu-button-secondary-border-width); + + &.s-alternative { + background: $neu-button-secondary-background-color-alternative; + box-shadow: $neu-button-secondary-box-shadow-alternative; + color: $neu-button-secondary-text-color-alternative; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-secondary-background-color-alternative-active; + color: $neu-button-secondary-text-color-alternative-active; + } + @include disabled($neu-button-secondary-border-width); + } + } + + &.s-tertiary { + background: $neu-button-tertiary-background-color; + border-color: $neu-button-tertiary-border-color; + border-style: $neu-button-tertiary-border-style; + border-width: $neu-button-tertiary-border-width; + box-shadow: $neu-button-tertiary-box-shadow; + color: $neu-button-tertiary-text-color; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-tertiary-background-color-active; + border-color: $neu-button-tertiary-border-color-active; + color: $neu-button-tertiary-text-color-active; + box-shadow: $neu-button-tertiary-box-shadow-active; + } + @include disabled($neu-button-tertiary-border-width); + + &.s-alternative { + background: $neu-button-tertiary-background-color-alternative; + + @include disabled($neu-button-tertiary-border-width); + } + } + + &.s-action { + background: $neu-button-action-background-color; + border-color: $neu-button-action-border-color; + border-style: $neu-button-action-border-style; + border-width: $neu-button-action-border-width; + box-shadow: $neu-button-action-box-shadow; + color: $neu-button-action-text-color; + + &:hover, &:focus, &.focusing { + background: $neu-button-action-background-color-hover; + border-color: $neu-button-action-border-color-hover; + color: $neu-button-action-text-color-hover; + box-shadow: $neu-button-action-box-shadow-hover; + } + &:active, &.s-pressed { + background: $neu-button-action-background-color-pressed; + border-color: $neu-button-action-border-color-pressed; + color: $neu-button-action-text-color-pressed; + box-shadow: $neu-button-action-box-shadow-pressed; + } + @include disabled($neu-button-action-border-width, $neu-button-action-background-color, $neu-button-action-box-shadow-pressed); + &.s-alternative { + color: $neu-button-action-text-color-alternative; + + &, &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background-color: $neu-button-action-background-color-alternative; + border-color: $neu-button-action-border-color-alternative; + box-shadow: $neu-button-action-box-shadow-alternative; + } + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + color: $neu-button-action-text-color-alternative-active; + } + @include disabled($neu-button-action-border-width, $neu-button-action-background-color-alternative, $neu-button-action-box-shadow-alternative); + } + } +} diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss new file mode 100644 index 00000000..6f709c44 --- /dev/null +++ b/src/styles/neumorphism/index.scss @@ -0,0 +1,3 @@ +@import "./variables"; +@import "./button.scss"; +@import "./input.scss"; diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss new file mode 100644 index 00000000..ae590da6 --- /dev/null +++ b/src/styles/neumorphism/input.scss @@ -0,0 +1,49 @@ +$neu-input-border-width: 0 !default; +$neu-input-background: var(--neu-color-base-background) !default; +$neu-input-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8) !default; +$neu-input-box-shadow-active: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default; +$neu-input-color: var(--neu-color-base-content-primary) !default; +$neu-input-color-disabled: var(--neu-color-base-content-secondary) !default; +$neu-input-placeholder-color: var(--neu-color-base-content-secondary) !default; +$neu-input-placeholder-offset: -2px !default; +$neu-input-padding: 8px 16px !default; + +.s-input.neumorphic { + border-width: $neu-input-border-width; + box-shadow: $neu-input-box-shadow; + color: $neu-input-color; + padding: $neu-input-padding; + + .el-input, .el-textarea { + &__inner { + color: $neu-input-color; + } + + &.is-disabled { + .el-input__inner { + background-color: transparent; + } + } + } + + & .s-placeholder { + color: $neu-input-placeholder-color; + top: $neu-input-placeholder-offset; + } + + &, &:hover, &.s-focused, &.s-disabled { + background: $neu-input-background; + } + + &.s-focused, &.s-disabled { + box-shadow: $neu-input-box-shadow-active; + } + + &.s-disabled { + color: $neu-input-color-disabled; + + .s-placeholder { + color: $neu-input-placeholder-color; + } + } +} diff --git a/src/styles/neumorphism/variables.scss b/src/styles/neumorphism/variables.scss new file mode 100644 index 00000000..4cb6a9cc --- /dev/null +++ b/src/styles/neumorphism/variables.scss @@ -0,0 +1,70 @@ +// Brand +$neu-brand-pinky: #ED145B !default; // Some texts, brand stuff +$neu-brand-blue: #0D0248 !default; // Brand stuff +// Theme Primary +$neu-color-theme-accent: #F8087B !default; +$neu-color-theme-accent-hover: #F754A3 !default; +$neu-color-theme-accent-pressed: #E44592 !default; +$neu-color-theme-accent-focused: #F24197 !default; +// Theme Secondary +$neu-color-theme-secondary: #44E5B2 !default; +$neu-color-theme-secondary-hover: #24DAA0 !default; +// Base: Content +$neu-color-base-content-primary: #2A171F !default; // Main text and icons +$neu-color-base-content-secondary: #A19A9D !default; // Secondary text +$neu-color-base-content-tertiary: #D5CDD0 !default; // Hint and placeholder text +$neu-color-base-content-quaternary: #75787b !default; // Text +// Base: Background +$neu-color-base-background: #FAF4F8 !default; // Interactive elements background: controls, text field +$neu-color-base-background-hover: #F7F3F4 !default; +$neu-color-base-background-dark: #2E2E36 !default; // Dark background +// Base: Border +$neu-color-base-border-primary: #F7F3F4 !default; // High emphasis border/divider +$neu-color-base-border-secondary: #EDE4E7 !default; // Low emphasis border/divider +// Base: Misc +$neu-color-base-disabled: #FDF7FB !default; // Disabled state +$neu-color-base-on-disabled: #A19A9D !default; // Text on disabled element +$neu-color-base-on-accent: #FFFFFF !default; // Text on dark/accent backgrounds +// Utility +$neu-color-utility-body: #F7F3F4 !default; +$neu-color-utility-surface: #FDF7FB !default; +$neu-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; +// Statuses +$neu-color-status-success: #34AD87 !default; // Success text and icon +$neu-color-status-success-background: #B9EBDB !default; // Success state background +$neu-color-status-warning: #479AEF !default; // Warning text and icon +$neu-color-status-warning-background: #C6E2FF !default; // Warning state background +$neu-color-status-error: #F754A3 !default; // Error text and icon +$neu-color-status-error-background: #FFD8EB !default; // Error state background + +:root { + --neu-brand-pinky: #{neu-brand-pinky}; + --neu-brand-blue: #{neu-brand-blue}; + --neu-color-theme-accent: #{$neu-color-theme-accent}; + --neu-color-theme-accent-hover: #{$neu-color-theme-accent-hover}; + --neu-color-theme-accent-pressed: #{$neu-color-theme-accent-pressed}; + --neu-color-theme-accent-focused: #{$neu-color-theme-accent-focused}; + --neu-color-theme-secondary: #{$neu-color-theme-secondary}; + --neu-color-theme-secondary-hover: #{$neu-color-theme-secondary-hover}; + --neu-color-base-content-primary: #{$neu-color-base-content-primary}; + --neu-color-base-content-secondary: #{$neu-color-base-content-secondary}; + --neu-color-base-content-tertiary: #{$neu-color-base-content-tertiary}; + --neu-color-base-content-quaternary: #{$neu-color-base-content-quaternary}; + --neu-color-base-background: #{$neu-color-base-background}; + --neu-color-base-background-hover: #{$neu-color-base-background-hover}; + --neu-color-base-background-dark: #{$neu-color-base-background-dark}; + --neu-color-base-border-primary: #{$neu-color-base-border-primary}; + --neu-color-base-border-secondary: #{$neu-color-base-border-secondary}; + --neu-color-base-disabled: #{$neu-color-base-disabled}; + --neu-color-base-on-disabled: #{$neu-color-base-on-disabled}; + --neu-color-base-on-accent: #{$neu-color-base-on-accent}; + --neu-color-utility-body: #{$neu-color-utility-body}; + --neu-color-utility-surface: #{$neu-color-utility-surface}; + --neu-color-utility-overlay: #{$neu-color-utility-overlay}; + --neu-color-status-success: #{$neu-color-status-success}; + --neu-color-status-success-background: #{$neu-color-status-success-background}; + --neu-color-status-warning: #{$neu-color-status-warning}; + --neu-color-status-warning-background: #{$neu-color-status-warning-background}; + --neu-color-status-error: #{$neu-color-status-error}; + --neu-color-status-error-background: #{$neu-color-status-error-background}; +} diff --git a/src/types/components.ts b/src/types/components.ts index 6be5fd3d..e5cd2b7f 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -12,6 +12,7 @@ export enum Components { SCollapseItem = 'SCollapseItem', SContainer = 'SContainer', SDatePicker = 'SDatePicker', + SDesignSystemProvider = 'SDesignSystemProvider', SDialog = 'SDialog', SDivider = 'SDivider', SDropdown = 'SDropdown', diff --git a/src/utils/DesignSystem.ts b/src/utils/DesignSystem.ts new file mode 100644 index 00000000..dd17844a --- /dev/null +++ b/src/utils/DesignSystem.ts @@ -0,0 +1,4 @@ +export enum DesignSystemTypes { + DEFAULT = '', + NEUMORPHIC = 'neumorphic' +} diff --git a/src/utils/index.ts b/src/utils/index.ts index f1551c93..1eed4d27 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -4,3 +4,7 @@ import { Theme } from './Theme' export const setTheme = (theme: Theme) => { store.dispatch('changeTheme', { theme }) } + +export const setDesignSystem = (designSystem) => { + store.dispatch('setDesignSystem', designSystem) +} diff --git a/yarn.lock b/yarn.lock index 89b86a7b..bf3b9dc9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13383,10 +13383,10 @@ rollup-plugin-commonjs@^10.1.0: resolve "^1.11.0" rollup-pluginutils "^2.8.1" -rollup-plugin-copy@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.3.0.tgz#5ba230047f86b9f703a29288f242948a5580e7b9" - integrity sha512-euDjCUSBXZa06nqnwCNADbkAcYDfzwowfZQkto9K/TFhiH+QG7I4PUsEMwM9tDgomGWJc//z7KLW8t+tZwxADA== +rollup-plugin-copy@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.4.0.tgz#f1228a3ffb66ffad8606e2f3fb7ff23141ed3286" + integrity sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ== dependencies: "@types/fs-extra" "^8.0.1" colorette "^1.1.0" From 44ed4ec92622fa41cd1ee0e17a6126244b3f0b59 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 31 May 2021 17:01:17 +0300 Subject: [PATCH 2/5] Update STooltip.stories.ts (#197) --- src/stories/STooltip.stories.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts index fcd35aa9..f5b8bbe4 100644 --- a/src/stories/STooltip.stories.ts +++ b/src/stories/STooltip.stories.ts @@ -135,3 +135,20 @@ export const withManualMode = () => ({ ` }) + +export const withDifferentContent = () => ({ + components: { STooltip, SButton, SRow }, + template: ` + Click + `, + data: () => ({ + content: 'Click' + }), + methods: { + async handleClick () { + (this as any).content = 'Clicked!' + await new Promise((resolve) => setTimeout(resolve, 400)); + (this as any).content = 'Click' + } + } +}) From c1f2742c227778b943ca97770a0b62de83e81ec2 Mon Sep 17 00:00:00 2001 From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com> Date: Tue, 1 Jun 2021 11:46:44 +0300 Subject: [PATCH 3/5] fix build (#208) --- build/rollup.config.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/build/rollup.config.js b/build/rollup.config.js index 2d7a79bc..45d271ad 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -33,7 +33,7 @@ export default { targets: [ { src: 'src/assets/*', dest: 'lib/assets' }, { - src: 'src/styles/*.scss', + src: 'src/styles/*.(scss|ts)', dest: 'lib/styles', // Replace all imports for scss files which will be used as theming files transform: (content) => { diff --git a/package.json b/package.json index 23486122..fe051acd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.9.0", + "version": "0.9.1", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" From d57fe724865a79b4f74674faf8677f283691d745 Mon Sep 17 00:00:00 2001 From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com> Date: Wed, 2 Jun 2021 08:07:11 +0300 Subject: [PATCH 4/5] neu styles & props improvement (#210) * neu styles & props improvement * fix mixin * up to 0.9.2 --- package.json | 2 +- src/components/Button/SButton.vue | 12 +++++++++--- src/components/Input/SFloatInput.vue | 6 +++++- src/components/Input/SInput.vue | 3 +++ src/stories/SButton.stories.ts | 14 ++++++++++---- src/stories/SFloatInput.stories.ts | 19 ++++++++++++++++++- src/styles/neumorphism/button.scss | 22 ++++++++++++++++++++++ src/styles/neumorphism/variables.scss | 9 +++++++++ 8 files changed, 77 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index fe051acd..4199f88a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.9.1", + "version": "0.9.2", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index b4d15841..f7daf048 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -9,7 +9,7 @@ :disabled="disabled" :loading="isLoading" :autofocus="autofocus" - :circle="type === ButtonTypes.ACTION && rounded" + :circle="isRounded" :icon="elementIcon" @click="handleClick" > @@ -134,7 +134,7 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design if ((Object.values(ButtonTypes) as Array).includes(this.type)) { cssClasses.push(`s-${this.type}`) } - if ((Object.values(ButtonIconPosition) as Array).includes(this.iconPosition)) { + if (!!this.availableIcon && (Object.values(ButtonIconPosition) as Array).includes(this.iconPosition)) { cssClasses.push(`s-i-position-${this.iconPosition}`) } if (this.isLoading) { @@ -169,8 +169,14 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design return this.icon } + get isRounded (): boolean { + if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) return false + + return this.rounded + } + get isLoading (): boolean { - if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) { + if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type) || this.isRounded) { return false } return this.loading diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue index 5667791a..e4aab325 100644 --- a/src/components/Input/SFloatInput.vue +++ b/src/components/Input/SFloatInput.vue @@ -8,7 +8,11 @@ input: handleInput, blur: onBlur }" - /> + > + + diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue index 2ac3d40f..7cd64228 100644 --- a/src/components/Input/SInput.vue +++ b/src/components/Input/SInput.vue @@ -9,7 +9,7 @@
- {{ placeholder }} + {{ placeholder }} { @@ -207,7 +207,7 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject cssClasses.push('s-autofill') } if (this.size) { - cssClasses.push(this.sizeClass) + cssClasses.push(`s-size-${this.size}`) } if (this.prefix) { cssClasses.push('s-input--prefix') @@ -218,16 +218,6 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject return cssClasses } - get sizeClass (): string { - switch (this.size) { - case InputSize.MEDIUM: - return 's-size-medium' - case InputSize.BIG: - default: - return '' - } - } - get computedType (): string { if (this.type === InputType.TEXT_FILE) { return InputType.TEXT diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts index bb48a246..82796e87 100644 --- a/src/components/Input/consts.ts +++ b/src/components/Input/consts.ts @@ -31,6 +31,7 @@ export enum InputType { } export enum InputSize { + SMALL = 'small', MEDIUM = 'medium', BIG = 'big' } diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue index ff62d7d5..62ed9721 100644 --- a/src/components/Radio/SRadio.vue +++ b/src/components/Radio/SRadio.vue @@ -1,5 +1,6 @@ diff --git a/src/components/Switch/SSwitch.vue b/src/components/Switch/SSwitch.vue index e8b85bc4..1b220064 100644 --- a/src/components/Switch/SSwitch.vue +++ b/src/components/Switch/SSwitch.vue @@ -1,5 +1,5 @@