File tree Expand file tree Collapse file tree 4 files changed +965
-75
lines changed Expand file tree Collapse file tree 4 files changed +965
-75
lines changed Original file line number Diff line number Diff line change @@ -12,19 +12,46 @@ exports[`CheckboxGroup renders consistently 1`] = `
1212 padding : 0 ;
1313}
1414
15- .c3 {
15+ .c4 {
1616 display : - webkit - box ;
1717 display : - webkit - flex ;
1818 display : - ms - flexbox ;
1919 display : flex ;
2020}
2121
22- .c4 > input {
22+ .c5 > input {
2323 margin - left : 0 ;
2424 margin - right : 0 ;
2525}
2626
27+ .c7 {
28+ margin - left : 8px ;
29+ display : - webkit - box ;
30+ display : - webkit - flex ;
31+ display : - ms - flexbox ;
32+ display : flex ;
33+ - webkit - flex - direction : column ;
34+ - ms - flex - direction : column ;
35+ flex - direction : column ;
36+ }
37+
2738.c2 {
39+ display : block ;
40+ font - size : 16px ;
41+ }
42+
43+ .c8 {
44+ font - weight : 600 ;
45+ font - size : 14px ;
46+ display : block ;
47+ color : #24292f ;
48+ cursor : pointer ;
49+ - webkit - align - self : flex - start ;
50+ - ms - flex - item - align : start ;
51+ align - self : flex - start ;
52+ }
53+
54+ .c3 {
2855 display : - webkit - box ;
2956 display : - webkit - flex ;
3057 display : - ms - flexbox ;
@@ -37,25 +64,25 @@ exports[`CheckboxGroup renders consistently 1`] = `
3764 padding : 0 ;
3865}
3966
40- .c2 > * + * {
67+ .c3 > * + * {
4168 margin - top : 8px ;
4269}
4370
44- .c5 {
71+ .c6 {
4572 cursor : pointer ;
4673}
4774
48- .c5 :focus:not(:disabled) {
75+ .c6 :focus:not(:disabled) {
4976 box - shadow : none ;
5077 outline : 2px solid #0969da ;
5178 outline - offset : 0 ;
5279}
5380
54- .c5 :focus:not(:disabled):not(:focus-visible) {
81+ .c6 :focus:not(:disabled):not(:focus-visible) {
5582 outline : solid 1px transparent ;
5683}
5784
58- .c5 :focus-visible:not(:disabled) {
85+ .c6 :focus-visible:not(:disabled) {
5986 box - shadow : none ;
6087 outline : 2px solid #0969da ;
6188 outline - offset : 0 ;
@@ -68,72 +95,111 @@ exports[`CheckboxGroup renders consistently 1`] = `
6895 >
6996 <legend
7097 className = " c1"
71- />
98+ >
99+ <span
100+ className = " c2"
101+ >
102+ Choices
103+ </span >
104+ </legend >
72105 <div
73- className = " c2 "
106+ className = " c3 "
74107 >
75108 <div
76- className = " c3 "
109+ className = " c4 "
77110 display = " flex"
78111 >
79112 <div
80- className = " c4 "
113+ className = " c5 "
81114 >
82115 <input
83116 aria-checked = " false"
84117 aria-disabled = " false"
85118 aria-invalid = " false"
86119 aria-required = " false"
87- className = " c5 "
120+ className = " c6 "
88121 id = " react-aria-2"
89122 name = " one"
90123 onChange = { [Function ]}
91124 type = " checkbox"
92125 value = " one"
93126 />
94127 </div >
128+ <div
129+ className = " c7"
130+ display = " flex"
131+ >
132+ <label
133+ className = " c8"
134+ htmlFor = " react-aria-2"
135+ >
136+ Choice one
137+ </label >
138+ </div >
95139 </div >
96140 <div
97- className = " c3 "
141+ className = " c4 "
98142 display = " flex"
99143 >
100144 <div
101- className = " c4 "
145+ className = " c5 "
102146 >
103147 <input
104148 aria-checked = " false"
105149 aria-disabled = " false"
106150 aria-invalid = " false"
107151 aria-required = " false"
108- className = " c5 "
152+ className = " c6 "
109153 id = " react-aria-3"
110154 name = " two"
111155 onChange = { [Function ]}
112156 type = " checkbox"
113157 value = " two"
114158 />
115159 </div >
160+ <div
161+ className = " c7"
162+ display = " flex"
163+ >
164+ <label
165+ className = " c8"
166+ htmlFor = " react-aria-3"
167+ >
168+ Choice two
169+ </label >
170+ </div >
116171 </div >
117172 <div
118- className = " c3 "
173+ className = " c4 "
119174 display = " flex"
120175 >
121176 <div
122- className = " c4 "
177+ className = " c5 "
123178 >
124179 <input
125180 aria-checked = " false"
126181 aria-disabled = " false"
127182 aria-invalid = " false"
128183 aria-required = " false"
129- className = " c5 "
184+ className = " c6 "
130185 id = " react-aria-4"
131186 name = " three"
132187 onChange = { [Function ]}
133188 type = " checkbox"
134189 value = " three"
135190 />
136191 </div >
192+ <div
193+ className = " c7"
194+ display = " flex"
195+ >
196+ <label
197+ className = " c8"
198+ htmlFor = " react-aria-4"
199+ >
200+ Choice three
201+ </label >
202+ </div >
137203 </div >
138204 </div >
139205 </fieldset >
You can’t perform that action at this time.
0 commit comments