From 37c92de87d6aefa041f81f8e6def33f72c4ee65f Mon Sep 17 00:00:00 2001 From: codebender828 Date: Thu, 7 Nov 2019 23:49:34 +0800 Subject: [PATCH] feat(iconbutton): icon button storybook --- src/App.vue | 8 ++--- src/components/Button/button.props.js | 3 +- src/components/Button/index.js | 2 ++ src/components/Icon/index.js | 10 ++---- src/components/IconButton/index.js | 7 ++-- stories/5-IconButton.stories.js | 50 +++++++++++++++++++++++++++ 6 files changed, 62 insertions(+), 18 deletions(-) create mode 100644 stories/5-IconButton.stories.js diff --git a/src/App.vue b/src/App.vue index beac564d..fda50843 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,10 @@ diff --git a/src/components/Button/button.props.js b/src/components/Button/button.props.js index 205b61fc..d84e25ea 100644 --- a/src/components/Button/button.props.js +++ b/src/components/Button/button.props.js @@ -42,8 +42,7 @@ export const buttonProps = { }, loadingText: { type: String, - default: 'Loading', - validator: (value) => typeof value === 'string' + default: null }, iconSpacing: { type: [String, Number], diff --git a/src/components/Button/index.js b/src/components/Button/index.js index aa6bdcb4..fa01e45d 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -93,6 +93,7 @@ export default { this.leftIcon && !this.isLoading && h(ButtonIcon, { props: { mr: this.iconSpacing, + mb: 'px', icon: this.leftIcon, size: '1em' } @@ -110,6 +111,7 @@ export default { this.rightIcon && !this.isLoading && h(ButtonIcon, { props: { ml: this.iconSpacing, + mb: 'px', icon: this.rightIcon, size: '1em' } diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 66543edb..b2bd4055 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -2,7 +2,6 @@ import styled from 'vue-styled-components' import { Box } from '../../lib/core/' import iconPaths from '../../lib/plugin/iconsPaths' import { forwardProps } from '../../lib/utils' -import { iconStyles } from './icon.utils' import { baseProps } from '../../lib/config/props' const fallbackIcon = iconPaths['question-outline'] @@ -59,19 +58,14 @@ export default { viewBox = icon.viewBox || '0 0 24 24' - // Evaluate icon size - const iconSize = iconStyles({ - size: this.size, - theme: this.$theme - }) - return h(Svg, { props: { as: 'svg', + w: this.size, + h: this.size, color: this.color, d: 'inline-block', verticalAlign: 'middle', - ...iconSize, ...forwardProps(this.$props) }, attrs: { diff --git a/src/components/IconButton/index.js b/src/components/IconButton/index.js index 82fc89e8..746089b1 100644 --- a/src/components/IconButton/index.js +++ b/src/components/IconButton/index.js @@ -1,7 +1,6 @@ import { Button, Icon, Box } from '../../lib/core' import styleProps from '../../lib/config/props' import { forwardProps } from '../../lib/utils' -import { setIconSizes } from '../Button/button.styles' import { buttonProps } from '../Button/button.props' const baseStyles = { @@ -40,7 +39,7 @@ export default { return h(Button, { props: { p: 0, - borderRadius: this.isRound ? 'full' : 'md', + rounded: this.isRound ? 'full' : 'md', size: this.size, ...forwardProps(props) }, @@ -55,8 +54,8 @@ export default { focusable: false, name: this.icon, color: 'currentColor', - mb: '-2px', - ...setIconSizes(props) + mb: '2px', + size: '1em' }, attrs: { focusable: false, diff --git a/stories/5-IconButton.stories.js b/stories/5-IconButton.stories.js new file mode 100644 index 00000000..d66695fd --- /dev/null +++ b/stories/5-IconButton.stories.js @@ -0,0 +1,50 @@ +import { storiesOf } from '@storybook/vue' +import centered from '@storybook/addon-centered/vue' +import IconButton from '../src/components/IconButton' + +storiesOf('UI | IconButton', module) + .addDecorator(centered) + .add('Default IconButton', () => ({ + components: { IconButton }, + template: ` +
+ +
+ ` + })) + .add('With sizes', () => ({ + components: { IconButton }, + template: ` +
+ + + +
+ ` + })) + .add('With colors', () => ({ + components: { IconButton }, + template: ` +
+ + + +
+ ` + })) + .add('With Loading', () => ({ + components: { IconButton }, + template: ` +
+ +
+ ` + })) + .add('With Rounding', () => ({ + components: { IconButton }, + template: ` +
+ +
+ ` + }))