git.iko.soy/bridge
on master help sign in
disclaimer: fix checkbox alignment
16df219James Acklin
src/indigo-react/components/CheckboxInput.js+12−18
compare with master
unifiedsplit
@@ -1,7 +1,6 @@
1import React from 'react';
1import React from 'react';
2import cn from 'classnames';
2import cn from 'classnames';
3
3
4−import Flex from './Flex';
5import { useField } from 'react-final-form';
4import { useField } from 'react-final-form';
6import { Checkbox } from '@tlon/indigo-react';
5import { Checkbox } from '@tlon/indigo-react';
7
6
@@ -24,9 +23,7 @@ export default function CheckboxInput({
24 disabled = disabled || submitting || submitSucceeded;
23 disabled = disabled || submitting || submitSucceeded;
25
24
26 return (
25 return (
27− <Flex
26+ <div
28− row
29− align="center"
30 className={cn(className, {
27 className={cn(className, {
31 mv2: !inline,
28 mv2: !inline,
32 black: !disabled,
29 black: !disabled,
@@ -39,22 +36,19 @@ export default function CheckboxInput({
39 }),
36 }),
40 }}>
37 }}>
41 {/* we totally hide the checkbox itself */}
38 {/* we totally hide the checkbox itself */}
42− <Flex.Item as="input" className="super-hidden" id={name} {...input} />
39+ <input checkbox className="super-hidden" id={name} {...input} />
43 {/* and then display a prettier one in its stead */}
40 {/* and then display a prettier one in its stead */}
44− <Flex.Item
45− flex
46− as="label"
41+ <label
47− className={cn(
42+ style={{
48− { mr3: !inline },
43+ display: 'flex',
49− 'lh-tall us-none pointer flex-row align-center'
44+ alignItems: 'center',
50− )}
45+ cursor: 'pointer',
51− style={{ fontSize: '14px' }}
46+ fontSize: '14px',
47+ }}
52 htmlFor={name}>
48 htmlFor={name}>
53− <Flex style={{ marginRight: '8px' }}>
54− <Checkbox selected={input.checked} />
49+ <Checkbox selected={input.checked} style={{ marginRight: '8px' }} />
55− </Flex>
56 {label}
50 {label}
57− </Flex.Item>
51+ </label>
58− </Flex>
52+ </div>
59 );
53 );
60}
54}