Skip to content

Commit 953ad8c

Browse files
Improve IDs of UI elements (#89)
1 parent 69f02e2 commit 953ad8c

File tree

20 files changed

+118
-56
lines changed

20 files changed

+118
-56
lines changed

src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,11 @@ exports[`rendering renders correctly 1`] = `
6868
6969
rootVariantOutline"
7070
htmlFor="resetEmailInput"
71+
id="resetEmailInput__label"
7172
>
7273
<div
7374
className="label"
74-
id="resetEmailInput__label"
75+
id="resetEmailInput__labelText"
7576
>
7677
E-mail
7778
</div>
@@ -216,10 +217,11 @@ exports[`rendering renders correctly 2`] = `
216217
217218
rootVariantOutline"
218219
htmlFor="resetEmailInput"
220+
id="resetEmailInput__label"
219221
>
220222
<div
221223
className="label"
222-
id="resetEmailInput__label"
224+
id="resetEmailInput__labelText"
223225
>
224226
E-mail
225227
</div>
@@ -392,10 +394,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
392394
393395
rootVariantOutline"
394396
htmlFor="custom-id__resetEmailInput"
397+
id="custom-id__resetEmailInput__label"
395398
>
396399
<div
397400
className="label"
398-
id="custom-id__resetEmailInput__label"
401+
id="custom-id__resetEmailInput__labelText"
399402
>
400403
E-mail
401404
</div>
@@ -457,7 +460,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
457460
>
458461
<span
459462
className="label"
460-
id="custom-id__resetPasswordButton__label"
463+
id="custom-id__resetPasswordButton__labelText"
461464
>
462465
Reset password
463466
</span>

src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,11 @@ exports[`rendering renders correctly 1`] = `
7070
7171
rootVariantOutline"
7272
htmlFor="usernameInput"
73+
id="usernameInput__label"
7374
>
7475
<div
7576
className="label"
76-
id="usernameInput__label"
77+
id="usernameInput__labelText"
7778
>
7879
E-mail
7980
</div>
@@ -132,10 +133,11 @@ exports[`rendering renders correctly 1`] = `
132133
133134
rootVariantOutline"
134135
htmlFor="passwordInput"
136+
id="passwordInput__label"
135137
>
136138
<div
137139
className="label"
138-
id="passwordInput__label"
140+
id="passwordInput__labelText"
139141
>
140142
Password
141143
</div>
@@ -309,10 +311,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
309311
310312
rootVariantOutline"
311313
htmlFor="custom-id__usernameInput"
314+
id="custom-id__usernameInput__label"
312315
>
313316
<div
314317
className="label"
315-
id="custom-id__usernameInput__label"
318+
id="custom-id__usernameInput__labelText"
316319
>
317320
E-mail
318321
</div>
@@ -371,10 +374,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
371374
372375
rootVariantOutline"
373376
htmlFor="custom-id__passwordInput"
377+
id="custom-id__passwordInput__label"
374378
>
375379
<div
376380
className="label"
377-
id="custom-id__passwordInput__label"
381+
id="custom-id__passwordInput__labelText"
378382
>
379383
Password
380384
</div>
@@ -436,7 +440,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
436440
>
437441
<span
438442
className="label"
439-
id="custom-id__signInButton__label"
443+
id="custom-id__signInButton__labelText"
440444
>
441445
Sign in
442446
</span>
@@ -537,10 +541,11 @@ exports[`rendering renders correctly with translations 1`] = `
537541
538542
rootVariantOutline"
539543
htmlFor="usernameInput"
544+
id="usernameInput__label"
540545
>
541546
<div
542547
className="label"
543-
id="usernameInput__label"
548+
id="usernameInput__labelText"
544549
>
545550
E-mail
546551
</div>
@@ -599,10 +604,11 @@ exports[`rendering renders correctly with translations 1`] = `
599604
600605
rootVariantOutline"
601606
htmlFor="passwordInput"
607+
id="passwordInput__label"
602608
>
603609
<div
604610
className="label"
605-
id="passwordInput__label"
611+
id="passwordInput__labelText"
606612
>
607613
Heslo
608614
</div>
@@ -745,10 +751,11 @@ exports[`rendering renders correctly with username 1`] = `
745751
746752
rootVariantOutline"
747753
htmlFor="usernameInput"
754+
id="usernameInput__label"
748755
>
749756
<div
750757
className="label"
751-
id="usernameInput__label"
758+
id="usernameInput__labelText"
752759
>
753760
Username
754761
</div>
@@ -807,10 +814,11 @@ exports[`rendering renders correctly with username 1`] = `
807814
808815
rootVariantOutline"
809816
htmlFor="passwordInput"
817+
id="passwordInput__label"
810818
>
811819
<div
812820
className="label"
813-
id="passwordInput__label"
821+
id="passwordInput__labelText"
814822
>
815823
Password
816824
</div>

src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,11 @@ exports[`rendering renders correctly 1`] = `
6868
6969
rootVariantOutline"
7070
htmlFor="newPasswordInput"
71+
id="newPasswordInput__label"
7172
>
7273
<div
7374
className="label"
74-
id="newPasswordInput__label"
75+
id="newPasswordInput__labelText"
7576
>
7677
New password
7778
</div>
@@ -130,10 +131,11 @@ exports[`rendering renders correctly 1`] = `
130131
131132
rootVariantOutline"
132133
htmlFor="newPasswordRepeatInput"
134+
id="newPasswordRepeatInput__label"
133135
>
134136
<div
135137
className="label"
136-
id="newPasswordRepeatInput__label"
138+
id="newPasswordRepeatInput__labelText"
137139
>
138140
Repeat new password
139141
</div>
@@ -305,10 +307,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
305307
306308
rootVariantOutline"
307309
htmlFor="custom-id__newPasswordInput"
310+
id="custom-id__newPasswordInput__label"
308311
>
309312
<div
310313
className="label"
311-
id="custom-id__newPasswordInput__label"
314+
id="custom-id__newPasswordInput__labelText"
312315
>
313316
New password
314317
</div>
@@ -367,10 +370,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
367370
368371
rootVariantOutline"
369372
htmlFor="custom-id__newPasswordRepeatInput"
373+
id="custom-id__newPasswordRepeatInput__label"
370374
>
371375
<div
372376
className="label"
373-
id="custom-id__newPasswordRepeatInput__label"
377+
id="custom-id__newPasswordRepeatInput__labelText"
374378
>
375379
Repeat new password
376380
</div>
@@ -432,7 +436,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
432436
>
433437
<span
434438
className="label"
435-
id="custom-id__changePasswordButton__label"
439+
id="custom-id__changePasswordButton__labelText"
436440
>
437441
Change password
438442
</span>
@@ -530,10 +534,11 @@ exports[`rendering renders correctly with translations 1`] = `
530534
531535
rootVariantOutline"
532536
htmlFor="newPasswordInput"
537+
id="newPasswordInput__label"
533538
>
534539
<div
535540
className="label"
536-
id="newPasswordInput__label"
541+
id="newPasswordInput__labelText"
537542
>
538543
Nové heslo
539544
</div>
@@ -592,10 +597,11 @@ exports[`rendering renders correctly with translations 1`] = `
592597
593598
rootVariantOutline"
594599
htmlFor="newPasswordRepeatInput"
600+
id="newPasswordRepeatInput__label"
595601
>
596602
<div
597603
className="label"
598-
id="newPasswordRepeatInput__label"
604+
id="newPasswordRepeatInput__labelText"
599605
>
600606
Nové heslo znovu
601607
</div>

src/lib/components/ui/Button/Button.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export const Button = (props) => {
8686
)}
8787
<span
8888
className={styles.label}
89-
{...(props.id && { id: `${props.id}__label` })}
89+
{...(props.id && { id: `${props.id}__labelText` })}
9090
>
9191
{props.label}
9292
</span>

