diff --git a/package.json b/package.json index 26831cd9..078b48fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.6.3", + "version": "0.6.4", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/" diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 6858f377..59187786 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -13,8 +13,9 @@ :icon="elementIcon" @click="handleClick" > - + + @@ -29,12 +30,13 @@ import SizeMixin from '../../mixins/SizeMixin' import BorderRadiusMixin from '../../mixins/BorderRadiusMixin' import { SIcon } from '../Icon' import { STooltip, TooltipPlacement } from '../Tooltip' -import { ButtonTypes, ButtonNativeTypes } from './consts' +import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts' @Component({ components: { SIcon, STooltip } }) export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) { + readonly IconPosition = ButtonIconPosition readonly ButtonTypes = ButtonTypes /** * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`. @@ -52,6 +54,12 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) { * Icon name from icon collection of this library */ @Prop({ default: '', type: String }) readonly icon!: string + /** + * Icon position within the text. Possible values: `"left"`, `"right"`. + * + * By default it's set to `"left"` + */ + @Prop({ default: ButtonIconPosition.LEFT, type: String }) readonly iconPosition!: string /** * Disable state */ @@ -122,6 +130,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) { if ((Object.values(ButtonTypes) as Array).includes(this.type)) { cssClasses.push(`s-${this.type}`) } + if ((Object.values(ButtonIconPosition) as Array).includes(this.iconPosition)) { + cssClasses.push(`s-i-position-${this.iconPosition}`) + } if (this.isLoading) { cssClasses.push('s-loading') } diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts index d11d2a08..8fa4c595 100644 --- a/src/components/Button/consts.ts +++ b/src/components/Button/consts.ts @@ -11,3 +11,8 @@ export enum ButtonNativeTypes { SUBMIT = 'submit', RESET = 'reset' } + +export enum ButtonIconPosition { + LEFT = 'left', + RIGHT = 'right' +} diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index 53b5d0b7..9f6d31bc 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -1,5 +1,11 @@ import SButton from './SButton.vue' import SButtonGroup from './SButtonGroup.vue' -import { ButtonTypes, ButtonNativeTypes } from './consts' +import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts' -export { SButton, SButtonGroup, ButtonTypes, ButtonNativeTypes } +export { + SButton, + SButtonGroup, + ButtonTypes, + ButtonNativeTypes, + ButtonIconPosition +} diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 011e73d1..83cee41b 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -2,7 +2,7 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components' import { Size, BorderRadius } from '../types' -import { ButtonTypes } from '../components/Button' +import { ButtonTypes, ButtonIconPosition } from '../components/Button' export default { component: SButton, @@ -176,17 +176,17 @@ export const withIcon = () => ({ template: ` - + {{ item.label }} - + {{ item.label }} - + {{ item.label }} @@ -198,6 +198,9 @@ export const withIcon = () => ({ }, differentTypesData: { default: () => differentTypeButtonsData + }, + iconPosition: { + default: select('IconPosition', Object.values(ButtonIconPosition), ButtonIconPosition.LEFT) } } }) diff --git a/src/styles/button.scss b/src/styles/button.scss index 2b026621..095a64bc 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -161,9 +161,16 @@ button { color: inherit; } } - &:not(.s-action) > span > i { - &[class^=s-icon-], &[class^=el-icon-] { - margin-right: 6px; + &:not(.s-action).s-i-position { + &-left > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + margin-right: 6px; + } + } + &-right > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + margin-left: 6px; + } } } }