Skip to content

Commit f6af70b

Browse files
authored
Wrap Link component with <g> instead of <svg> (#187)
* Wrap Link component with <g> instead of <svg> * Update jest snapshoots Link markup change
1 parent b05c260 commit f6af70b

File tree

3 files changed

+60
-60
lines changed

3 files changed

+60
-60
lines changed

src/components/link/Link.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export default class Link extends React.Component {
9797
};
9898

9999
return (
100-
<svg>
100+
<g>
101101
<path {...lineProps} id={id} />
102102
{label && (
103103
<text style={{ textAnchor: "middle" }} {...textProps}>
@@ -106,7 +106,7 @@ export default class Link extends React.Component {
106106
</textPath>
107107
</text>
108108
)}
109-
</svg>
109+
</g>
110110
);
111111
}
112112
}

test/graph/__snapshots__/graph.snapshot.spec.js.snap

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
115115
}
116116
transform={null}
117117
>
118-
<svg>
118+
<g>
119119
<path
120120
className="link"
121121
d="M40,200A0,0 0 0,1 140,20"
@@ -134,8 +134,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
134134
}
135135
}
136136
/>
137-
</svg>
138-
<svg>
137+
</g>
138+
<g>
139139
<path
140140
className="link"
141141
d="M40,200A0,0 0 0,1 20,110"
@@ -154,8 +154,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
154154
}
155155
}
156156
/>
157-
</svg>
158-
<svg>
157+
</g>
158+
<g>
159159
<path
160160
className="link"
161161
d="M30,184A0,0 0 0,1 305,745"
@@ -174,8 +174,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
174174
}
175175
}
176176
/>
177-
</svg>
178-
<svg>
177+
</g>
178+
<g>
179179
<path
180180
className="link"
181181
d="M200,300A0,0 0 0,1 305,745"
@@ -194,8 +194,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
194194
}
195195
}
196196
/>
197-
</svg>
198-
<svg>
197+
</g>
198+
<g>
199199
<path
200200
className="link"
201201
d="M120,270A0,0 0 0,1 305,745"
@@ -214,8 +214,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
214214
}
215215
}
216216
/>
217-
</svg>
218-
<svg>
217+
</g>
218+
<g>
219219
<path
220220
className="link"
221221
d="M20,110A0,0 0 0,1 305,745"
@@ -234,8 +234,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
234234
}
235235
}
236236
/>
237-
</svg>
238-
<svg>
237+
</g>
238+
<g>
239239
<path
240240
className="link"
241241
d="M190,609A0,0 0 0,1 305,745"
@@ -254,8 +254,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
254254
}
255255
}
256256
/>
257-
</svg>
258-
<svg>
257+
</g>
258+
<g>
259259
<path
260260
className="link"
261261
d="M40,200A0,0 0 0,1 101,201"
@@ -274,8 +274,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
274274
}
275275
}
276276
/>
277-
</svg>
278-
<svg>
277+
</g>
278+
<g>
279279
<path
280280
className="link"
281281
d="M40,200A0,0 0 0,1 2,200"
@@ -294,8 +294,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
294294
}
295295
}
296296
/>
297-
</svg>
298-
<svg>
297+
</g>
298+
<g>
299299
<path
300300
className="link"
301301
d="M404,404A0,0 0 0,1 14,30"
@@ -314,8 +314,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
314314
}
315315
}
316316
/>
317-
</svg>
318-
<svg>
317+
</g>
318+
<g>
319319
<path
320320
className="link"
321321
d="M305,745A0,0 0 0,1 20,110"
@@ -334,8 +334,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
334334
}
335335
}
336336
/>
337-
</svg>
338-
<svg>
337+
</g>
338+
<g>
339339
<path
340340
className="link"
341341
d="M40,200A0,0 0 0,1 14,250"
@@ -354,8 +354,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
354354
}
355355
}
356356
/>
357-
</svg>
358-
<svg>
357+
</g>
358+
<g>
359359
<path
360360
className="link"
361361
d="M30,184A0,0 0 0,1 190,609"
@@ -374,8 +374,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
374374
}
375375
}
376376
/>
377-
</svg>
378-
<svg>
377+
</g>
378+
<g>
379379
<path
380380
className="link"
381381
d="M14,259A0,0 0 0,1 190,609"
@@ -394,8 +394,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
394394
}
395395
}
396396
/>
397-
</svg>
398-
<svg>
397+
</g>
398+
<g>
399399
<path
400400
className="link"
401401
d="M409,500A0,0 0 0,1 190,609"
@@ -414,8 +414,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
414414
}
415415
}
416416
/>
417-
</svg>
418-
<svg>
417+
</g>
418+
<g>
419419
<path
420420
className="link"
421421
d="M520,123A0,0 0 0,1 14,259"
@@ -434,8 +434,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
434434
}
435435
}
436436
/>
437-
</svg>
438-
<svg>
437+
</g>
438+
<g>
439439
<path
440440
className="link"
441441
d="M190,609A0,0 0 0,1 14,259"
@@ -454,8 +454,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
454454
}
455455
}
456456
/>
457-
</svg>
458-
<svg>
457+
</g>
458+
<g>
459459
<path
460460
className="link"
461461
d="M305,745A0,0 0 0,1 120,270"
@@ -474,8 +474,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
474474
}
475475
}
476476
/>
477-
</svg>
478-
<svg>
477+
</g>
478+
<g>
479479
<path
480480
className="link"
481481
d="M14,20A0,0 0 0,1 120,270"
@@ -494,8 +494,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
494494
}
495495
}
496496
/>
497-
</svg>
498-
<svg>
497+
</g>
498+
<g>
499499
<path
500500
className="link"
501501
d="M305,745A0,0 0 0,1 200,300"
@@ -514,8 +514,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
514514
}
515515
}
516516
/>
517-
</svg>
518-
<svg>
517+
</g>
518+
<g>
519519
<path
520520
className="link"
521521
d="M40,200A0,0 0 0,1 200,300"
@@ -534,8 +534,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
534534
}
535535
}
536536
/>
537-
</svg>
538-
<svg>
537+
</g>
538+
<g>
539539
<path
540540
className="link"
541541
d="M200,300A0,0 0 0,1 40,200"
@@ -554,8 +554,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
554554
}
555555
}
556556
/>
557-
</svg>
558-
<svg>
557+
</g>
558+
<g>
559559
<path
560560
className="link"
561561
d="M20,1A0,0 0 0,1 90,90"
@@ -574,8 +574,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
574574
}
575575
}
576576
/>
577-
</svg>
578-
<svg>
577+
</g>
578+
<g>
579579
<path
580580
className="link"
581581
d="M90,656A0,0 0 0,1 90,90"
@@ -594,8 +594,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
594594
}
595595
}
596596
/>
597-
</svg>
598-
<svg>
597+
</g>
598+
<g>
599599
<path
600600
className="link"
601601
d="M190,609A0,0 0 0,1 30,184"
@@ -614,8 +614,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
614614
}
615615
}
616616
/>
617-
</svg>
618-
<svg>
617+
</g>
618+
<g>
619619
<path
620620
className="link"
621621
d="M305,745A0,0 0 0,1 30,184"
@@ -634,8 +634,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
634634
}
635635
}
636636
/>
637-
</svg>
638-
<svg>
637+
</g>
638+
<g>
639639
<path
640640
className="link"
641641
d="M190,609A0,0 0 0,1 409,500"
@@ -654,8 +654,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
654654
}
655655
}
656656
/>
657-
</svg>
658-
<svg>
657+
</g>
658+
<g>
659659
<path
660660
className="link"
661661
d="M120,270A0,0 0 0,1 14,20"
@@ -674,7 +674,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
674674
}
675675
}
676676
/>
677-
</svg>
677+
</g>
678678
<g
679679
className="node"
680680
cx="40"

test/link/__snapshots__/link.snapshot.spec.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Snapshot - Link Component should match snapshot 1`] = `
4-
<svg>
4+
<g>
55
<path
66
onClick={[Function]}
77
onContextMenu={[Function]}
@@ -17,5 +17,5 @@ exports[`Snapshot - Link Component should match snapshot 1`] = `
1717
}
1818
}
1919
/>
20-
</svg>
20+
</g>
2121
`;

0 commit comments

Comments
 (0)