diff options
author | 2019-01-15 11:15:33 +0100 | |
---|---|---|
committer | 2019-01-15 11:15:33 +0100 | |
commit | 48675c4fa91f0e5c0a77027bfb796b16c5621a2f (patch) | |
tree | 99aab6269b5b30267b120003f207b6e60cabbb62 | |
parent | add types (diff) | |
download | ferdium-app-48675c4fa91f0e5c0a77027bfb796b16c5621a2f.tar.gz ferdium-app-48675c4fa91f0e5c0a77027bfb796b16c5621a2f.tar.zst ferdium-app-48675c4fa91f0e5c0a77027bfb796b16c5621a2f.zip |
Add mdi icons to buttons
-rw-r--r-- | packages/forms/src/button/index.tsx | 45 | ||||
-rw-r--r-- | packages/forms/src/input/index.tsx | 2 | ||||
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 5 |
3 files changed, 50 insertions, 2 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index c4a138b16..d2c5ad96d 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -1,3 +1,5 @@ | |||
1 | import * as mdiIcons from '@mdi/js'; | ||
2 | import Icon from '@mdi/react'; | ||
1 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 5 | import CSS from 'csstype'; |
@@ -15,6 +17,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormFiel | |||
15 | stretch?: boolean; | 17 | stretch?: boolean; |
16 | loaded?: boolean; | 18 | loaded?: boolean; |
17 | busy?: boolean; | 19 | busy?: boolean; |
20 | icon?: keyof typeof mdiIcons; | ||
18 | } | 21 | } |
19 | 22 | ||
20 | interface IState { | 23 | interface IState { |
@@ -38,27 +41,50 @@ const styles = (theme: Theme) => ({ | |||
38 | label: { | 41 | label: { |
39 | margin: '10px 20px', | 42 | margin: '10px 20px', |
40 | width: '100%', | 43 | width: '100%', |
44 | display: 'flex', | ||
45 | alignItems: 'center', | ||
46 | justifyContent: 'center', | ||
41 | }, | 47 | }, |
42 | primary: { | 48 | primary: { |
43 | background: theme.buttonPrimaryBackground, | 49 | background: theme.buttonPrimaryBackground, |
44 | color: theme.buttonPrimaryTextColor, | 50 | color: theme.buttonPrimaryTextColor, |
51 | |||
52 | '& svg': { | ||
53 | fill: theme.buttonPrimaryTextColor, | ||
54 | }, | ||
45 | }, | 55 | }, |
46 | secondary: { | 56 | secondary: { |
47 | background: theme.buttonSecondaryBackground, | 57 | background: theme.buttonSecondaryBackground, |
48 | color: theme.buttonSecondaryTextColor, | 58 | color: theme.buttonSecondaryTextColor, |
59 | |||
60 | '& svg': { | ||
61 | fill: theme.buttonSecondaryTextColor, | ||
62 | }, | ||
49 | }, | 63 | }, |
50 | danger: { | 64 | danger: { |
51 | background: theme.buttonDangerBackground, | 65 | background: theme.buttonDangerBackground, |
52 | color: theme.buttonDangerTextColor, | 66 | color: theme.buttonDangerTextColor, |
67 | |||
68 | '& svg': { | ||
69 | fill: theme.buttonDangerTextColor, | ||
70 | }, | ||
53 | }, | 71 | }, |
54 | warning: { | 72 | warning: { |
55 | background: theme.buttonWarningBackground, | 73 | background: theme.buttonWarningBackground, |
56 | color: theme.buttonWarningTextColor, | 74 | color: theme.buttonWarningTextColor, |
75 | |||
76 | '& svg': { | ||
77 | fill: theme.buttonWarningTextColor, | ||
78 | }, | ||
57 | }, | 79 | }, |
58 | inverted: { | 80 | inverted: { |
59 | background: theme.buttonInvertedBackground, | 81 | background: theme.buttonInvertedBackground, |
60 | color: theme.buttonInvertedTextColor, | 82 | color: theme.buttonInvertedTextColor, |
61 | border: theme.buttonInvertedBorder, | 83 | border: theme.buttonInvertedBorder, |
84 | |||
85 | '& svg': { | ||
86 | fill: theme.buttonInvertedTextColor, | ||
87 | }, | ||
62 | }, | 88 | }, |
63 | disabled: { | 89 | disabled: { |
64 | opacity: theme.inputDisabledOpacity, | 90 | opacity: theme.inputDisabledOpacity, |
@@ -78,6 +104,10 @@ const styles = (theme: Theme) => ({ | |||
78 | marginRight: (props: IProps): number => !props.busy ? -10 : -20, | 104 | marginRight: (props: IProps): number => !props.busy ? -10 : -20, |
79 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', | 105 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', |
80 | }, | 106 | }, |
107 | icon: { | ||
108 | marginLeft: -5, | ||
109 | marginRight: 10, | ||
110 | }, | ||
81 | }); | 111 | }); |
82 | 112 | ||
83 | @observer | 113 | @observer |
@@ -122,6 +152,7 @@ class ButtonComponent extends Component<IProps> { | |||
122 | onClick, | 152 | onClick, |
123 | buttonType, | 153 | buttonType, |
124 | loaded, | 154 | loaded, |
155 | icon: iconName, | ||
125 | busy: busyProp, | 156 | busy: busyProp, |
126 | } = this.props; | 157 | } = this.props; |
127 | 158 | ||
@@ -129,6 +160,13 @@ class ButtonComponent extends Component<IProps> { | |||
129 | busy, | 160 | busy, |
130 | } = this.state; | 161 | } = this.state; |
131 | 162 | ||
163 | let icon = ''; | ||
164 | if (iconName && mdiIcons[iconName]) { | ||
165 | icon = mdiIcons[iconName]; | ||
166 | } else if (iconName && !mdiIcons[iconName]) { | ||
167 | console.warn(`Icon '${iconName}' was not found`); | ||
168 | } | ||
169 | |||
132 | let showLoader = false; | 170 | let showLoader = false; |
133 | if (loaded) { | 171 | if (loaded) { |
134 | showLoader = !loaded; | 172 | showLoader = !loaded; |
@@ -162,6 +200,13 @@ class ButtonComponent extends Component<IProps> { | |||
162 | )} | 200 | )} |
163 | </div> | 201 | </div> |
164 | <div className={classes.label}> | 202 | <div className={classes.label}> |
203 | {icon && ( | ||
204 | <Icon | ||
205 | path={icon} | ||
206 | size={1} | ||
207 | className={classes.icon} | ||
208 | /> | ||
209 | )} | ||
165 | {label} | 210 | {label} |
166 | </div> | 211 | </div> |
167 | </button> | 212 | </button> |
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index 8f17ba2f9..9fcf48010 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -1,10 +1,8 @@ | |||
1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | 1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; |
2 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import pick from 'lodash/pick'; | ||
5 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
6 | import React, { Component, createRef } from 'react'; | 5 | import React, { Component, createRef } from 'react'; |
7 | import htmlElementAttributes from 'react-html-attributes'; | ||
8 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
9 | 7 | ||
10 | import { IFormField, IWithStyle } from '../typings/generic'; | 8 | import { IFormField, IWithStyle } from '../typings/generic'; |
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx index 1a54eb6bf..21778e081 100644 --- a/uidev/src/stories/button.stories.tsx +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -71,4 +71,9 @@ storiesOf('Button') | |||
71 | <WithStoreButton store={createStore({ | 71 | <WithStoreButton store={createStore({ |
72 | busy: true, | 72 | busy: true, |
73 | })} /> | 73 | })} /> |
74 | )) | ||
75 | .add('With icon', () => ( | ||
76 | <WithStoreButton store={createStore({ | ||
77 | icon: 'mdiAccountCircle', | ||
78 | })} /> | ||
74 | )); | 79 | )); |