Skip to content
This repository was archived by the owner on May 6, 2022. It is now read-only.

Commit 45952de

Browse files
ee0pdtee0pdt
authored
fix(Form): Finer inputs and labels
* Finer inputs and labels * Fixes linting * Adds hover to input fields
1 parent ab77c78 commit 45952de

File tree

8 files changed

+62
-53
lines changed

8 files changed

+62
-53
lines changed

‎src/cards/utils/CardHeader.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
import styled from '../../utils/mural-styled-components';
22

3-
import { readableColor } from 'polished';
3+
import { darken, readableColor } from 'polished';
44
import CardProps from './CardProps';
55

66
const CardHeader = styled.div<CardProps>`
77
box-sizing: border-box;
88
padding: 12px 20px;
99
width: 100%;
1010
11-
background-color: ${({headerColor}) => headerColor !== undefined
12-
? headerColor
13-
: ({ theme }) => theme.color.White
14-
};
11+
background-color: ${({ headerColor }) =>
12+
headerColor !== undefined ? headerColor : ({ theme }) => theme.color.White};
1513
1614
color: ${({ headerColor, theme }) => {
1715
if (headerColor === undefined) {
1816
return theme.color.BodyText;
1917
}
2018
if (headerColor instanceof Function) {
21-
return readableColor(headerColor({ theme }));
19+
return readableColor(darken(0.1, headerColor({ theme })));
2220
}
2321
return readableColor(headerColor);
2422
}};

‎src/docs/pages/components/DocsForms.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,38 @@ import { H1, SizeType } from '../../../text';
55
import { DocsPlayground } from '../../shared';
66
import DocsPageProps from './DocsPageProps';
77

8-
const codeSnippetInput =
9-
`import FormInput from '@ht2-labs/mural/forms/FormInput';
8+
const codeSnippetInput = `import FormInput from '@ht2-labs/mural/forms/FormInput';
109
<FormInput />
1110
`;
1211

