Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add required, error message and helper text to checkbox #7285

Merged
merged 16 commits into from
Apr 10, 2024
Merged

feat: add required, error message and helper text to checkbox #7285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
12e8d9f
feat: add required, error message and helper text to checkbox
web-padawan Mar 28, 2024
e593ec8
fix: do not set active attribute on helper or error click
web-padawan Mar 28, 2024
c83e5bb
test: update Material focus-ring screenshots
web-padawan Mar 28, 2024
59a5ac7
fix: toggle checked property on required indicator click
web-padawan Mar 28, 2024
c60d650
fix: add white-space: nowrap to the label part
web-padawan Mar 28, 2024
8395076
refactor: cleanup Material helper and error styles
web-padawan Mar 28, 2024
d5d68d7
fix: only use error color for required indicator when invalid
web-padawan Mar 28, 2024
c85de41
fix: delegate invalid to unput to set aria-invalid attribute
web-padawan Mar 28, 2024
ea1cad8
fix: update label to not set white-space: nowrap
web-padawan Apr 2, 2024
586c0a3
fix: use correct border color for bordered invalid checkbox
web-padawan Apr 3, 2024
0b463f4
refactor: reduce error and helper spacing to 0.2em
web-padawan Apr 3, 2024
a3c82fe
fix: use CSS gradient for invalid hover state
web-padawan Apr 3, 2024
1886515
refactor: use background-image to make invalid checkbox darker
web-padawan Apr 3, 2024
7281f6f
refactor: use position: absolute for required indicator
web-padawan Apr 4, 2024
ad20414
chore: add prettier-ignore to checkbox styles
web-padawan Apr 10, 2024
1f2ac02
docs: add readonly to the list of state attributes
web-padawan Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/checkbox-group/src/vaadin-checkbox-group.d.ts
View file
Open in desktop
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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed to include this change to #7199 🙈

* `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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading