Skip to content

Commit

Permalink
feat: add required, error message and helper text to checkbox (#7285)
Browse files Browse the repository at this point in the history
  • Loading branch information
@web-padawan
web-padawan authored Apr 10, 2024
1 parent 40488c1 commit 992a3a2
Show file tree
Hide file tree
Showing 36 changed files with 845 additions and 89 deletions.
1 change: 1 addition & 0 deletions packages/checkbox-group/src/vaadin-checkbox-group.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou
* Attribute | Description | Part name
* --------------------|-------------------------------------------|------------
* `disabled` | Set when the element is disabled | :host
* `readonly` | Set when the element is readonly | :host
* `invalid` | Set when the element is invalid | :host
* `focused` | Set when the element is focused | :host
* `has-label` | Set when the element has a label | :host
Expand Down
1 change: 1 addition & 0 deletions packages/checkbox-group/src/vaadin-checkbox-group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ registerStyles('vaadin-checkbox-group', checkboxGroupStyles, { moduleId: 'vaadin
* Attribute | Description | Part name
* --------------------|-------------------------------------------|------------
* `disabled` | Set when the element is disabled | :host
* `readonly` | Set when the element is readonly | :host
* `invalid` | Set when the element is invalid | :host
* `focused` | Set when the element is focused | :host
* `has-label` | Set when the element has a label | :host
Expand Down
168 changes: 133 additions & 35 deletions packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,21 @@ snapshots["vaadin-checkbox-group host default"] =
value="1"
>
<label
for="input-vaadin-checkbox-5"
for="input-vaadin-checkbox-9"
id="label-vaadin-checkbox-3"
slot="label"
>
Checkbox 1
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-5"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-5"
aria-labelledby="label-vaadin-checkbox-3"
id="input-vaadin-checkbox-9"
slot="input"
tabindex="0"
type="checkbox"
Expand All @@ -31,14 +38,21 @@ snapshots["vaadin-checkbox-group host default"] =
value="2"
>
<label
for="input-vaadin-checkbox-6"
id="label-vaadin-checkbox-4"
for="input-vaadin-checkbox-10"
id="label-vaadin-checkbox-6"
slot="label"
>
Checkbox 2
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-8"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-6"
aria-labelledby="label-vaadin-checkbox-6"
id="input-vaadin-checkbox-10"
slot="input"
tabindex="0"
type="checkbox"
Expand Down Expand Up @@ -73,14 +87,21 @@ snapshots["vaadin-checkbox-group host label"] =
value="1"
>
<label
for="input-vaadin-checkbox-5"
for="input-vaadin-checkbox-9"
id="label-vaadin-checkbox-3"
slot="label"
>
Checkbox 1
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-5"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-5"
aria-labelledby="label-vaadin-checkbox-3"
id="input-vaadin-checkbox-9"
slot="input"
tabindex="0"
type="checkbox"
Expand All @@ -94,14 +115,21 @@ snapshots["vaadin-checkbox-group host label"] =
value="2"
>
<label
for="input-vaadin-checkbox-6"
id="label-vaadin-checkbox-4"
for="input-vaadin-checkbox-10"
id="label-vaadin-checkbox-6"
slot="label"
>
Checkbox 2
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-8"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-6"
aria-labelledby="label-vaadin-checkbox-6"
id="input-vaadin-checkbox-10"
slot="input"
tabindex="0"
type="checkbox"
Expand Down Expand Up @@ -139,15 +167,22 @@ snapshots["vaadin-checkbox-group host disabled"] =
value="1"
>
<label
for="input-vaadin-checkbox-5"
for="input-vaadin-checkbox-9"
id="label-vaadin-checkbox-3"
slot="label"
>
Checkbox 1
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-5"
slot="error-message"
>
</div>
<input
aria-labelledby="label-vaadin-checkbox-3"
disabled=""
id="input-vaadin-checkbox-5"
id="input-vaadin-checkbox-9"
slot="input"
tabindex="-1"
type="checkbox"
Expand All @@ -163,15 +198,22 @@ snapshots["vaadin-checkbox-group host disabled"] =
value="2"
>
<label
for="input-vaadin-checkbox-6"
id="label-vaadin-checkbox-4"
for="input-vaadin-checkbox-10"
id="label-vaadin-checkbox-6"
slot="label"
>
Checkbox 2
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-8"
slot="error-message"
>
</div>
<input
aria-labelledby="label-vaadin-checkbox-6"
disabled=""
id="input-vaadin-checkbox-6"
id="input-vaadin-checkbox-10"
slot="input"
tabindex="-1"
type="checkbox"
Expand Down Expand Up @@ -206,15 +248,22 @@ snapshots["vaadin-checkbox-group host readonly"] =
value="1"
>
<label
for="input-vaadin-checkbox-5"
for="input-vaadin-checkbox-9"
id="label-vaadin-checkbox-3"
slot="label"
>
Checkbox 1
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-5"
slot="error-message"
>
</div>
<input
aria-labelledby="label-vaadin-checkbox-3"
aria-readonly="true"
id="input-vaadin-checkbox-5"
id="input-vaadin-checkbox-9"
slot="input"
tabindex="0"
type="checkbox"
Expand All @@ -229,15 +278,22 @@ snapshots["vaadin-checkbox-group host readonly"] =
value="2"
>
<label
for="input-vaadin-checkbox-6"
id="label-vaadin-checkbox-4"
for="input-vaadin-checkbox-10"
id="label-vaadin-checkbox-6"
slot="label"
>
Checkbox 2
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-8"
slot="error-message"
>
</div>
<input
aria-labelledby="label-vaadin-checkbox-6"
aria-readonly="true"
id="input-vaadin-checkbox-6"
id="input-vaadin-checkbox-10"
slot="input"
tabindex="0"
type="checkbox"
Expand Down Expand Up @@ -272,14 +328,21 @@ snapshots["vaadin-checkbox-group host required"] =
value="1"
>
<label
for="input-vaadin-checkbox-5"
for="input-vaadin-checkbox-9"
id="label-vaadin-checkbox-3"
slot="label"
>
Checkbox 1
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-5"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-5"
aria-labelledby="label-vaadin-checkbox-3"
id="input-vaadin-checkbox-9"
slot="input"
tabindex="0"
type="checkbox"
Expand All @@ -293,14 +356,21 @@ snapshots["vaadin-checkbox-group host required"] =
value="2"
>
<label
for="input-vaadin-checkbox-6"
id="label-vaadin-checkbox-4"
for="input-vaadin-checkbox-10"
id="label-vaadin-checkbox-6"
slot="label"
>
Checkbox 2
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-8"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-6"
aria-labelledby="label-vaadin-checkbox-6"
id="input-vaadin-checkbox-10"
slot="input"
tabindex="0"
type="checkbox"
Expand Down Expand Up @@ -335,14 +405,21 @@ snapshots["vaadin-checkbox-group host helper"] =
value="1"
>
<label
for="input-vaadin-checkbox-5"
for="input-vaadin-checkbox-9"
id="label-vaadin-checkbox-3"
slot="label"
>
Checkbox 1
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-5"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-5"
aria-labelledby="label-vaadin-checkbox-3"
id="input-vaadin-checkbox-9"
slot="input"
tabindex="0"
type="checkbox"
Expand All @@ -356,14 +433,21 @@ snapshots["vaadin-checkbox-group host helper"] =
value="2"
>
<label
for="input-vaadin-checkbox-6"
id="label-vaadin-checkbox-4"
for="input-vaadin-checkbox-10"
id="label-vaadin-checkbox-6"
slot="label"
>
Checkbox 2
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-8"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-6"
aria-labelledby="label-vaadin-checkbox-6"
id="input-vaadin-checkbox-10"
slot="input"
tabindex="0"
type="checkbox"
Expand Down Expand Up @@ -405,14 +489,21 @@ snapshots["vaadin-checkbox-group host error"] =
value="1"
>
<label
for="input-vaadin-checkbox-5"
for="input-vaadin-checkbox-9"
id="label-vaadin-checkbox-3"
slot="label"
>
Checkbox 1
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-5"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-5"
aria-labelledby="label-vaadin-checkbox-3"
id="input-vaadin-checkbox-9"
slot="input"
tabindex="0"
type="checkbox"
Expand All @@ -426,14 +517,21 @@ snapshots["vaadin-checkbox-group host error"] =
value="2"
>
<label
for="input-vaadin-checkbox-6"
id="label-vaadin-checkbox-4"
for="input-vaadin-checkbox-10"
id="label-vaadin-checkbox-6"
slot="label"
>
Checkbox 2
</label>
<div
hidden=""
id="error-message-vaadin-checkbox-8"
slot="error-message"
>
</div>
<input
id="input-vaadin-checkbox-6"
aria-labelledby="label-vaadin-checkbox-6"
id="input-vaadin-checkbox-10"
slot="input"
tabindex="0"
type="checkbox"
Expand Down
Binary file modified ...roup/test/visual/material/screenshots/checkbox-group/baseline/label-focused.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/checkbox/src/vaadin-checkbox-mixin.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js
import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';

/**
* A mixin providing common checkbox functionality.
Expand All @@ -27,10 +29,12 @@ export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
Constructor<DelegateFocusMixinClass> &
Constructor<DelegateStateMixinClass> &
Constructor<DisabledMixinClass> &
Constructor<FieldMixinClass> &
Constructor<FocusMixinClass> &
Constructor<InputMixinClass> &
Constructor<KeyboardMixinClass> &
Constructor<LabelMixinClass> &
Constructor<ValidateMixinClass> &
T;

export declare class CheckboxMixinClass {
Expand Down
Loading

0 comments on commit 992a3a2

Please sign in to comment.