13-
const codeSnippetTextArea =
14-
`import FormTextArea from '@ht2-labs/mural/forms/FormTextArea';
12+
const codeSnippetTextArea = `import FormTextArea from '@ht2-labs/mural/forms/FormTextArea';
1513
<FormTextArea label="Label" placeholder="Type something here..."/>
1614
`;
1715

18-
const DocsForms = ({}: DocsPageProps) => {
16+
const DocsForms = ({ }: DocsPageProps) => {
1917
return (
2018
<>
2119
<H1 size={SizeType.ExtraLarge}>Text</H1>
2220
<hr />
2321
<DocsPlayground code={codeSnippetInput}>
24-
<FormInput />
22+
<FormInput label={<span>Some Label:</span>} />
2523
</DocsPlayground>
2624
<DocsPlayground code={codeSnippetTextArea}>
27-
<FormTextArea label="Label" placeholder="Type something here..."/>
25+
<FormTextArea label="Label" placeholder="Type something here..." />
2826
</DocsPlayground>
2927
<DocsPlayground code={codeSnippetTextArea}>
3028
<FormSwitch />
3129
</DocsPlayground>
3230
<DocsPlayground>
33-
<FormCheckbox/>
31+
<FormCheckbox />
3432
</DocsPlayground>
3533
<DocsPlayground>
36-
<FormRadio group="group1"/>
37-
<FormRadio group="group1"/>
38-
<FormRadio group="group1"/>
39-
<FormRadio group="group2"/>
40-
<FormRadio group="group2"/>
41-
<FormRadio group="group2"/>
34+
<FormRadio group="group1" />
35+
<FormRadio group="group1" />
36+
<FormRadio group="group1" />
37+
<FormRadio group="group2" />
38+
<FormRadio group="group2" />
39+
<FormRadio group="group2" />
4240
</DocsPlayground>
4341
</>
4442
);

‎src/forms/FormInput.tsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,34 @@
33
// tslint:disable:no-this
44
import * as React from 'react';
55
import styled from 'styled-components';
6+
import { Label } from '../text';
67
import FormProps from './formProps';
78

89
const Input = styled.input`
910
background-color: #fff;
10-
border: 2px solid ${({ theme }) => theme.color.Button};
11-
border-radius: ${({ theme }) => theme.radius.Button};
11+
border: 2px solid #888;
12+
border-radius: ${({ theme }) => theme.radius.Small};
1213
padding: 8px 12px 9px;
1314
color: #000;
1415
font-size: 16px;
16+
&:hover {
17+
box-shadow: 0 0 0 1pt #888;
18+
}
1519
&:focus {
16-
outline: 8px solid aliceblue;
20+
outline: none;
21+
box-shadow: 0 0 0 1pt ${({ theme }) => theme.color.Button};
22+
border: 2px solid ${({ theme }) => theme.color.Button};
1723
}
1824
`;
1925

2026
class FormInput extends React.Component<FormProps> {
2127
public render() {
22-
return <Input {...this.props} />;
28+
return (
29+
<>
30+
{this.props.label !== undefined ? <Label margin>{this.props.label}</Label> : null}
31+
<Input {...this.props} />
32+
</>
33+
);
2334
}
2435
}
2536

‎src/forms/FormTextArea.tsx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,33 @@
33
// tslint:disable:no-this
44
import * as React from 'react';
55
import styled from 'styled-components';
6-
import { Label, SizeType } from '../text';
6+
import { Label } from '../text';
77
import FormProps from './formProps';
88

9+
const Input = styled.textarea`
10+
background-color: #fff;
11+
border: 2px solid #888;
12+
border-radius: ${({ theme }) => theme.radius.Small};
13+
padding: 8px 12px 9px;
14+
color: #000;
15+
font-size: 16px;
16+
min-width: 52px;
17+
min-height: 20px;
18+
&:hover {
19+
box-shadow: 0 0 0 1pt #888;
20+
}
21+
&:focus {
22+
outline: none;
23+
box-shadow: 0 0 0 1pt ${({ theme }) => theme.color.Button};
24+
border: 2px solid ${({ theme }) => theme.color.Button};
25+
}
26+
`;
927
class FormTextArea extends React.Component<FormProps> {
10-
1128
public render() {
12-
const Input = styled.textarea`
13-
background-color: #fff;
14-
border: 1px solid ${({ theme }) => theme.color.Button};
15-
border-radius: ${({ theme }) => theme.radius.Button};
16-
margin-top: 4px;
17-
padding: 8px 12px 9px;
18-
color: #000;
19-
font-size: 16px;
20-
min-width: 52px;
21-
min-height: 20px;
22-
&:focus {
23-
outline: 8px solid aliceblue;
24-
}
25-
`;
2629
return (
2730
<>
28-
{this.props.label !== undefined
29-
? <Label size={SizeType.Body}>{this.props.label}</Label>
30-
: null
31-
}
32-
<Input {...this.props}/>
31+
{this.props.label !== undefined ? <Label margin>{this.props.label}</Label> : null}
32+
<Input {...this.props} />
3333
</>
3434
);
3535
}

‎src/forms/formProps.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default interface FormProps {
2-
readonly label?: string;
2+
readonly label?: string | JSX.Element;
33
readonly danger?: boolean | undefined;
44
readonly group?: string | undefined;
55
readonly onChange?: (event: React.ChangeEvent<HTMLElement>) => void;

‎src/text/Label.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ const Label = ({
1111
strong,
1212
size,
1313
children,
14+
margin,
1415
}: TextProps) => {
1516
const LabelText = styled.label`
1617
display: block;
1718
color: ${color};
18-
font-size: ${getFontSize(size, SizeType.Body)};
19+
font-size: ${getFontSize(size, SizeType.Small)};
20+
margin: ${margin !== undefined ? '5px 0 5px 0' : 0};
1921
`;
2022

2123
return <LabelText>{fontStyle({ italic, strong, children })}</LabelText>;

‎src/themes/ThemeProvider.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const MuralThemeProvider = ({ children, theme }: ThemeProps) => {
3131
Button: mergedTheme.colorButton,
3232
ButtonDark: darken(DarkenValue, mergedTheme.colorButton),
3333
ButtonLight: lighten(lightenValue, mergedTheme.colorButton),
34-
ButtonText: readableColor(mergedTheme.colorButton),
34+
ButtonText: readableColor(darken(DarkenValue, mergedTheme.colorButton)),
3535

3636
Danger: mergedTheme.colorDanger,
3737
DangerDark: darken(DarkenValue, mergedTheme.colorDanger),
@@ -51,7 +51,7 @@ const MuralThemeProvider = ({ children, theme }: ThemeProps) => {
5151
Secondary: mergedTheme.colorSecondary,
5252
SecondaryDark: darken(DarkenValue, mergedTheme.colorSecondary),
5353
SecondaryLight: lighten(lightenValue, mergedTheme.colorSecondary),
54-
SecondaryText: readableColor(mergedTheme.colorSecondary),
54+
SecondaryText: readableColor(darken(DarkenValue, mergedTheme.colorSecondary)),
5555

5656
Success: mergedTheme.colorSuccess,
5757
SuccessDark: darken(DarkenValue, mergedTheme.colorSuccess),

‎src/themes/defaultTheme.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
export default {
22
colorBody: '#efefef',
3-
colorButton: '#076699',
3+
colorButton: '#007bff',
44
colorDanger: '#ce0000',
55
colorDisabled: 'rgba(40, 40, 40, 0.15)',
6-
colorPrimary: '#41bfee',
7-
colorSecondary: '#344a58',
6+
colorPrimary: '#0068A5',
7+
colorSecondary: '#007bff',
88
colorSuccess: '#22c65b',
99
colorWhite: '#fff',
1010
fontBase: '16px',
1111
radiusLarge: '50%',
1212
radiusMedium: '12px',
13-
radiusSmall: '2px',
13+
radiusSmall: '4px',
1414
shadowLarge: '0 3px 3px 3px rgba(0, 0, 0, 0.6)',
1515
shadowMedium: '0px 1px 8px rgba(0, 0, 0, 0.2)',
1616
shadowSmall: '0px 0px 5px rgba(0, 0, 0, 0.15)',

0 commit comments

Comments
 (0)