diff options
author | 2019-06-07 11:25:54 +0200 | |
---|---|---|
committer | 2019-06-07 11:25:54 +0200 | |
commit | 9f2ab40b7602bc3df26ebb093b484b9917768f69 (patch) | |
tree | d00f2833c695cfe5e504fcc87578fe392f396585 /packages/forms | |
parent | Merge pull request #1473 from meetfranz/fix/reset-news-on-logout (diff) | |
download | ferdium-app-9f2ab40b7602bc3df26ebb093b484b9917768f69.tar.gz ferdium-app-9f2ab40b7602bc3df26ebb093b484b9917768f69.tar.zst ferdium-app-9f2ab40b7602bc3df26ebb093b484b9917768f69.zip |
Make buttons flexible in height
Diffstat (limited to 'packages/forms')
-rw-r--r-- | packages/forms/src/button/index.tsx | 8 | ||||
-rw-r--r-- | packages/forms/src/input/index.tsx | 4 | ||||
-rw-r--r-- | packages/forms/src/typings/generic.ts | 1 | ||||
-rw-r--r-- | packages/forms/src/wrapper/index.tsx | 9 | ||||
-rw-r--r-- | packages/forms/src/wrapper/styles.ts | 5 |
5 files changed, 14 insertions, 13 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index 6959cde73..9faedc8f1 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -44,7 +44,7 @@ const styles = (theme: Theme) => ({ | |||
44 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, | 44 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, |
45 | fontSize: theme.uiFontSize, | 45 | fontSize: theme.uiFontSize, |
46 | textDecoration: 'none', | 46 | textDecoration: 'none', |
47 | height: theme.buttonHeight, | 47 | // height: theme.buttonHeight, |
48 | 48 | ||
49 | '&:hover': { | 49 | '&:hover': { |
50 | opacity: 0.8, | 50 | opacity: 0.8, |
@@ -129,8 +129,7 @@ const styles = (theme: Theme) => ({ | |||
129 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', | 129 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', |
130 | }, | 130 | }, |
131 | icon: { | 131 | icon: { |
132 | marginLeft: -5, | 132 | margin: [1, 10, 0, -5], |
133 | marginRight: 10, | ||
134 | }, | 133 | }, |
135 | }); | 134 | }); |
136 | 135 | ||
@@ -142,7 +141,6 @@ class ButtonComponent extends Component<IProps> { | |||
142 | buttonType: 'primary' as ButtonType, | 141 | buttonType: 'primary' as ButtonType, |
143 | stretch: false, | 142 | stretch: false, |
144 | busy: false, | 143 | busy: false, |
145 | // target: '_self' | ||
146 | }; | 144 | }; |
147 | 145 | ||
148 | state = { | 146 | state = { |
@@ -220,7 +218,7 @@ class ButtonComponent extends Component<IProps> { | |||
220 | {icon && ( | 218 | {icon && ( |
221 | <Icon | 219 | <Icon |
222 | path={icon} | 220 | path={icon} |
223 | size={1} | 221 | size={0.8} |
224 | className={classes.icon} | 222 | className={classes.icon} |
225 | /> | 223 | /> |
226 | )} | 224 | )} |
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index a2d7c62d5..b96dbc12d 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -83,7 +83,7 @@ class InputComponent extends Component<IProps, IState> { | |||
83 | } | 83 | } |
84 | 84 | ||
85 | onInputKeyPress(e: React.KeyboardEvent) { | 85 | onInputKeyPress(e: React.KeyboardEvent) { |
86 | if (e.key === "Enter") { | 86 | if (e.key === 'Enter') { |
87 | const { onEnterKey } = this.props; | 87 | const { onEnterKey } = this.props; |
88 | onEnterKey && onEnterKey(); | 88 | onEnterKey && onEnterKey(); |
89 | } | 89 | } |
@@ -114,6 +114,7 @@ class InputComponent extends Component<IProps, IState> { | |||
114 | max, | 114 | max, |
115 | step, | 115 | step, |
116 | required, | 116 | required, |
117 | noMargin, | ||
117 | } = this.props; | 118 | } = this.props; |
118 | 119 | ||
119 | const { | 120 | const { |
@@ -127,6 +128,7 @@ class InputComponent extends Component<IProps, IState> { | |||
127 | <Wrapper | 128 | <Wrapper |
128 | className={className} | 129 | className={className} |
129 | identifier="franz-input" | 130 | identifier="franz-input" |
131 | noMargin={noMargin} | ||
130 | > | 132 | > |
131 | <Label | 133 | <Label |
132 | title={label} | 134 | title={label} |
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts index 9688ce2c7..29136dfed 100644 --- a/packages/forms/src/typings/generic.ts +++ b/packages/forms/src/typings/generic.ts | |||
@@ -6,6 +6,7 @@ export interface IFormField { | |||
6 | label?: string; | 6 | label?: string; |
7 | error?: string; | 7 | error?: string; |
8 | required?: boolean; | 8 | required?: boolean; |
9 | noMargin?: boolean; | ||
9 | } | 10 | } |
10 | 11 | ||
11 | export interface IWithStyle { | 12 | export interface IWithStyle { |
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx index d9c61381d..cf179bc5e 100644 --- a/packages/forms/src/wrapper/index.tsx +++ b/packages/forms/src/wrapper/index.tsx | |||
@@ -3,14 +3,19 @@ import React, { Component } from 'react'; | |||
3 | import injectStyle from 'react-jss'; | 3 | import injectStyle from 'react-jss'; |
4 | import { IWithStyle } from '../typings/generic'; | 4 | import { IWithStyle } from '../typings/generic'; |
5 | 5 | ||
6 | import styles from './styles'; | ||
7 | |||
8 | interface IProps extends IWithStyle { | 6 | interface IProps extends IWithStyle { |
9 | children: React.ReactNode; | 7 | children: React.ReactNode; |
10 | className?: string; | 8 | className?: string; |
11 | identifier: string; | 9 | identifier: string; |
10 | noMargin?: boolean; | ||
12 | } | 11 | } |
13 | 12 | ||
13 | const styles = { | ||
14 | container: { | ||
15 | marginBottom: (props: IProps) => props.noMargin ? 0 : 20, | ||
16 | }, | ||
17 | }; | ||
18 | |||
14 | class WrapperComponent extends Component<IProps> { | 19 | class WrapperComponent extends Component<IProps> { |
15 | render() { | 20 | render() { |
16 | const { | 21 | const { |
diff --git a/packages/forms/src/wrapper/styles.ts b/packages/forms/src/wrapper/styles.ts deleted file mode 100644 index 72306b252..000000000 --- a/packages/forms/src/wrapper/styles.ts +++ /dev/null | |||
@@ -1,5 +0,0 @@ | |||
1 | export default { | ||
2 | container: { | ||
3 | marginBottom: 20, | ||
4 | }, | ||
5 | }; | ||