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.

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: Render validation messages for Form associated custom elements #1254

Merged
merged 72 commits into from
Oct 7, 2024

Conversation

rkaraivanov
Copy link
Member

@rkaraivanov rkaraivanov commented Jun 13, 2024

Closes #1195
Closes #1043

Specification here

@imincheva

This comment was marked as resolved.

@imincheva

This comment was marked as resolved.

@imincheva

This comment was marked as resolved.

Comment on lines +396 to +425
it('renders value-missing slot', async () => {
await createFixture(html`
<igc-checkbox required>
<div slot="value-missing"></div>
</igc-checkbox>
`);

await checkValidationSlots(element, 'valueMissing');
});

it('renders custom-error slot', async () => {
await createFixture(html`
<igc-checkbox>
<div slot="custom-error"></div>
</igc-checkbox>
`);

element.setCustomValidity('invalid');
await checkValidationSlots(element, 'customError');
});

it('renders invalid slot', async () => {
await createFixture(html`
<igc-checkbox required>
<div slot="invalid"></div>
</igc-checkbox>
`);

await checkValidationSlots(element, 'invalid');
});
Copy link
Member

Choose a reason for hiding this comment

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

These could be entirely data driven (either separate tests or a single one) in a loop of slot names. Assuming checkValidationSlots will handle the slot name directly since it only converts them to kebab case anyway.

Copy link
Member

Choose a reason for hiding this comment

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

Pretty much true for the rest of the components running this set of checks it seems.

src/components/common/mixins/forms/types.ts Outdated Show resolved Hide resolved
src/components/input/input-base.ts Show resolved Hide resolved
Added aria-describedby for input/mask-input for
the internal native input element when content is
projected into the helper-text slot.
@simeonoff simeonoff merged commit 0e431fb into master Oct 7, 2024
5 checks passed
@simeonoff simeonoff deleted the rkaraivanov/validation-container branch October 7, 2024 07:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhancing Web Components Form Validation IgcDateTimeInput - missing invalid event or invalid prompt display
6 participants