Skip to content

Commit bfd978e

Browse files
arturbienarturbien
committed
fix(radio,checkbox): indicate that Input is focused
1 parent 6f4a362 commit bfd978e

File tree

3 files changed

+80
-89
lines changed

3 files changed

+80
-89
lines changed

‎src/components/Checkbox/Checkbox.js‎

Lines changed: 24 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,30 @@ import React from 'react';
22
import propTypes from 'prop-types';
33

44
import styled, { css } from 'styled-components';
5-
import { createDisabledTextStyles, createHatchedBackground } from '../common';
5+
import { createHatchedBackground } from '../common';
66

7-
import { padding, fontSizes } from '../common/system';
87
import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
98
import Cutout from '../Cutout/Cutout';
109
import { StyledListItem } from '../ListItem/ListItem';
10+
import {
11+
size,
12+
StyledInput,
13+
StyledLabel,
14+
LabelText
15+
} from '../SwitchBase/SwitchBase';
1116

12-
const checkboxSize = 20;
13-
14-
const StyledLabel = styled.label`
15-
display: inline-flex;
16-
align-items: center;
17-
position: relative;
18-
margin: ${padding.sm} 0;
19-
cursor: pointer;
20-
-webkit-user-select: none;
21-
-moz-user-select: none;
22-
-ms-user-select: none;
23-
user-select: none;
24-
font-size: ${fontSizes.md};
25-
${props => props.isDisabled && createDisabledTextStyles()}
26-
27-
${StyledListItem} & {
28-
margin: 0;
29-
height: 100%;
30-
}
31-
`;
32-
33-
const StyledInput = styled.input`
34-
position: absolute;
35-
left: 0;
36-
margin: 0;
37-
width: ${checkboxSize}px;
38-
height: ${checkboxSize}px;
39-
opacity: 0;
40-
z-index: -99;
41-
`;
4217
const sharedCheckboxStyles = css`
18+
width: ${size}px;
19+
height: ${size}px;
4320
display: flex;
4421
align-items: center;
4522
justify-content: space-around;
4623
margin-right: 0.5rem;
4724
`;
4825
const StyledCheckbox = styled(Cutout)`
4926
${sharedCheckboxStyles}
50-
width: ${checkboxSize}px;
51-
height: ${checkboxSize}px;
27+
width: ${size}px;
28+
height: ${size}px;
5229
background: ${({ theme, isDisabled }) =>
5330
isDisabled ? theme.material : theme.canvas};
5431
&:before {
@@ -62,8 +39,8 @@ const StyledFlatCheckbox = styled.div`
6239
background: ${({ theme, isDisabled }) =>
6340
isDisabled ? theme.flatLight : theme.canvas};
6441
${sharedCheckboxStyles}
65-
width: ${checkboxSize - 4}px;
66-
height: ${checkboxSize - 4}px;
42+
width: ${size - 4}px;
43+
height: ${size - 4}px;
6744
outline: none;
6845
border: 2px solid ${({ theme }) => theme.flatDark};
6946
background: ${({ theme, isDisabled }) =>
@@ -77,8 +54,8 @@ const StyledMenuCheckbox = styled.div`
7754
background: ${({ theme, isDisabled }) =>
7855
isDisabled ? theme.flatLight : theme.canvas};
7956
${sharedCheckboxStyles}
80-
width: ${checkboxSize - 4}px;
81-
height: ${checkboxSize - 4}px;
57+
width: ${size - 4}px;
58+
height: ${size - 4}px;
8259
background: none;
8360
border: none;
8461
outline: none;
@@ -172,10 +149,6 @@ const IndeterminateIcon = styled.span.attrs(() => ({
172149
`};
173150
}
174151
`;
175-
const LabelText = styled.span`
176-
display: inline-block;
177-
line-height: 1;
178-
`;
179152

180153
const CheckboxComponents = {
181154
flat: StyledFlatCheckbox,
@@ -218,15 +191,6 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
218191
}
219192
return (
220193
<StyledLabel isDisabled={disabled} className={className} style={style}>
221-
<CheckboxComponent
222-
checked={state}
223-
indeterminate={indeterminate}
224-
isDisabled={disabled}
225-
role='presentation'
226-
>
227-
{Icon && <Icon isDisabled={disabled} variant={variant} />}
228-
</CheckboxComponent>
229-
{label && <LabelText>{label}</LabelText>}
230194
<StyledInput
231195
disabled={disabled}
232196
onChange={disabled ? undefined : handleChange}
@@ -239,6 +203,15 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
239203
ref={ref}
240204
{...otherProps}
241205
/>
206+
<CheckboxComponent
207+
checked={state}
208+
indeterminate={indeterminate}
209+
isDisabled={disabled}
210+
role='presentation'
211+
>
212+
{Icon && <Icon isDisabled={disabled} variant={variant} />}
213+
</CheckboxComponent>
214+
{label && <LabelText>{label}</LabelText>}
242215
</StyledLabel>
243216
);
244217
});

‎src/components/Radio/Radio.js‎

Lines changed: 10 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,20 @@ import React from 'react';
22
import propTypes from 'prop-types';
33

44
import styled, { css } from 'styled-components';
5-
import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
6-
import { padding, fontSizes } from '../common/system';
5+
import { createFlatBoxStyles } from '../common';
76
import Cutout from '../Cutout/Cutout';
87
import { StyledListItem } from '../ListItem/ListItem';
98

10-
const radioSize = '20px';
11-
const StyledLabel = styled.label`
12-
display: inline-flex;
13-
align-items: center;
14-
position: relative;
15-
margin: ${padding.sm} 0;
16-
cursor: pointer;
17-
-webkit-user-select: none;
18-
-moz-user-select: none;
19-
-ms-user-select: none;
20-
user-select: none;
21-
font-size: ${fontSizes.md};
22-
${props => props.isDisabled && createDisabledTextStyles()}
23-
24-
${StyledListItem} & {
25-
margin: 0;
26-
height: 100%;
27-
}
28-
`;
29-
30-
const StyledInput = styled.input`
31-
position: absolute;
32-
left: 0;
33-
margin: 0;
34-
width: ${radioSize};
35-
height: ${radioSize};
36-
opacity: 0;
37-
z-index: -99;
38-
`;
9+
import {
10+
size,
11+
StyledInput,
12+
StyledLabel,
13+
LabelText
14+
} from '../SwitchBase/SwitchBase';
3915

4016
const sharedCheckboxStyles = css`
41-
width: ${radioSize};
42-
height: ${radioSize};
17+
width: ${size}px;
18+
height: ${size}px;
4319
border-radius: 50%;
4420
display: flex;
4521
align-items: center;
@@ -122,10 +98,6 @@ const Icon = styled.span.attrs(() => ({
12298
`};
12399
}
124100
`;
125-
const LabelText = styled.span`
126-
display: inline-block;
127-
line-height: 1;
128-
`;
129101

130102
const CheckboxComponents = {
131103
flat: StyledFlatCheckbox,
@@ -156,7 +128,6 @@ const Radio = React.forwardRef(function Radio(props, ref) {
156128
>
157129
{checked && <Icon isDisabled={disabled} variant={variant} />}
158130
</CheckboxComponent>
159-
{label && <LabelText>{label}</LabelText>}
160131
<StyledInput
161132
disabled={disabled}
162133
onChange={disabled ? undefined : onChange}
@@ -166,6 +137,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
166137
ref={ref}
167138
{...otherProps}
168139
/>
140+
{label && <LabelText>{label}</LabelText>}
169141
</StyledLabel>
170142
);
171143
});

‎src/components/SwitchBase/SwitchBase.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import styled from 'styled-components';
2+
import { createDisabledTextStyles, focusOutline } from '../common';
3+
4+
import { padding, fontSizes } from '../common/system';
5+
import { StyledListItem } from '../ListItem/ListItem';
6+
7+
export const size = 20;
8+
9+
export const StyledInput = styled.input`
10+
position: absolute;
11+
left: 0;
12+
margin: 0;
13+
width: ${size}px;
14+
height: ${size}px;
15+
opacity: 0;
16+
z-index: -99;
17+
`;
18+
19+
export const StyledLabel = styled.label`
20+
display: inline-flex;
21+
align-items: center;
22+
position: relative;
23+
margin: ${padding.sm} 0;
24+
cursor: pointer;
25+
-webkit-user-select: none;
26+
-moz-user-select: none;
27+
-ms-user-select: none;
28+
user-select: none;
29+
font-size: ${fontSizes.md};
30+
${props => props.isDisabled && createDisabledTextStyles()}
31+
32+
${StyledListItem} & {
33+
margin: 0;
34+
height: 100%;
35+
}
36+
`;
37+
38+
// TODO how to handle focus styles in 'menu' variant of Checkbox/Radio?
39+
export const LabelText = styled.span`
40+
display: inline-block;
41+
line-height: 1;
42+
padding: 2px;
43+
${StyledInput}:focus ~ & {
44+
${focusOutline}
45+
}
46+
`;

0 commit comments

Comments
 (0)