Skip to content

Commit c7c0c45

Browse files
joshblackkodiakhq[bot]
joshblack
and
kodiakhq[bot]
authored
refactor(react): update radio button tests (#11790)
* refactor(react): update radio button group tests * refactor(react): update radio button tests * docs(react): update radio button docs * test(react): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 2263ace commit c7c0c45

File tree

16 files changed

+558
-1435
lines changed

16 files changed

+558
-1435
lines changed

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5324,7 +5324,6 @@ Map {
53245324
},
53255325
],
53265326
],
5327-
"isRequired": true,
53285327
"type": "oneOfType",
53295328
},
53305329
},

‎packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap‎

Lines changed: 90 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,13 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
112112
>
113113
<h4
114114
className="cds--data-table-header__title"
115-
id="tc-71-title"
115+
id="tc-74-title"
116116
>
117117
DataTable with selection
118118
</h4>
119119
<p
120120
className="cds--data-table-header__description"
121-
id="tc-71-description"
121+
id="tc-74-description"
122122
/>
123123
</div>
124124
<Table
@@ -130,7 +130,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
130130
>
131131
<table
132132
aria-describedby={null}
133-
aria-labelledby="tc-71-title"
133+
aria-labelledby="tc-74-title"
134134
className="cds--data-table"
135135
>
136136
<TableHead>
@@ -556,7 +556,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
556556
<td
557557
className="cds--table-column-checkbox cds--table-column-radio"
558558
>
559-
<ForwardRef(RadioButton)
559+
<RadioButton
560560
checked={false}
561561
disabled={false}
562562
hideLabel={true}
@@ -565,54 +565,40 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
565565
name="select-row-b"
566566
onClick={[Function]}
567567
>
568-
<RadioButton
569-
checked={false}
570-
disabled={false}
571-
hideLabel={true}
572-
id="data-table-14__select-row-b"
573-
innerRef={null}
574-
labelPosition="right"
575-
labelText="Select row"
576-
name="select-row-b"
577-
onChange={[Function]}
578-
onClick={[Function]}
579-
value=""
568+
<div
569+
className="cds--radio-button-wrapper"
580570
>
581-
<div
582-
className="cds--radio-button-wrapper"
571+
<input
572+
checked={false}
573+
className="cds--radio-button"
574+
disabled={false}
575+
id="data-table-14__select-row-b"
576+
name="select-row-b"
577+
onChange={[Function]}
578+
onClick={[Function]}
579+
type="radio"
580+
value=""
581+
/>
582+
<label
583+
className="cds--radio-button__label"
584+
htmlFor="data-table-14__select-row-b"
583585
>
584-
<input
585-
checked={false}
586-
className="cds--radio-button"
587-
disabled={false}
588-
id="data-table-14__select-row-b"
589-
name="select-row-b"
590-
onChange={[Function]}
591-
onClick={[Function]}
592-
type="radio"
593-
value=""
586+
<span
587+
className="cds--radio-button__appearance"
594588
/>
595-
<label
596-
className="cds--radio-button__label"
597-
htmlFor="data-table-14__select-row-b"
589+
<Text
590+
className="cds--visually-hidden"
598591
>
599592
<span
600-
className="cds--radio-button__appearance"
601-
/>
602-
<Text
603593
className="cds--visually-hidden"
594+
dir="auto"
604595
>
605-
<span
606-
className="cds--visually-hidden"
607-
dir="auto"
608-
>
609-
Select row
610-
</span>
611-
</Text>
612-
</label>
613-
</div>
614-
</RadioButton>
615-
</ForwardRef(RadioButton)>
596+
Select row
597+
</span>
598+
</Text>
599+
</label>
600+
</div>
601+
</RadioButton>
616602
</td>
617603
</TableSelectRow>
618604
<TableCell
@@ -647,7 +633,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
647633
<td
648634
className="cds--table-column-checkbox cds--table-column-radio"
649635
>
650-
<ForwardRef(RadioButton)
636+
<RadioButton
651637
checked={false}
652638
disabled={false}
653639
hideLabel={true}
@@ -656,54 +642,40 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
656642
name="select-row-a"
657643
onClick={[Function]}
658644
>
659-
<RadioButton
660-
checked={false}
661-
disabled={false}
662-
hideLabel={true}
663-
id="data-table-14__select-row-a"
664-
innerRef={null}
665-
labelPosition="right"
666-
labelText="Select row"
667-
name="select-row-a"
668-
onChange={[Function]}
669-
onClick={[Function]}
670-
value=""
645+
<div
646+
className="cds--radio-button-wrapper"
671647
>
672-
<div
673-
className="cds--radio-button-wrapper"
648+
<input
649+
checked={false}
650+
className="cds--radio-button"
651+
disabled={false}
652+
id="data-table-14__select-row-a"
653+
name="select-row-a"
654+
onChange={[Function]}
655+
onClick={[Function]}
656+
type="radio"
657+
value=""
658+
/>
659+
<label
660+
className="cds--radio-button__label"
661+
htmlFor="data-table-14__select-row-a"
674662
>
675-
<input
676-
checked={false}
677-
className="cds--radio-button"
678-
disabled={false}
679-
id="data-table-14__select-row-a"
680-
name="select-row-a"
681-
onChange={[Function]}
682-
onClick={[Function]}
683-
type="radio"
684-
value=""
663+
<span
664+
className="cds--radio-button__appearance"
685665
/>
686-
<label
687-
className="cds--radio-button__label"
688-
htmlFor="data-table-14__select-row-a"
666+
<Text
667+
className="cds--visually-hidden"
689668
>
690669
<span
691-
className="cds--radio-button__appearance"
692-
/>
693-
<Text
694670
className="cds--visually-hidden"
671+
dir="auto"
695672
>
696-
<span
697-
className="cds--visually-hidden"
698-
dir="auto"
699-
>
700-
Select row
701-
</span>
702-
</Text>
703-
</label>
704-
</div>
705-
</RadioButton>
706-
</ForwardRef(RadioButton)>
673+
Select row
674+
</span>
675+
</Text>
676+
</label>
677+
</div>
678+
</RadioButton>
707679
</td>
708680
</TableSelectRow>
709681
<TableCell
@@ -738,7 +710,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
738710
<td
739711
className="cds--table-column-checkbox cds--table-column-radio"
740712
>
741-
<ForwardRef(RadioButton)
713+
<RadioButton
742714
checked={false}
743715
disabled={false}
744716
hideLabel={true}
@@ -747,54 +719,40 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
747719
name="select-row-c"
748720
onClick={[Function]}
749721
>
750-
<RadioButton
751-
checked={false}
752-
disabled={false}
753-
hideLabel={true}
754-
id="data-table-14__select-row-c"
755-
innerRef={null}
756-
labelPosition="right"
757-
labelText="Select row"
758-
name="select-row-c"
759-
onChange={[Function]}
760-
onClick={[Function]}
761-
value=""
722+
<div
723+
className="cds--radio-button-wrapper"
762724
>
763-
<div
764-
className="cds--radio-button-wrapper"
725+
<input
726+
checked={false}
727+
className="cds--radio-button"
728+
disabled={false}
729+
id="data-table-14__select-row-c"
730+
name="select-row-c"
731+
onChange={[Function]}
732+
onClick={[Function]}
733+
type="radio"
734+
value=""
735+
/>
736+
<label
737+
className="cds--radio-button__label"
738+
htmlFor="data-table-14__select-row-c"
765739
>
766-
<input
767-
checked={false}
768-
className="cds--radio-button"
769-
disabled={false}
770-
id="data-table-14__select-row-c"
771-
name="select-row-c"
772-
onChange={[Function]}
773-
onClick={[Function]}
774-
type="radio"
775-
value=""
740+
<span
741+
className="cds--radio-button__appearance"
776742
/>
777-
<label
778-
className="cds--radio-button__label"
779-
htmlFor="data-table-14__select-row-c"
743+
<Text
744+
className="cds--visually-hidden"
780745
>
781746
<span
782-
className="cds--radio-button__appearance"
783-
/>
784-
<Text
785747
className="cds--visually-hidden"
748+
dir="auto"
786749
>
787-
<span
788-
className="cds--visually-hidden"
789-
dir="auto"
790-
>
791-
Select row
792-
</span>
793-
</Text>
794-
</label>
795-
</div>
796-
</RadioButton>
797-
</ForwardRef(RadioButton)>
750+
Select row
751+
</span>
752+
</Text>
753+
</label>
754+
</div>
755+
</RadioButton>
798756
</td>
799757
</TableSelectRow>
800758
<TableCell
@@ -3029,13 +2987,13 @@ exports[`DataTable sticky header should render 1`] = `
30292987
>
30302988
<h4
30312989
className="cds--data-table-header__title"
3032-
id="tc-111-title"
2990+
id="tc-120-title"
30332991
>
30342992
DataTable with toolbar
30352993
</h4>
30362994
<p
30372995
className="cds--data-table-header__description"
3038-
id="tc-111-description"
2996+
id="tc-120-description"
30392997
/>
30402998
</div>
30412999
<TableToolbar
@@ -3579,7 +3537,7 @@ exports[`DataTable sticky header should render 1`] = `
35793537
>
35803538
<table
35813539
aria-describedby={null}
3582-
aria-labelledby="tc-111-title"
3540+
aria-labelledby="tc-120-title"
35833541
className="cds--data-table cds--data-table--lg"
35843542
>
35853543
<TableHead>

0 commit comments

Comments
 (0)