Skip to content

Commit 010e419

Browse files
yhattcasesandberg
yhatt
authored and
casesandberg
committed
Fix overflow edge of GitHubSwatch on Firefox (#387)
* Add fontSize style of default GithubSwatch In Firefox, the white edge of clicked GithubSwatch overflows from its container. It is caused by that the wrapped <span> grows height to base font size. * Update snapshot of Github component
1 parent f4faacf commit 010e419

File tree

2 files changed

+50
-0
lines changed

2 files changed

+50
-0
lines changed

‎src/components/github/GithubSwatch.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const GithubSwatch = ({ hover, color, onClick, onSwatchHover }) => {
1616
swatch: {
1717
width: '25px',
1818
height: '25px',
19+
fontSize: '0',
1920
},
2021
},
2122
'hover': {

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
5252
<div
5353
style={
5454
Object {
55+
"fontSize": "0",
5556
"height": "25px",
5657
"width": "25px",
5758
}
@@ -87,6 +88,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
8788
<div
8889
style={
8990
Object {
91+
"fontSize": "0",
9092
"height": "25px",
9193
"width": "25px",
9294
}
@@ -122,6 +124,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
122124
<div
123125
style={
124126
Object {
127+
"fontSize": "0",
125128
"height": "25px",
126129
"width": "25px",
127130
}
@@ -157,6 +160,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
157160
<div
158161
style={
159162
Object {
163+
"fontSize": "0",
160164
"height": "25px",
161165
"width": "25px",
162166
}
@@ -192,6 +196,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
192196
<div
193197
style={
194198
Object {
199+
"fontSize": "0",
195200
"height": "25px",
196201
"width": "25px",
197202
}
@@ -227,6 +232,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
227232
<div
228233
style={
229234
Object {
235+
"fontSize": "0",
230236
"height": "25px",
231237
"width": "25px",
232238
}
@@ -262,6 +268,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
262268
<div
263269
style={
264270
Object {
271+
"fontSize": "0",
265272
"height": "25px",
266273
"width": "25px",
267274
}
@@ -297,6 +304,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
297304
<div
298305
style={
299306
Object {
307+
"fontSize": "0",
300308
"height": "25px",
301309
"width": "25px",
302310
}
@@ -332,6 +340,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
332340
<div
333341
style={
334342
Object {
343+
"fontSize": "0",
335344
"height": "25px",
336345
"width": "25px",
337346
}
@@ -367,6 +376,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
367376
<div
368377
style={
369378
Object {
379+
"fontSize": "0",
370380
"height": "25px",
371381
"width": "25px",
372382
}
@@ -402,6 +412,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
402412
<div
403413
style={
404414
Object {
415+
"fontSize": "0",
405416
"height": "25px",
406417
"width": "25px",
407418
}
@@ -437,6 +448,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
437448
<div
438449
style={
439450
Object {
451+
"fontSize": "0",
440452
"height": "25px",
441453
"width": "25px",
442454
}
@@ -472,6 +484,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
472484
<div
473485
style={
474486
Object {
487+
"fontSize": "0",
475488
"height": "25px",
476489
"width": "25px",
477490
}
@@ -507,6 +520,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
507520
<div
508521
style={
509522
Object {
523+
"fontSize": "0",
510524
"height": "25px",
511525
"width": "25px",
512526
}
@@ -542,6 +556,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
542556
<div
543557
style={
544558
Object {
559+
"fontSize": "0",
545560
"height": "25px",
546561
"width": "25px",
547562
}
@@ -577,6 +592,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
577592
<div
578593
style={
579594
Object {
595+
"fontSize": "0",
580596
"height": "25px",
581597
"width": "25px",
582598
}
@@ -662,6 +678,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
662678
<div
663679
style={
664680
Object {
681+
"fontSize": "0",
665682
"height": "25px",
666683
"width": "25px",
667684
}
@@ -697,6 +714,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
697714
<div
698715
style={
699716
Object {
717+
"fontSize": "0",
700718
"height": "25px",
701719
"width": "25px",
702720
}
@@ -732,6 +750,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
732750
<div
733751
style={
734752
Object {
753+
"fontSize": "0",
735754
"height": "25px",
736755
"width": "25px",
737756
}
@@ -767,6 +786,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
767786
<div
768787
style={
769788
Object {
789+
"fontSize": "0",
770790
"height": "25px",
771791
"width": "25px",
772792
}
@@ -802,6 +822,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
802822
<div
803823
style={
804824
Object {
825+
"fontSize": "0",
805826
"height": "25px",
806827
"width": "25px",
807828
}
@@ -837,6 +858,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
837858
<div
838859
style={
839860
Object {
861+
"fontSize": "0",
840862
"height": "25px",
841863
"width": "25px",
842864
}
@@ -872,6 +894,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
872894
<div
873895
style={
874896
Object {
897+
"fontSize": "0",
875898
"height": "25px",
876899
"width": "25px",
877900
}
@@ -907,6 +930,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
907930
<div
908931
style={
909932
Object {
933+
"fontSize": "0",
910934
"height": "25px",
911935
"width": "25px",
912936
}
@@ -942,6 +966,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
942966
<div
943967
style={
944968
Object {
969+
"fontSize": "0",
945970
"height": "25px",
946971
"width": "25px",
947972
}
@@ -977,6 +1002,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
9771002
<div
9781003
style={
9791004
Object {
1005+
"fontSize": "0",
9801006
"height": "25px",
9811007
"width": "25px",
9821008
}
@@ -1012,6 +1038,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
10121038
<div
10131039
style={
10141040
Object {
1041+
"fontSize": "0",
10151042
"height": "25px",
10161043
"width": "25px",
10171044
}
@@ -1047,6 +1074,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
10471074
<div
10481075
style={
10491076
Object {
1077+
"fontSize": "0",
10501078
"height": "25px",
10511079
"width": "25px",
10521080
}
@@ -1082,6 +1110,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
10821110
<div
10831111
style={
10841112
Object {
1113+
"fontSize": "0",
10851114
"height": "25px",
10861115
"width": "25px",
10871116
}
@@ -1117,6 +1146,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
11171146
<div
11181147
style={
11191148
Object {
1149+
"fontSize": "0",
11201150
"height": "25px",
11211151
"width": "25px",
11221152
}
@@ -1152,6 +1182,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
11521182
<div
11531183
style={
11541184
Object {
1185+
"fontSize": "0",
11551186
"height": "25px",
11561187
"width": "25px",
11571188
}
@@ -1187,6 +1218,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
11871218
<div
11881219
style={
11891220
Object {
1221+
"fontSize": "0",
11901222
"height": "25px",
11911223
"width": "25px",
11921224
}
@@ -1272,6 +1304,7 @@ exports[`Github renders correctly 1`] = `
12721304
<div
12731305
style={
12741306
Object {
1307+
"fontSize": "0",
12751308
"height": "25px",
12761309
"width": "25px",
12771310
}
@@ -1307,6 +1340,7 @@ exports[`Github renders correctly 1`] = `
13071340
<div
13081341
style={
13091342
Object {
1343+
"fontSize": "0",
13101344
"height": "25px",
13111345
"width": "25px",
13121346
}
@@ -1342,6 +1376,7 @@ exports[`Github renders correctly 1`] = `
13421376
<div
13431377
style={
13441378
Object {
1379+
"fontSize": "0",
13451380
"height": "25px",
13461381
"width": "25px",
13471382
}
@@ -1377,6 +1412,7 @@ exports[`Github renders correctly 1`] = `
13771412
<div
13781413
style={
13791414
Object {
1415+
"fontSize": "0",
13801416
"height": "25px",
13811417
"width": "25px",
13821418
}
@@ -1412,6 +1448,7 @@ exports[`Github renders correctly 1`] = `
14121448
<div
14131449
style={
14141450
Object {
1451+
"fontSize": "0",
14151452
"height": "25px",
14161453
"width": "25px",
14171454
}
@@ -1447,6 +1484,7 @@ exports[`Github renders correctly 1`] = `
14471484
<div
14481485
style={
14491486
Object {
1487+
"fontSize": "0",
14501488
"height": "25px",
14511489
"width": "25px",
14521490
}
@@ -1482,6 +1520,7 @@ exports[`Github renders correctly 1`] = `
14821520
<div
14831521
style={
14841522
Object {
1523+
"fontSize": "0",
14851524
"height": "25px",
14861525
"width": "25px",
14871526
}
@@ -1517,6 +1556,7 @@ exports[`Github renders correctly 1`] = `
15171556
<div
15181557
style={
15191558
Object {
1559+
"fontSize": "0",
15201560
"height": "25px",
15211561
"width": "25px",
15221562
}
@@ -1552,6 +1592,7 @@ exports[`Github renders correctly 1`] = `
15521592
<div
15531593
style={
15541594
Object {
1595+
"fontSize": "0",
15551596
"height": "25px",
15561597
"width": "25px",
15571598
}
@@ -1587,6 +1628,7 @@ exports[`Github renders correctly 1`] = `
15871628
<div
15881629
style={
15891630
Object {
1631+
"fontSize": "0",
15901632
"height": "25px",
15911633
"width": "25px",
15921634
}
@@ -1622,6 +1664,7 @@ exports[`Github renders correctly 1`] = `
16221664
<div
16231665
style={
16241666
Object {
1667+
"fontSize": "0",
16251668
"height": "25px",
16261669
"width": "25px",
16271670
}
@@ -1657,6 +1700,7 @@ exports[`Github renders correctly 1`] = `
16571700
<div
16581701
style={
16591702
Object {
1703+
"fontSize": "0",
16601704
"height": "25px",
16611705
"width": "25px",
16621706
}
@@ -1692,6 +1736,7 @@ exports[`Github renders correctly 1`] = `
16921736
<div
16931737
style={
16941738
Object {
1739+
"fontSize": "0",
16951740
"height": "25px",
16961741
"width": "25px",
16971742
}
@@ -1727,6 +1772,7 @@ exports[`Github renders correctly 1`] = `
17271772
<div
17281773
style={
17291774
Object {
1775+
"fontSize": "0",
17301776
"height": "25px",
17311777
"width": "25px",
17321778
}
@@ -1762,6 +1808,7 @@ exports[`Github renders correctly 1`] = `
17621808
<div
17631809
style={
17641810
Object {
1811+
"fontSize": "0",
17651812
"height": "25px",
17661813
"width": "25px",
17671814
}
@@ -1797,6 +1844,7 @@ exports[`Github renders correctly 1`] = `
17971844
<div
17981845
style={
17991846
Object {
1847+
"fontSize": "0",
18001848
"height": "25px",
18011849
"width": "25px",
18021850
}
@@ -1836,6 +1884,7 @@ exports[`GithubSwatch renders correctly 1`] = `
18361884
<div
18371885
style={
18381886
Object {
1887+
"fontSize": "0",
18391888
"height": "25px",
18401889
"width": "25px",
18411890
}

0 commit comments

Comments
 (0)