Skip to content

Commit 0d72df8

Browse files
arai-aarai-a
authored
Put radio buttons into labels (#5738)
1 parent f9525d4 commit 0d72df8

7 files changed

Lines changed: 1044 additions & 813 deletions

File tree

‎src/components/shared/StackImplementationSetting.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class StackImplementationSettingImpl extends PureComponent<Props> {
4747
) {
4848
const htmlId = `implementation-radio-${implementationFilter}`;
4949
return (
50-
<>
50+
<label className="photon-label photon-label-micro" htmlFor={htmlId}>
5151
<Localized id={labelL10nId} attrs={{ title: true }}>
5252
<input
5353
type="radio"
@@ -58,13 +58,10 @@ class StackImplementationSettingImpl extends PureComponent<Props> {
5858
checked={this.props.implementationFilter === implementationFilter}
5959
/>
6060
</Localized>
61-
<Localized id={labelL10nId} attrs={{ title: true }}>
62-
<label
63-
className="photon-label photon-label-micro photon-label-horiz-padding"
64-
htmlFor={htmlId}
65-
></label>
61+
<Localized id={labelL10nId}>
62+
<span className="photon-label-horiz-padding"></span>
6663
</Localized>
67-
</>
64+
</label>
6865
);
6966
}
7067

‎src/test/components/__snapshots__/FlameGraph.test.tsx.snap‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -415,48 +415,57 @@ exports[`FlameGraph matches the snapshot 1`] = `
415415
<li
416416
class="panelSettingsListItem"
417417
>
418-
<input
419-
checked=""
420-
class="photon-radio photon-radio-micro"
421-
id="implementation-radio-combined"
422-
title="Do not filter the stack frames"
423-
type="radio"
424-
value="combined"
425-
/>
426418
<label
427-
class="photon-label photon-label-micro photon-label-horiz-padding"
419+
class="photon-label photon-label-micro"
428420
for="implementation-radio-combined"
429-
title="Do not filter the stack frames"
430421
>
431-
All frames
422+
<input
423+
checked=""
424+
class="photon-radio photon-radio-micro"
425+
id="implementation-radio-combined"
426+
title="Do not filter the stack frames"
427+
type="radio"
428+
value="combined"
429+
/>
430+
<span
431+
class="photon-label-horiz-padding"
432+
>
433+
All frames
434+
</span>
432435
</label>
433-
<input
434-
class="photon-radio photon-radio-micro"
435-
id="implementation-radio-js"
436-
title="Show only the stack frames related to script execution"
437-
type="radio"
438-
value="js"
439-
/>
440436
<label
441-
class="photon-label photon-label-micro photon-label-horiz-padding"
437+
class="photon-label photon-label-micro"
442438
for="implementation-radio-js"
443-
title="Show only the stack frames related to script execution"
444439
>
445-
Script
440+
<input
441+
class="photon-radio photon-radio-micro"
442+
id="implementation-radio-js"
443+
title="Show only the stack frames related to script execution"
444+
type="radio"
445+
value="js"
446+
/>
447+
<span
448+
class="photon-label-horiz-padding"
449+
>
450+
Script
451+
</span>
446452
</label>
447-
<input
448-
class="photon-radio photon-radio-micro"
449-
id="implementation-radio-cpp"
450-
title="Show only the stack frames for native code"
451-
type="radio"
452-
value="cpp"
453-
/>
454453
<label
455-
class="photon-label photon-label-micro photon-label-horiz-padding"
454+
class="photon-label photon-label-micro"
456455
for="implementation-radio-cpp"
457-
title="Show only the stack frames for native code"
458456
>
459-
Native
457+
<input
458+
class="photon-radio photon-radio-micro"
459+
id="implementation-radio-cpp"
460+
title="Show only the stack frames for native code"
461+
type="radio"
462+
value="cpp"
463+
/>
464+
<span
465+
class="photon-label-horiz-padding"
466+
>
467+
Native
468+
</span>
460469
</label>
461470
</li>
462471
</ul>

‎src/test/components/__snapshots__/MarkerChart.test.tsx.snap‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -449,48 +449,57 @@ exports[`MarkerChart renders the normal marker chart and matches the snapshot 1`
449449
>
450450
Filter stacks:
451451
</span>
452-
<input
453-
checked=""
454-
class="photon-radio photon-radio-micro"
455-
id="implementation-radio-combined"
456-
title="Do not filter the stack frames"
457-
type="radio"
458-
value="combined"
459-
/>
460452
<label
461-
class="photon-label photon-label-micro photon-label-horiz-padding"
453+
class="photon-label photon-label-micro"
462454
for="implementation-radio-combined"
463-
title="Do not filter the stack frames"
464455
>
465-
All frames
456+
<input
457+
checked=""
458+
class="photon-radio photon-radio-micro"
459+
id="implementation-radio-combined"
460+
title="Do not filter the stack frames"
461+
type="radio"
462+
value="combined"
463+
/>
464+
<span
465+
class="photon-label-horiz-padding"
466+
>
467+
All frames
468+
</span>
466469
</label>
467-
<input
468-
class="photon-radio photon-radio-micro"
469-
id="implementation-radio-js"
470-
title="Show only the stack frames related to script execution"
471-
type="radio"
472-
value="js"
473-
/>
474470
<label
475-
class="photon-label photon-label-micro photon-label-horiz-padding"
471+
class="photon-label photon-label-micro"
476472
for="implementation-radio-js"
477-
title="Show only the stack frames related to script execution"
478473
>
479-
Script
474+
<input
475+
class="photon-radio photon-radio-micro"
476+
id="implementation-radio-js"
477+
title="Show only the stack frames related to script execution"
478+
type="radio"
479+
value="js"
480+
/>
481+
<span
482+
class="photon-label-horiz-padding"
483+
>
484+
Script
485+
</span>
480486
</label>
481-
<input
482-
class="photon-radio photon-radio-micro"
483-
id="implementation-radio-cpp"
484-
title="Show only the stack frames for native code"
485-
type="radio"
486-
value="cpp"
487-
/>
488487
<label
489-
class="photon-label photon-label-micro photon-label-horiz-padding"
488+
class="photon-label photon-label-micro"
490489
for="implementation-radio-cpp"
491-
title="Show only the stack frames for native code"
492490
>
493-
Native
491+
<input
492+
class="photon-radio photon-radio-micro"
493+
id="implementation-radio-cpp"
494+
title="Show only the stack frames for native code"
495+
type="radio"
496+
value="cpp"
497+
/>
498+
<span
499+
class="photon-label-horiz-padding"
500+
>
501+
Native
502+
</span>
494503
</label>
495504
</li>
496505
</ul>

‎src/test/components/__snapshots__/MarkerTable.test.tsx.snap‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -55,48 +55,57 @@ exports[`MarkerTable renders some basic markers and updates when needed 1`] = `
5555
>
5656
Filter stacks:
5757
</span>
58-
<input
59-
checked=""
60-
class="photon-radio photon-radio-micro"
61-
id="implementation-radio-combined"
62-
title="Do not filter the stack frames"
63-
type="radio"
64-
value="combined"
65-
/>
6658
<label
67-
class="photon-label photon-label-micro photon-label-horiz-padding"
59+
class="photon-label photon-label-micro"
6860
for="implementation-radio-combined"
69-
title="Do not filter the stack frames"
7061
>
71-
All frames
62+
<input
63+
checked=""
64+
class="photon-radio photon-radio-micro"
65+
id="implementation-radio-combined"
66+
title="Do not filter the stack frames"
67+
type="radio"
68+
value="combined"
69+
/>
70+
<span
71+
class="photon-label-horiz-padding"
72+
>
73+
All frames
74+
</span>
7275
</label>
73-
<input
74-
class="photon-radio photon-radio-micro"
75-
id="implementation-radio-js"
76-
title="Show only the stack frames related to script execution"
77-
type="radio"
78-
value="js"
79-
/>
8076
<label
81-
class="photon-label photon-label-micro photon-label-horiz-padding"
77+
class="photon-label photon-label-micro"
8278
for="implementation-radio-js"
83-
title="Show only the stack frames related to script execution"
8479
>
85-
Script
80+
<input
81+
class="photon-radio photon-radio-micro"
82+
id="implementation-radio-js"
83+
title="Show only the stack frames related to script execution"
84+
type="radio"
85+
value="js"
86+
/>
87+
<span
88+
class="photon-label-horiz-padding"
89+
>
90+
Script
91+
</span>
8692
</label>
87-
<input
88-
class="photon-radio photon-radio-micro"
89-
id="implementation-radio-cpp"
90-
title="Show only the stack frames for native code"
91-
type="radio"
92-
value="cpp"
93-
/>
9493
<label
95-
class="photon-label photon-label-micro photon-label-horiz-padding"
94+
class="photon-label photon-label-micro"
9695
for="implementation-radio-cpp"
97-
title="Show only the stack frames for native code"
9896
>
99-
Native
97+
<input
98+
class="photon-radio photon-radio-micro"
99+
id="implementation-radio-cpp"
100+
title="Show only the stack frames for native code"
101+
type="radio"
102+
value="cpp"
103+
/>
104+
<span
105+
class="photon-label-horiz-padding"
106+
>
107+
Native
108+
</span>
100109
</label>
101110
</li>
102111
</ul>

0 commit comments

Comments
 (0)