Skip to content

Commit 76fbb3e

Browse files
elanoismelanoism
authored
Fix checkbox's checkmark not showing on Safari (#363)
* Embed svg in dom
1 parent 94660a0 commit 76fbb3e

File tree

3 files changed

+51
-34
lines changed

3 files changed

+51
-34
lines changed

‎src/components/Checkbox/Checkbox.js

+9-14
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,11 @@ import PropTypes from 'prop-types';
33
import styled, { css } from 'react-emotion';
44
import { hideVisually, size } from 'polished';
55

6+
import CheckedIcon from './checked-icon.svg';
67
import { disableVisually } from '../../styles/style-helpers';
78
import { childrenPropType } from '../../util/shared-prop-types';
89
import { uniqueId } from '../../util/id';
910

10-
const checkmarkSvg = fill =>
11-
// NOTE: Optimizing SVGs in data URIs, https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
12-
`data:image/svg+xml,${encodeURIComponent(
13-
`<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><path d='M3.438 6.973l5.097-5.694a.858.858 0 0 1 1.175-.086c.349.288.389.793.089 1.128l-5.73 6.4a.856.856 0 0 1-1.264 0L.201 5.812a.778.778 0 0 1 .09-1.128.858.858 0 0 1 1.174.086l1.973 2.203z' fill='${fill}' fill-rule='nonzero'/></svg>`
14-
)}`;
15-
1611
const labelBaseStyles = ({ theme }) => css`
1712
label: checkbox__label;
1813
color: ${theme.colors.n700};
@@ -36,10 +31,10 @@ const labelBaseStyles = ({ theme }) => css`
3631
transition: border 0.05s ease-in;
3732
}
3833
39-
&::after {
34+
svg {
4035
${size(10)};
4136
box-sizing: border-box;
42-
content: url("${checkmarkSvg(theme.colors.p500)}");
37+
fill: ${theme.colors.p500};
4338
display: block;
4439
left: 3px;
4540
line-height: 0;
@@ -49,7 +44,6 @@ const labelBaseStyles = ({ theme }) => css`
4944
transform: translateY(-50%) scale(0, 0);
5045
transition: transform 0.05s ease-in, opacity 0.05s ease-in;
5146
}
52-
5347
`;
5448

5549
const labelInvalidStyles = ({ theme, invalid }) =>
@@ -60,8 +54,8 @@ const labelInvalidStyles = ({ theme, invalid }) =>
6054
border-color: ${theme.colors.r500};
6155
}
6256
63-
&:not(:focus)::after {
64-
content: url("${checkmarkSvg(theme.colors.r500)}");
57+
&:not(:focus) svg {
58+
fill: ${theme.colors.r500};
6559
}
6660
`;
6761

@@ -77,9 +71,9 @@ const labelDisabledStyles = ({ theme, disabled }) =>
7771
background-color: ${theme.colors.n100};
7872
}
7973
80-
&::after {
74+
& svg {
8175
${disableVisually()};
82-
content: url("${checkmarkSvg(theme.colors.n500)}");
76+
fill: ${theme.colors.n500};
8377
}
8478
`;
8579

@@ -92,7 +86,7 @@ const inputStyles = ({ theme }) => css`
9286
border-color: ${theme.colors.p500};
9387
}
9488
95-
&:checked + label::after {
89+
&:checked + label > svg {
9690
transform: translateY(-50%) scale(1, 1);
9791
opacity: 1;
9892
}
@@ -133,6 +127,7 @@ const Checkbox = ({ children, id: customId, className, ...props }) => {
133127
<CheckboxInput {...props} id={id} type="checkbox" />
134128
<CheckboxLabel {...props} htmlFor={id}>
135129
{children}
130+
<CheckedIcon aria-hidden="true" />
136131
</CheckboxLabel>
137132
</CheckboxWrapper>
138133
);

‎src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap

+36-20
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ exports[`Checkbox should render with checked styles when passed the checked prop
2525
border-color: #3388FF;
2626
}
2727
28-
.circuit-0:checked + label::after {
28+
.circuit-0:checked + label > svg {
2929
-webkit-transform: translateY(-50%) scale(1,1);
3030
-ms-transform: translateY(-50%) scale(1,1);
3131
transform: translateY(-50%) scale(1,1);
@@ -63,11 +63,11 @@ exports[`Checkbox should render with checked styles when passed the checked prop
6363
transition: border 0.05s ease-in;
6464
}
6565
66-
.circuit-2::after {
66+
.circuit-2 svg {
6767
height: 10px;
6868
width: 10px;
6969
box-sizing: border-box;
70-
content: url("data:image/svg+xml,%3Csvg%20width%3D'10'%20height%3D'10'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M3.438%206.973l5.097-5.694a.858.858%200%200%201%201.175-.086c.349.288.389.793.089%201.128l-5.73%206.4a.856.856%200%200%201-1.264%200L.201%205.812a.778.778%200%200%201%20.09-1.128.858.858%200%200%201%201.174.086l1.973%202.203z'%20fill%3D'%233388FF'%20fill-rule%3D'nonzero'%2F%3E%3C%2Fsvg%3E");
70+
fill: #3388FF;
7171
display: block;
7272
left: 3px;
7373
line-height: 0;
@@ -103,7 +103,11 @@ exports[`Checkbox should render with checked styles when passed the checked prop
103103
name="name"
104104
onChange={[MockFunction]}
105105
value=""
106-
/>
106+
>
107+
<div>
108+
checked-icon.svg
109+
</div>
110+
</label>
107111
</div>
108112
`;
109113

@@ -132,7 +136,7 @@ exports[`Checkbox should render with default styles 1`] = `
132136
border-color: #3388FF;
133137
}
134138
135-
.circuit-0:checked + label::after {
139+
.circuit-0:checked + label > svg {
136140
-webkit-transform: translateY(-50%) scale(1,1);
137141
-ms-transform: translateY(-50%) scale(1,1);
138142
transform: translateY(-50%) scale(1,1);
@@ -170,11 +174,11 @@ exports[`Checkbox should render with default styles 1`] = `
170174
transition: border 0.05s ease-in;
171175
}
172176
173-
.circuit-2::after {
177+
.circuit-2 svg {
174178
height: 10px;
175179
width: 10px;
176180
box-sizing: border-box;
177-
content: url("data:image/svg+xml,%3Csvg%20width%3D'10'%20height%3D'10'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M3.438%206.973l5.097-5.694a.858.858%200%200%201%201.175-.086c.349.288.389.793.089%201.128l-5.73%206.4a.856.856%200%200%201-1.264%200L.201%205.812a.778.778%200%200%201%20.09-1.128.858.858%200%200%201%201.174.086l1.973%202.203z'%20fill%3D'%233388FF'%20fill-rule%3D'nonzero'%2F%3E%3C%2Fsvg%3E");
181+
fill: #3388FF;
178182
display: block;
179183
left: 3px;
180184
line-height: 0;
@@ -210,7 +214,11 @@ exports[`Checkbox should render with default styles 1`] = `
210214
name="name"
211215
onChange={[MockFunction]}
212216
value=""
213-
/>
217+
>
218+
<div>
219+
checked-icon.svg
220+
</div>
221+
</label>
214222
</div>
215223
`;
216224

@@ -239,7 +247,7 @@ exports[`Checkbox should render with disabled styles when passed the disabled pr
239247
border-color: #3388FF;
240248
}
241249
242-
.circuit-0:checked + label::after {
250+
.circuit-0:checked + label > svg {
243251
-webkit-transform: translateY(-50%) scale(1,1);
244252
-ms-transform: translateY(-50%) scale(1,1);
245253
transform: translateY(-50%) scale(1,1);
@@ -280,11 +288,11 @@ exports[`Checkbox should render with disabled styles when passed the disabled pr
280288
transition: border 0.05s ease-in;
281289
}
282290
283-
.circuit-2::after {
291+
.circuit-2 svg {
284292
height: 10px;
285293
width: 10px;
286294
box-sizing: border-box;
287-
content: url("data:image/svg+xml,%3Csvg%20width%3D'10'%20height%3D'10'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M3.438%206.973l5.097-5.694a.858.858%200%200%201%201.175-.086c.349.288.389.793.089%201.128l-5.73%206.4a.856.856%200%200%201-1.264%200L.201%205.812a.778.778%200%200%201%20.09-1.128.858.858%200%200%201%201.174.086l1.973%202.203z'%20fill%3D'%233388FF'%20fill-rule%3D'nonzero'%2F%3E%3C%2Fsvg%3E");
295+
fill: #3388FF;
288296
display: block;
289297
left: 3px;
290298
line-height: 0;
@@ -307,11 +315,11 @@ exports[`Checkbox should render with disabled styles when passed the disabled pr
307315
background-color: #FAFBFC;
308316
}
309317
310-
.circuit-2::after {
318+
.circuit-2 svg {
311319
opacity: 0.5;
312320
pointer-events: none;
313321
box-shadow: none;
314-
content: url("data:image/svg+xml,%3Csvg%20width%3D'10'%20height%3D'10'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M3.438%206.973l5.097-5.694a.858.858%200%200%201%201.175-.086c.349.288.389.793.089%201.128l-5.73%206.4a.856.856%200%200%201-1.264%200L.201%205.812a.778.778%200%200%201%20.09-1.128.858.858%200%200%201%201.174.086l1.973%202.203z'%20fill%3D'%239DA7B1'%20fill-rule%3D'nonzero'%2F%3E%3C%2Fsvg%3E");
322+
fill: #9DA7B1;
315323
}
316324
317325
<div
@@ -335,7 +343,11 @@ exports[`Checkbox should render with disabled styles when passed the disabled pr
335343
name="name"
336344
onChange={[MockFunction]}
337345
value=""
338-
/>
346+
>
347+
<div>
348+
checked-icon.svg
349+
</div>
350+
</label>
339351
</div>
340352
`;
341353

@@ -364,7 +376,7 @@ exports[`Checkbox should render with invalid styles when passed the invalid prop
364376
border-color: #3388FF;
365377
}
366378
367-
.circuit-0:checked + label::after {
379+
.circuit-0:checked + label > svg {
368380
-webkit-transform: translateY(-50%) scale(1,1);
369381
-ms-transform: translateY(-50%) scale(1,1);
370382
transform: translateY(-50%) scale(1,1);
@@ -402,11 +414,11 @@ exports[`Checkbox should render with invalid styles when passed the invalid prop
402414
transition: border 0.05s ease-in;
403415
}
404416
405-
.circuit-2::after {
417+
.circuit-2 svg {
406418
height: 10px;
407419
width: 10px;
408420
box-sizing: border-box;
409-
content: url("data:image/svg+xml,%3Csvg%20width%3D'10'%20height%3D'10'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M3.438%206.973l5.097-5.694a.858.858%200%200%201%201.175-.086c.349.288.389.793.089%201.128l-5.73%206.4a.856.856%200%200%201-1.264%200L.201%205.812a.778.778%200%200%201%20.09-1.128.858.858%200%200%201%201.174.086l1.973%202.203z'%20fill%3D'%233388FF'%20fill-rule%3D'nonzero'%2F%3E%3C%2Fsvg%3E");
421+
fill: #3388FF;
410422
display: block;
411423
left: 3px;
412424
line-height: 0;
@@ -425,8 +437,8 @@ exports[`Checkbox should render with invalid styles when passed the invalid prop
425437
border-color: #FF7559;
426438
}
427439
428-
.circuit-2:not(:focus)::after {
429-
content: url("data:image/svg+xml,%3Csvg%20width%3D'10'%20height%3D'10'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M3.438%206.973l5.097-5.694a.858.858%200%200%201%201.175-.086c.349.288.389.793.089%201.128l-5.73%206.4a.856.856%200%200%201-1.264%200L.201%205.812a.778.778%200%200%201%20.09-1.128.858.858%200%200%201%201.174.086l1.973%202.203z'%20fill%3D'%23FF7559'%20fill-rule%3D'nonzero'%2F%3E%3C%2Fsvg%3E");
440+
.circuit-2:not(:focus) svg {
441+
fill: #FF7559;
430442
}
431443
432444
<div
@@ -450,6 +462,10 @@ exports[`Checkbox should render with invalid styles when passed the invalid prop
450462
name="name"
451463
onChange={[MockFunction]}
452464
value=""
453-
/>
465+
>
466+
<div>
467+
checked-icon.svg
468+
</div>
469+
</label>
454470
</div>
455471
`;

‎src/components/Checkbox/checked-icon.svg

+6
Loading

0 commit comments

Comments
 (0)