ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: cleanup and align types/tests

Browse source
This commit is contained in:
jorenbroekema 2020-10-14 17:55:02 +02:00
parent 8a3a3bbaee
commit eb87859d76
12 changed files with 44 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/combobox/README.md
View file

@ -267,7 +267,7 @@ export const invokerButton = () => html`
Validation can be used as normal, below is an example of a combobox with a `Required` validator.
```js story
```js preview-story
export const validation = () => {
loadDefaultFeedbackMessages();
Required.getMessage = () => 'Please enter a value';
@ -278,7 +278,6 @@ export const validation = () => {
.validators="${[new Required()]}"
name="favoriteMovie"
label="Favorite movie"
autocomplete="both"
>
<lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
<lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>

5
packages/combobox/src/LionCombobox.js
View file

@ -433,8 +433,8 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
*
* @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
*/
_repropagationConditionFails(target) {
return super._repropagationConditionFails(target) && this.formElements?.some(el => el.checked);
_repropagationCondition(target) {
return super._repropagationCondition(target) || this.formElements.every(el => !el.checked);
}
/* eslint-disable no-param-reassign */
@ -482,6 +482,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
prevValue.length &&
curValue.length &&
prevValue[0].toLowerCase() !== curValue[0].toLowerCase();
return userIsAddingChars || userStartsNewWord;
}

17
packages/combobox/test/lion-combobox.test.js
View file

@ -450,22 +450,23 @@ describe('lion-combobox', () => {
it('works with validation', async () => {
const el = /** @type {LionCombobox} */ (await fixture(html`
<lion-combobox name="foo" .validators=${[new Required()]}>
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
</lion-combobox>
`));
// open
el._comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
mimicUserTyping(el, 'art');
await el.updateComplete;
expect(el.checkedIndex).to.equal(0);
mimicUserTyping(el, '');
// Simulate backspace deleting the char at the end of the string
el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
el._inputNode.dispatchEvent(new Event('input'));
const arr = el._inputNode.value.split('');
arr.splice(el._inputNode.value.length - 1, 1);
el._inputNode.value = arr.join('');
await el.updateComplete;
el.dispatchEvent(new Event('blur'));
expect(el.checkedIndex).to.equal(-1);
await el.feedbackComplete;
expect(el.hasFeedbackFor).to.include('error');

1
packages/form-core/src/FocusMixin.js
View file

@ -6,6 +6,7 @@ import { FormControlMixin } from './FormControlMixin.js';
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
*/
const FocusMixinImplementation = superclass =>
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
// eslint-disable-next-line no-unused-vars, max-len, no-shadow
class FocusMixin extends FormControlMixin(superclass) {
static get properties() {

6
packages/form-core/src/FormControlMixin.js
View file

@ -801,7 +801,7 @@ const FormControlMixinImplementation = superclass =>
// We only send the checked changed up (not the unchecked). In this way a choice group
// (radio-group, checkbox-group, select/listbox) acts as an 'endpoint' (a single Field)
// just like the native <select>
if (this._repropagationConditionFails(target)) {
if (!this._repropagationCondition(target)) {
return;
}
@ -828,8 +828,8 @@ const FormControlMixinImplementation = superclass =>
* This will fix the types and reduce the need for ignores/expect-errors
* @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
*/
_repropagationConditionFails(target) {
return (
_repropagationCondition(target) {
return !(
this._repropagationRole === 'choice-group' &&
// @ts-expect-error multipleChoice is not directly available but only as side effect
!this.multipleChoice &&

1
packages/form-core/src/FormatMixin.js
View file

@ -57,6 +57,7 @@ import { ValidateMixin } from './validate/ValidateMixin.js';
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
*/
const FormatMixinImplementation = superclass =>
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
class FormatMixin extends ValidateMixin(FormControlMixin(superclass)) {
static get properties() {
return {

1
packages/form-core/src/InteractionStateMixin.js
View file

@ -18,6 +18,7 @@ import { FormControlMixin } from './FormControlMixin.js';
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
*/
const InteractionStateMixinImplementation = superclass =>
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
class InteractionStateMixin extends FormControlMixin(superclass) {
static get properties() {
return {

1
packages/form-core/src/choice-group/ChoiceGroupMixin.js
View file

@ -15,6 +15,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
*/
const ChoiceGroupMixinImplementation = superclass =>
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) {
static get properties() {
return {

1
packages/form-core/src/choice-group/ChoiceInputMixin.js
View file

@ -21,6 +21,7 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
*/
const ChoiceInputMixinImplementation = superclass =>
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
class ChoiceInputMixin extends FormatMixin(superclass) {
static get properties() {
return {

1
packages/form-core/src/form-group/FormGroupMixin.js
View file

@ -29,6 +29,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
*/
const FormGroupMixinImplementation = superclass =>
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
class FormGroupMixin extends FormRegistrarMixin(
FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(superclass)))),
) {

1
packages/form-core/src/validate/ValidateMixin.js
View file

@ -32,6 +32,7 @@ function arrayDiff(array1 = [], array2 = []) {
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
*/
export const ValidateMixinImplementation = superclass =>
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
class extends FormControlMixin(
SyncUpdatableMixin(DisabledMixin(SlotMixin(ScopedElementsMixin(superclass)))),
) {

21
packages/form-core/types/FormControlMixinTypes.d.ts vendored
View file

@ -12,6 +12,27 @@ declare interface HTMLElementWithValue extends HTMLElement {
export declare class FormControlHost {
static get styles(): CSSResult | CSSResult[];
static get properties(): {
name: {
type: StringConstructor;
reflect: boolean;
};
readOnly: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
label: StringConstructor;
helpText: {
type: StringConstructor;
attribute: string;
};
modelValue: { attribute: boolean };
_ariaLabelledNodes: { attribute: boolean };
_ariaDescribedNodes: { attribute: boolean };
_repropagationRole: { attribute: boolean };
_isRepropagationEndpoint: { attribute: boolean };
};
/**
* A Boolean attribute which, if present, indicates that the user should not be able to edit
* the value of the input. The difference between disabled and readonly is that read-only