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;
+ }
}
}
}