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

web-padawan · 2024-03-28T09:56:15Z

Description

Fixes #938
Fixes #3749

Type of change

Feature

Note

This changes vaadin-checkbox to use FieldMixin which also adds accessibleName and accessibleNameRef.

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

packages/checkbox/src/vaadin-checkbox-styles.js

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js

rolfsmeds · 2024-04-02T13:37:20Z

Currently, required indicator increases width of the vaadin-checkbox when it's shown (as it is placed after the label).
Trying to use position: absolute for it to keep width consistent causes issues when e.g. helper is longer than the label.

I presume you're referring to the indicator then ending up aligned with the helper's end, rather than the label's end?
But what if we set the width of the label part to max-content?

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js

web-padawan · 2024-04-03T12:11:22Z

But what if we set the width of the label part to max-content?

Yes, using max-width: max-content on the label part work with position: absolute on the indicator.
It would make the required indicator not extend width (but it will be placed close to the label text).

rolfsmeds · 2024-04-04T06:40:50Z

But what if we set the width of the label part to max-content?

Yes, using max-width: max-content on the label part work with position: absolute on the indicator. It would make the required indicator not extend width (but it will be placed close to the label text).

I suppose adding a bit of end-padding to the label would be good? max-content should take that into account IIRC.

web-padawan · 2024-04-04T06:52:10Z

I suppose adding a bit of end-padding to the label would be good? max-content should take that into account IIRC.

Yes, it already has padding end set to --lumo-space-s on ::slotted(label). Increasing it to --lumo-space-m would help to make indicator look not too close to the checkbox. But that would also increase the default checkbox width.

web-padawan · 2024-04-04T08:27:39Z

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js

+    :host([dir='rtl'][has-label]) ::slotted(label) {
+      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+    }
+
+    :host([has-label][required]) ::slotted(label) {
+      padding-inline-end: var(--lumo-space-m);
+    }


Moved RTL style block to make sure required state overrides padding for it.

web-padawan · 2024-04-10T10:12:04Z

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

@@ -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


Missed to include this change to #7199 🙈

sonarcloud · 2024-04-10T10:40:19Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

vaadin-bot · 2024-06-11T15:11:53Z

This ticket/PR has been released with Vaadin 24.4.0.

web-padawan requested review from rolfsmeds and vursen March 28, 2024 09:56

web-padawan force-pushed the feat/checkbox-required-helper branch 3 times, most recently from 5efa7dc to 868fbc6 Compare March 28, 2024 11:31

knoobie reviewed Mar 28, 2024

View reviewed changes

packages/checkbox/src/vaadin-checkbox.d.ts Show resolved Hide resolved

web-padawan mentioned this pull request Apr 2, 2024

feat: add Checkbox helper and CheckboxGroup item helper generator vaadin/flow-components#6166

Merged

sissbruecker reviewed Apr 2, 2024

View reviewed changes

packages/checkbox/src/vaadin-checkbox-styles.js Outdated Show resolved Hide resolved

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js Show resolved Hide resolved

rolfsmeds requested changes Apr 2, 2024

View reviewed changes

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js Outdated Show resolved Hide resolved

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js Show resolved Hide resolved

web-padawan mentioned this pull request Apr 3, 2024

feat: add required state and validation support to Checkbox vaadin/flow-components#6167

Merged

web-padawan requested a review from rolfsmeds April 3, 2024 12:11

web-padawan removed the request for review from vursen April 4, 2024 08:26

web-padawan commented Apr 4, 2024

View reviewed changes

web-padawan requested a review from sissbruecker April 4, 2024 10:35

rolfsmeds approved these changes Apr 4, 2024

View reviewed changes

web-padawan added 2 commits April 10, 2024 12:56

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

12e8d9f

fix: do not set active attribute on helper or error click

e593ec8

web-padawan force-pushed the feat/checkbox-required-helper branch from 2d158f6 to 14d2000 Compare April 10, 2024 09:59

web-padawan commented Apr 10, 2024

View reviewed changes

web-padawan removed the request for review from sissbruecker April 10, 2024 10:12

web-padawan added 6 commits April 10, 2024 13:29

test: update Material focus-ring screenshots

c83e5bb

fix: toggle checked property on required indicator click

59a5ac7

fix: add white-space: nowrap to the label part

c60d650

refactor: cleanup Material helper and error styles

8395076

fix: only use error color for required indicator when invalid

d5d68d7

fix: delegate invalid to unput to set aria-invalid attribute

c85de41

web-padawan added 5 commits April 10, 2024 13:29

fix: update label to not set white-space: nowrap

ea1cad8

fix: use correct border color for bordered invalid checkbox

586c0a3

refactor: reduce error and helper spacing to 0.2em

0b463f4

fix: use CSS gradient for invalid hover state

a3c82fe

refactor: use background-image to make invalid checkbox darker

1886515

web-padawan force-pushed the feat/checkbox-required-helper branch from 7aa942f to d394916 Compare April 10, 2024 10:31

web-padawan added 3 commits April 10, 2024 13:39

refactor: use position: absolute for required indicator

7281f6f

chore: add prettier-ignore to checkbox styles

ad20414

docs: add readonly to the list of state attributes

1f2ac02

web-padawan force-pushed the feat/checkbox-required-helper branch from d394916 to 1f2ac02 Compare April 10, 2024 10:39

web-padawan merged commit 992a3a2 into main Apr 10, 2024
9 checks passed

web-padawan deleted the feat/checkbox-required-helper branch April 10, 2024 10:53

web-padawan mentioned this pull request Apr 10, 2024

fix: add missing invalid-changed and validated event types #7316

Merged

vaadin-bot added the Released with Vaadin 24.4.0 label Jun 11, 2024

web-padawan mentioned this pull request Aug 19, 2024

fix: propagate checkbox required attribute to input #7672

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

web-padawan commented Mar 28, 2024 •

edited

Loading

rolfsmeds commented Apr 2, 2024

web-padawan commented Apr 3, 2024

rolfsmeds commented Apr 4, 2024

web-padawan commented Apr 4, 2024

web-padawan Apr 4, 2024

web-padawan Apr 10, 2024

sonarcloud bot commented Apr 10, 2024

vaadin-bot commented Jun 11, 2024

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

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

Conversation

web-padawan commented Mar 28, 2024 • edited Loading

Description

Type of change

Note

rolfsmeds commented Apr 2, 2024

web-padawan commented Apr 3, 2024

rolfsmeds commented Apr 4, 2024

web-padawan commented Apr 4, 2024

web-padawan Apr 4, 2024

Choose a reason for hiding this comment

web-padawan Apr 10, 2024

Choose a reason for hiding this comment

sonarcloud bot commented Apr 10, 2024

Quality Gate passed

vaadin-bot commented Jun 11, 2024

web-padawan commented Mar 28, 2024 •

edited

Loading