src/lib/components/ui/Button/tests/__snapshots__/Button.test.jsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ exports[`rendering renders correctly with all props 1`] = `
150150
</span>
151151
<span
152152
className="label"
153-
id="custom-id__label"
153+
id="custom-id__labelText"
154154
>
155155
button
156156
</span>

src/lib/components/ui/CheckboxField/CheckboxField.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const CheckboxField = (props) => {
4646
${labelPositionClass}
4747
`).trim()}
4848
htmlFor={props.id}
49+
id={`${props.id}__label`}
4950
>
5051
<input
5152
{...propsToTransfer}
@@ -65,7 +66,7 @@ export const CheckboxField = (props) => {
6566
${styles.labelInner}
6667
${labelVisibilityClass}
6768
`).trim()}
68-
id={`${props.id}__label`}
69+
id={`${props.id}__labelText`}
6970
>
7071
{props.label}
7172
</span>

src/lib/components/ui/CheckboxField/tests/__snapshots__/CheckboxField.test.jsx.snap

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
88
className="inputWrap
99
labelPositionAfter"
1010
htmlFor="test"
11+
id="test__label"
1112
>
1213
<input
1314
checked={false}
@@ -23,7 +24,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
2324
>
2425
<span
2526
className="labelInner"
26-
id="test__label"
27+
id="test__labelText"
2728
>
2829
label
2930
</span>
@@ -41,6 +42,7 @@ exports[`rendering renders correctly with all props 1`] = `
4142
className="inputWrap
4243
labelPositionAfter"
4344
htmlFor="test"
45+
id="test__label"
4446
>
4547
<input
4648
checked={true}
@@ -57,7 +59,7 @@ exports[`rendering renders correctly with all props 1`] = `
5759
>
5860
<span
5961
className="labelInner"
60-
id="test__label"
62+
id="test__labelText"
6163
>
6264
label
6365
</span>

src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
155155
>
156156
<span
157157
className="label"
158-
id="custom-id__closeModalFooterButton__label"
158+
id="custom-id__closeModalFooterButton__labelText"
159159
>
160160
Close
161161
</span>
@@ -346,7 +346,7 @@ exports[`rendering renders correctly with all props except translations and with
346346
>
347347
<span
348348
className="label"
349-
id="custom-id__closeModalFooterButton__label"
349+
id="custom-id__closeModalFooterButton__labelText"
350350
>
351351
Close
352352
</span>

src/lib/components/ui/MultipleSelectField/MultipleSelectField.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,14 @@ export const MultipleSelectField = (props) => {
7171
${rootVariantClass}
7272
`).trim()}
7373
htmlFor={props.id}
74+
id={`${props.id}__label`}
7475
>
7576
<div
7677
className={(`
7778
${styles.label}
7879
${labelVisibilityClass}
7980
`).trim()}
80-
id={`${props.id}__label`}
81+
id={`${props.id}__labelText`}
8182
>
8283
{props.label}
8384
</div>

0 commit comments

Comments
 (0)