Skip to content

Commit 992a3a2

Browse files
web-padawanweb-padawan
authored
feat: add required, error message and helper text to checkbox (#7285)
1 parent 40488c1 commit 992a3a2

36 files changed

+845
-89
lines changed

‎packages/checkbox-group/src/vaadin-checkbox-group.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou
6161
* Attribute | Description | Part name
6262
* --------------------|-------------------------------------------|------------
6363
* `disabled` | Set when the element is disabled | :host
64+
* `readonly` | Set when the element is readonly | :host
6465
* `invalid` | Set when the element is invalid | :host
6566
* `focused` | Set when the element is focused | :host
6667
* `has-label` | Set when the element has a label | :host

‎packages/checkbox-group/src/vaadin-checkbox-group.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ registerStyles('vaadin-checkbox-group', checkboxGroupStyles, { moduleId: 'vaadin
4242
* Attribute | Description | Part name
4343
* --------------------|-------------------------------------------|------------
4444
* `disabled` | Set when the element is disabled | :host
45+
* `readonly` | Set when the element is readonly | :host
4546
* `invalid` | Set when the element is invalid | :host
4647
* `focused` | Set when the element is focused | :host
4748
* `has-label` | Set when the element has a label | :host

‎packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js

Lines changed: 133 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@ snapshots["vaadin-checkbox-group host default"] =
1010
value="1"
1111
>
1212
<label
13-
for="input-vaadin-checkbox-5"
13+
for="input-vaadin-checkbox-9"
1414
id="label-vaadin-checkbox-3"
1515
slot="label"
1616
>
1717
Checkbox 1
1818
</label>
19+
<div
20+
hidden=""
21+
id="error-message-vaadin-checkbox-5"
22+
slot="error-message"
23+
>
24+
</div>
1925
<input
20-
id="input-vaadin-checkbox-5"
26+
aria-labelledby="label-vaadin-checkbox-3"
27+
id="input-vaadin-checkbox-9"
2128
slot="input"
2229
tabindex="0"
2330
type="checkbox"
@@ -31,14 +38,21 @@ snapshots["vaadin-checkbox-group host default"] =
3138
value="2"
3239
>
3340
<label
34-
for="input-vaadin-checkbox-6"
35-
id="label-vaadin-checkbox-4"
41+
for="input-vaadin-checkbox-10"
42+
id="label-vaadin-checkbox-6"
3643
slot="label"
3744
>
3845
Checkbox 2
3946
</label>
47+
<div
48+
hidden=""
49+
id="error-message-vaadin-checkbox-8"
50+
slot="error-message"
51+
>
52+
</div>
4053
<input
41-
id="input-vaadin-checkbox-6"
54+
aria-labelledby="label-vaadin-checkbox-6"
55+
id="input-vaadin-checkbox-10"
4256
slot="input"
4357
tabindex="0"
4458
type="checkbox"
@@ -73,14 +87,21 @@ snapshots["vaadin-checkbox-group host label"] =
7387
value="1"
7488
>
7589
<label
76-
for="input-vaadin-checkbox-5"
90+
for="input-vaadin-checkbox-9"
7791
id="label-vaadin-checkbox-3"
7892
slot="label"
7993
>
8094
Checkbox 1
8195
</label>
96+
<div
97+
hidden=""
98+
id="error-message-vaadin-checkbox-5"
99+
slot="error-message"
100+
>
101+
</div>
82102
<input
83-
id="input-vaadin-checkbox-5"
103+
aria-labelledby="label-vaadin-checkbox-3"
104+
id="input-vaadin-checkbox-9"
84105
slot="input"
85106
tabindex="0"
86107
type="checkbox"
@@ -94,14 +115,21 @@ snapshots["vaadin-checkbox-group host label"] =
94115
value="2"
95116
>
96117
<label
97-
for="input-vaadin-checkbox-6"
98-
id="label-vaadin-checkbox-4"
118+
for="input-vaadin-checkbox-10"
119+
id="label-vaadin-checkbox-6"
99120
slot="label"
100121
>
101122
Checkbox 2
102123
</label>
124+
<div
125+
hidden=""
126+
id="error-message-vaadin-checkbox-8"
127+
slot="error-message"
128+
>
129+
</div>
103130
<input
104-
id="input-vaadin-checkbox-6"
131+
aria-labelledby="label-vaadin-checkbox-6"
132+
id="input-vaadin-checkbox-10"
105133
slot="input"
106134
tabindex="0"
107135
type="checkbox"
@@ -139,15 +167,22 @@ snapshots["vaadin-checkbox-group host disabled"] =
139167
value="1"
140168
>
141169
<label
142-
for="input-vaadin-checkbox-5"
170+
for="input-vaadin-checkbox-9"
143171
id="label-vaadin-checkbox-3"
144172
slot="label"
145173
>
146174
Checkbox 1
147175
</label>
176+
<div
177+
hidden=""
178+
id="error-message-vaadin-checkbox-5"
179+
slot="error-message"
180+
>
181+
</div>
148182
<input
183+
aria-labelledby="label-vaadin-checkbox-3"
149184
disabled=""
150-
id="input-vaadin-checkbox-5"
185+
id="input-vaadin-checkbox-9"
151186
slot="input"
152187
tabindex="-1"
153188
type="checkbox"
@@ -163,15 +198,22 @@ snapshots["vaadin-checkbox-group host disabled"] =
163198
value="2"
164199
>
165200
<label
166-
for="input-vaadin-checkbox-6"
167-
id="label-vaadin-checkbox-4"
201+
for="input-vaadin-checkbox-10"
202+
id="label-vaadin-checkbox-6"
168203
slot="label"
169204
>
170205
Checkbox 2
171206
</label>
207+
<div
208+
hidden=""
209+
id="error-message-vaadin-checkbox-8"
210+
slot="error-message"
211+
>
212+
</div>
172213
<input
214+
aria-labelledby="label-vaadin-checkbox-6"
173215
disabled=""
174-
id="input-vaadin-checkbox-6"
216+
id="input-vaadin-checkbox-10"
175217
slot="input"
176218
tabindex="-1"
177219
type="checkbox"
@@ -206,15 +248,22 @@ snapshots["vaadin-checkbox-group host readonly"] =
206248
value="1"
207249
>
208250
<label
209-
for="input-vaadin-checkbox-5"
251+
for="input-vaadin-checkbox-9"
210252
id="label-vaadin-checkbox-3"
211253
slot="label"
212254
>
213255
Checkbox 1
214256
</label>
257+
<div
258+
hidden=""
259+
id="error-message-vaadin-checkbox-5"
260+
slot="error-message"
261+
>
262+
</div>
215263
<input
264+
aria-labelledby="label-vaadin-checkbox-3"
216265
aria-readonly="true"
217-
id="input-vaadin-checkbox-5"
266+
id="input-vaadin-checkbox-9"
218267
slot="input"
219268
tabindex="0"
220269
type="checkbox"
@@ -229,15 +278,22 @@ snapshots["vaadin-checkbox-group host readonly"] =
229278
value="2"
230279
>
231280
<label
232-
for="input-vaadin-checkbox-6"
233-
id="label-vaadin-checkbox-4"
281+
for="input-vaadin-checkbox-10"
282+
id="label-vaadin-checkbox-6"
234283
slot="label"
235284
>
236285
Checkbox 2
237286
</label>
287+
<div
288+
hidden=""
289+
id="error-message-vaadin-checkbox-8"
290+
slot="error-message"
291+
>
292+
</div>
238293
<input
294+
aria-labelledby="label-vaadin-checkbox-6"
239295
aria-readonly="true"
240-
id="input-vaadin-checkbox-6"
296+
id="input-vaadin-checkbox-10"
241297
slot="input"
242298
tabindex="0"
243299
type="checkbox"
@@ -272,14 +328,21 @@ snapshots["vaadin-checkbox-group host required"] =
272328
value="1"
273329
>
274330
<label
275-
for="input-vaadin-checkbox-5"
331+
for="input-vaadin-checkbox-9"
276332
id="label-vaadin-checkbox-3"
277333
slot="label"
278334
>
279335
Checkbox 1
280336
</label>
337+
<div
338+
hidden=""
339+
id="error-message-vaadin-checkbox-5"
340+
slot="error-message"
341+
>
342+
</div>
281343
<input
282-
id="input-vaadin-checkbox-5"
344+
aria-labelledby="label-vaadin-checkbox-3"
345+
id="input-vaadin-checkbox-9"
283346
slot="input"
284347
tabindex="0"
285348
type="checkbox"
@@ -293,14 +356,21 @@ snapshots["vaadin-checkbox-group host required"] =
293356
value="2"
294357
>
295358
<label
296-
for="input-vaadin-checkbox-6"
297-
id="label-vaadin-checkbox-4"
359+
for="input-vaadin-checkbox-10"
360+
id="label-vaadin-checkbox-6"
298361
slot="label"
299362
>
300363
Checkbox 2
301364
</label>
365+
<div
366+
hidden=""
367+
id="error-message-vaadin-checkbox-8"
368+
slot="error-message"
369+
>
370+
</div>
302371
<input
303-
id="input-vaadin-checkbox-6"
372+
aria-labelledby="label-vaadin-checkbox-6"
373+
id="input-vaadin-checkbox-10"
304374
slot="input"
305375
tabindex="0"
306376
type="checkbox"
@@ -335,14 +405,21 @@ snapshots["vaadin-checkbox-group host helper"] =
335405
value="1"
336406
>
337407
<label
338-
for="input-vaadin-checkbox-5"
408+
for="input-vaadin-checkbox-9"
339409
id="label-vaadin-checkbox-3"
340410
slot="label"
341411
>
342412
Checkbox 1
343413
</label>
414+
<div
415+
hidden=""
416+
id="error-message-vaadin-checkbox-5"
417+
slot="error-message"
418+
>
419+
</div>
344420
<input
345-
id="input-vaadin-checkbox-5"
421+
aria-labelledby="label-vaadin-checkbox-3"
422+
id="input-vaadin-checkbox-9"
346423
slot="input"
347424
tabindex="0"
348425
type="checkbox"
@@ -356,14 +433,21 @@ snapshots["vaadin-checkbox-group host helper"] =
356433
value="2"
357434
>
358435
<label
359-
for="input-vaadin-checkbox-6"
360-
id="label-vaadin-checkbox-4"
436+
for="input-vaadin-checkbox-10"
437+
id="label-vaadin-checkbox-6"
361438
slot="label"
362439
>
363440
Checkbox 2
364441
</label>
442+
<div
443+
hidden=""
444+
id="error-message-vaadin-checkbox-8"
445+
slot="error-message"
446+
>
447+
</div>
365448
<input
366-
id="input-vaadin-checkbox-6"
449+
aria-labelledby="label-vaadin-checkbox-6"
450+
id="input-vaadin-checkbox-10"
367451
slot="input"
368452
tabindex="0"
369453
type="checkbox"
@@ -405,14 +489,21 @@ snapshots["vaadin-checkbox-group host error"] =
405489
value="1"
406490
>
407491
<label
408-
for="input-vaadin-checkbox-5"
492+
for="input-vaadin-checkbox-9"
409493
id="label-vaadin-checkbox-3"
410494
slot="label"
411495
>
412496
Checkbox 1
413497
</label>
498+
<div
499+
hidden=""
500+
id="error-message-vaadin-checkbox-5"
501+
slot="error-message"
502+
>
503+
</div>
414504
<input
415-
id="input-vaadin-checkbox-5"
505+
aria-labelledby="label-vaadin-checkbox-3"
506+
id="input-vaadin-checkbox-9"
416507
slot="input"
417508
tabindex="0"
418509
type="checkbox"
@@ -426,14 +517,21 @@ snapshots["vaadin-checkbox-group host error"] =
426517
value="2"
427518
>
428519
<label
429-
for="input-vaadin-checkbox-6"
430-
id="label-vaadin-checkbox-4"
520+
for="input-vaadin-checkbox-10"
521+
id="label-vaadin-checkbox-6"
431522
slot="label"
432523
>
433524
Checkbox 2
434525
</label>
526+
<div
527+
hidden=""
528+
id="error-message-vaadin-checkbox-8"
529+
slot="error-message"
530+
>
531+
</div>
435532
<input
436-
id="input-vaadin-checkbox-6"
533+
aria-labelledby="label-vaadin-checkbox-6"
534+
id="input-vaadin-checkbox-10"
437535
slot="input"
438536
tabindex="0"
439537
type="checkbox"

‎packages/checkbox-group/test/visual/material/screenshots/checkbox-group/baseline/label-focused.png

129 Bytes
Loading

‎packages/checkbox/src/vaadin-checkbox-mixin.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js
1212
import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
1313
import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
1414
import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
15+
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
1516
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
1617
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
18+
import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
1719

1820
/**
1921
* A mixin providing common checkbox functionality.
@@ -27,10 +29,12 @@ export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
2729
Constructor<DelegateFocusMixinClass> &
2830
Constructor<DelegateStateMixinClass> &
2931
Constructor<DisabledMixinClass> &
32+
Constructor<FieldMixinClass> &
3033
Constructor<FocusMixinClass> &
3134
Constructor<InputMixinClass> &
3235
Constructor<KeyboardMixinClass> &
3336
Constructor<LabelMixinClass> &
37+
Constructor<ValidateMixinClass> &
3438
T;
3539

3640
export declare class CheckboxMixinClass {

0 commit comments

Comments
 (0)