chore: todo cleanup
This commit is contained in:
parent
9c6eaf83f1
commit
5a0b2c41ea
16 changed files with 13 additions and 49 deletions
|
|
@ -75,7 +75,6 @@ export class AjaxClass extends LionSingleton {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets the config for the instance
|
* Sets the config for the instance
|
||||||
* TODO: rename to 'config', because of conflict with options() request method on axios
|
|
||||||
*/
|
*/
|
||||||
set options(config) {
|
set options(config) {
|
||||||
this.__config = config;
|
this.__config = config;
|
||||||
|
|
@ -130,7 +129,6 @@ export class AjaxClass extends LionSingleton {
|
||||||
* @param {string} url the endpoint location
|
* @param {string} url the endpoint location
|
||||||
* @param {AxiosRequestConfig} config the config specific for this request
|
* @param {AxiosRequestConfig} config the config specific for this request
|
||||||
* @returns {AxiosResponseSchema}
|
* @returns {AxiosResponseSchema}
|
||||||
* TODO: consider reenable after rename of options to config
|
|
||||||
*/
|
*/
|
||||||
// options(url, config) {
|
// options(url, config) {
|
||||||
// return this.proxy.options.apply(this, [url, { ...this.__config, ...config }]);
|
// return this.proxy.options.apply(this, [url, { ...this.__config, ...config }]);
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,6 @@ describe('lion-button', () => {
|
||||||
it('hides the native button in the UI', async () => {
|
it('hides the native button in the UI', async () => {
|
||||||
const el = await fixture(`<lion-button>foo</lion-button>`);
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
||||||
expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
|
expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
|
||||||
// TODO: If we abstract to an srOnlyMixin, we should test that the styling equals that of the srOnlyMixin output
|
|
||||||
expect(window.getComputedStyle(el._nativeButtonNode).clip).to.equal('rect(0px, 0px, 0px, 0px)');
|
expect(window.getComputedStyle(el._nativeButtonNode).clip).to.equal('rect(0px, 0px, 0px, 0px)');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,6 @@ const defaultMonthLabels = [
|
||||||
'December',
|
'December',
|
||||||
];
|
];
|
||||||
|
|
||||||
// TODO: remove as much logic as possible from this template and move to processor
|
|
||||||
export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels } = {}) {
|
export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels } = {}) {
|
||||||
const dayNumber = day.date.getDate();
|
const dayNumber = day.date.getDate();
|
||||||
const monthName = monthsLabels[day.date.getMonth()];
|
const monthName = monthsLabels[day.date.getMonth()];
|
||||||
|
|
|
||||||
|
|
@ -53,13 +53,8 @@ Fieldsets are the basis for:
|
||||||
|
|
||||||
## Other Resources
|
## Other Resources
|
||||||
|
|
||||||
<!-- TODO: - [`FormControlMixin`] () -->
|
|
||||||
<!-- TODO: - [`LionField`] () -->
|
|
||||||
|
|
||||||
- [Model Value](./docs/modelValue.md)
|
- [Model Value](./docs/modelValue.md)
|
||||||
- [Formatting and parsing](./docs/FormattingAndParsing.md)
|
- [Formatting and parsing](./docs/FormattingAndParsing.md)
|
||||||
- [Interaction states](./docs/InteractionStates.md)
|
- [Interaction states](./docs/InteractionStates.md)
|
||||||
- [Validation System](../validate/docs/ValidationSystem.md)
|
- [Validation System](../validate/docs/ValidationSystem.md)
|
||||||
- [Custom Fields](./docs/CustomFieldsTutorial.md)
|
- [Custom Fields](./docs/CustomFieldsTutorial.md)
|
||||||
|
|
||||||
<!-- TODO: - [`FocusMixin`] (/FocusMixin.md) -->
|
|
||||||
|
|
|
||||||
|
|
@ -50,13 +50,8 @@ Fieldsets are the basis for:
|
||||||
|
|
||||||
## Other Resources
|
## Other Resources
|
||||||
|
|
||||||
<!-- TODO: - [`FormControlMixin`] () -->
|
|
||||||
<!-- TODO: - [`LionField`] () -->
|
|
||||||
|
|
||||||
- [Model Value](./modelValue.md)
|
- [Model Value](./modelValue.md)
|
||||||
- [Formatting and parsing](./FormattingAndParsing.md)
|
- [Formatting and parsing](./FormattingAndParsing.md)
|
||||||
- [Interaction states](./InteractionStates.md)
|
- [Interaction states](./InteractionStates.md)
|
||||||
- [Validation System](../../validate/docs/ValidationSystem.md)
|
- [Validation System](../../validate/docs/ValidationSystem.md)
|
||||||
- [FieldCustomMixin](./FieldCustomMixin.md)
|
- [FieldCustomMixin](./FieldCustomMixin.md)
|
||||||
|
|
||||||
<!-- TODO: - [`FocusMixin`] (/FocusMixin.md) -->
|
|
||||||
|
|
|
||||||
|
|
@ -393,9 +393,6 @@ export const FormControlMixin = dedupeMixin(
|
||||||
* with the CSS component.
|
* with the CSS component.
|
||||||
* Note that every occurence of '::slotted(*)' can be rewritten to '> *' for use in an other
|
* Note that every occurence of '::slotted(*)' can be rewritten to '> *' for use in an other
|
||||||
* context
|
* context
|
||||||
*
|
|
||||||
* TODO: find best naming convention: https://en.bem.info/methodology/naming-convention/
|
|
||||||
* (react style would align better with JSS)
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -418,6 +415,8 @@ export const FormControlMixin = dedupeMixin(
|
||||||
* - {state} [dirty] whether the value has changed since initial value
|
* - {state} [dirty] whether the value has changed since initial value
|
||||||
*
|
*
|
||||||
* TODO: update states below
|
* TODO: update states below
|
||||||
|
* These classes are now attributes. Check them agains the new attribute names inside ValidateMixin
|
||||||
|
* and InteractionStateMixin. Some states got renamed. Make sure to use the correct ones!
|
||||||
* - {state} .state-focused: when .form-control (<input>, <textarea> etc.) <input> has focus
|
* - {state} .state-focused: when .form-control (<input>, <textarea> etc.) <input> has focus
|
||||||
* - {state} .state-invalid: when input has error(s) (regardless of whether they should be
|
* - {state} .state-invalid: when input has error(s) (regardless of whether they should be
|
||||||
* shown to the user)
|
* shown to the user)
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,6 @@ export const FormRegistrarPortalMixin = dedupeMixin(
|
||||||
|
|
||||||
this.__redispatchEventForFormRegistrarPortalMixin = ev => {
|
this.__redispatchEventForFormRegistrarPortalMixin = ev => {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
// TODO: change ev.target to original registering element
|
|
||||||
this.registrationTarget.dispatchEvent(
|
this.registrationTarget.dispatchEvent(
|
||||||
new CustomEvent('form-element-register', {
|
new CustomEvent('form-element-register', {
|
||||||
detail: { element: ev.detail.element },
|
detail: { element: ev.detail.element },
|
||||||
|
|
|
||||||
|
|
@ -219,7 +219,7 @@ export const FormatMixin = dedupeMixin(
|
||||||
// For backwards compatibility we return an empty string:
|
// For backwards compatibility we return an empty string:
|
||||||
// - it triggers validation for required validators (see ValidateMixin.validate())
|
// - it triggers validation for required validators (see ValidateMixin.validate())
|
||||||
// - it can be expected by 3rd parties (for instance unit tests)
|
// - it can be expected by 3rd parties (for instance unit tests)
|
||||||
// TODO: In a breaking refactor of the Validation System, this behavior can be corrected.
|
// TODO(@tlouisse): In a breaking refactor of the Validation System, this behavior can be corrected.
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,7 @@ import { FocusMixin } from './FocusMixin.js';
|
||||||
|
|
||||||
/* eslint-disable wc/guard-super-call */
|
/* eslint-disable wc/guard-super-call */
|
||||||
|
|
||||||
// TODO:
|
// TODO: Add submitted prop to InteractionStateMixin.
|
||||||
// - Consider exporting as FieldMixin
|
|
||||||
// - Add submitted prop to InteractionStateMixin
|
|
||||||
// - Find a better way to do value delegation via attr
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* `LionField`: wraps <input>, <textarea>, <select> and other interactable elements.
|
* `LionField`: wraps <input>, <textarea>, <select> and other interactable elements.
|
||||||
* Also it would follow a nice hierarchy: lion-form -> lion-fieldset -> lion-field
|
* Also it would follow a nice hierarchy: lion-form -> lion-fieldset -> lion-field
|
||||||
|
|
@ -107,7 +103,8 @@ export class LionField extends FormControlMixin(
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
// TODO: Normally we put super calls on top for predictability,
|
// TODO: Investigate issue below.
|
||||||
|
// Normally we put super calls on top for predictability,
|
||||||
// here we temporarily need to do attribute delegation before,
|
// here we temporarily need to do attribute delegation before,
|
||||||
// so the FormatMixin uses the right value. Should be solved
|
// so the FormatMixin uses the right value. Should be solved
|
||||||
// when value delegation is part of the calculation loop of
|
// when value delegation is part of the calculation loop of
|
||||||
|
|
@ -197,7 +194,6 @@ export class LionField extends FormControlMixin(
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Copied from Polymer team. TODO: add license
|
|
||||||
* Restores the cursor to its original position after updating the value.
|
* Restores the cursor to its original position after updating the value.
|
||||||
* @param {string} newValue The value that should be saved.
|
* @param {string} newValue The value that should be saved.
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,6 @@ class FormRegistrarManager {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: this method has to be removed when EventTarget polyfill is available on IE11
|
|
||||||
_fakeExtendsEventTarget() {
|
_fakeExtendsEventTarget() {
|
||||||
const delegate = document.createDocumentFragment();
|
const delegate = document.createDocumentFragment();
|
||||||
['addEventListener', 'dispatchEvent', 'removeEventListener'].forEach(funcName => {
|
['addEventListener', 'dispatchEvent', 'removeEventListener'].forEach(funcName => {
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@ function mimicUserInput(formControl, newViewValue) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function runFormatMixinSuite(customConfig) {
|
export function runFormatMixinSuite(customConfig) {
|
||||||
// TODO: Maybe remove suffix
|
|
||||||
const cfg = {
|
const cfg = {
|
||||||
tagString: null,
|
tagString: null,
|
||||||
modelValueType: String,
|
modelValueType: String,
|
||||||
|
|
@ -23,11 +22,6 @@ export function runFormatMixinSuite(customConfig) {
|
||||||
* Mocks a value for you based on the data type
|
* Mocks a value for you based on the data type
|
||||||
* Optionally toggles you a different value
|
* Optionally toggles you a different value
|
||||||
* for needing to mimic a value-change.
|
* for needing to mimic a value-change.
|
||||||
*
|
|
||||||
* TODO: The FormatMixin can know about platform types like
|
|
||||||
* Date, but not about modelValue of input-iban etc.
|
|
||||||
* Make this concept expandable by allowing 'non standard'
|
|
||||||
* modelValues to hook into this.
|
|
||||||
*/
|
*/
|
||||||
function generateValueBasedOnType(opts = {}) {
|
function generateValueBasedOnType(opts = {}) {
|
||||||
const options = { type: cfg.modelValueType, toggleValue: false, viewValue: false, ...opts };
|
const options = { type: cfg.modelValueType, toggleValue: false, viewValue: false, ...opts };
|
||||||
|
|
|
||||||
|
|
@ -153,8 +153,6 @@ describe('<lion-field>', () => {
|
||||||
expect(el._inputNode.getAttribute('autocomplete')).to.equal('off');
|
expect(el._inputNode.getAttribute('autocomplete')).to.equal('off');
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO: find out if we could put all listeners on this.value (instead of this._inputNode.value)
|
|
||||||
// and make it act on this.value again
|
|
||||||
it('has an attribute filled if this.value is filled', async () => {
|
it('has an attribute filled if this.value is filled', async () => {
|
||||||
const el = await fixture(html`<${tag} value="filled">${inputSlot}</${tag}>`);
|
const el = await fixture(html`<${tag} value="filled">${inputSlot}</${tag}>`);
|
||||||
expect(el.hasAttribute('filled')).to.equal(true);
|
expect(el.hasAttribute('filled')).to.equal(true);
|
||||||
|
|
@ -178,7 +176,7 @@ describe('<lion-field>', () => {
|
||||||
expect(el._inputNode.selectionEnd).to.equal(2);
|
expect(el._inputNode.selectionEnd).to.equal(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO: add pointerEvents test for disabled
|
// TODO: Add test that css pointerEvents is none if disabled.
|
||||||
it('is disabled when disabled property is passed', async () => {
|
it('is disabled when disabled property is passed', async () => {
|
||||||
const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`);
|
const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`);
|
||||||
expect(el._inputNode.hasAttribute('disabled')).to.equal(false);
|
expect(el._inputNode.hasAttribute('disabled')).to.equal(false);
|
||||||
|
|
@ -241,7 +239,7 @@ describe('<lion-field>', () => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO: put this test on FormControlMixin test once there
|
// TODO: Move test below to FormControlMixin.test.js.
|
||||||
it(`allows to add to aria description or label via addToAriaLabelledBy() and
|
it(`allows to add to aria description or label via addToAriaLabelledBy() and
|
||||||
addToAriaDescribedBy()`, async () => {
|
addToAriaDescribedBy()`, async () => {
|
||||||
const wrapper = await fixture(html`
|
const wrapper = await fixture(html`
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ export class LionFieldset extends FormRegistrarMixin(
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
// TODO: Move property submitted to InteractionStateMixin.
|
||||||
submitted: {
|
submitted: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
reflect: true,
|
reflect: true,
|
||||||
|
|
@ -231,7 +232,6 @@ export class LionFieldset extends FormRegistrarMixin(
|
||||||
}
|
}
|
||||||
|
|
||||||
resetInteractionState() {
|
resetInteractionState() {
|
||||||
// TODO: add submitted prop to InteractionStateMixin
|
|
||||||
this.submitted = false;
|
this.submitted = false;
|
||||||
this.touched = false;
|
this.touched = false;
|
||||||
this.dirty = false;
|
this.dirty = false;
|
||||||
|
|
@ -409,6 +409,9 @@ export class LionFieldset extends FormRegistrarMixin(
|
||||||
child.__parentFormGroup = this;
|
child.__parentFormGroup = this;
|
||||||
|
|
||||||
// aria-describedby of (nested) children
|
// aria-describedby of (nested) children
|
||||||
|
|
||||||
|
// TODO: Teardown in removeFormElement
|
||||||
|
|
||||||
let parent = this;
|
let parent = this;
|
||||||
while (parent) {
|
while (parent) {
|
||||||
this.constructor._addDescriptionElementIdsToField(
|
this.constructor._addDescriptionElementIdsToField(
|
||||||
|
|
@ -465,12 +468,6 @@ export class LionFieldset extends FormRegistrarMixin(
|
||||||
} else if (this.formElements[name]) {
|
} else if (this.formElements[name]) {
|
||||||
delete this.formElements[name];
|
delete this.formElements[name];
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Clean up aria references of elements that were ancestors of child.
|
|
||||||
// For this, it would be better if LionField._ariaDescribedby would be an element array from
|
|
||||||
// which you can delete all elems that are not child.contains(descriptionEl), so that the
|
|
||||||
// resulting array can be serialized into a string of ids.
|
|
||||||
|
|
||||||
this.validate();
|
this.validate();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -87,9 +87,6 @@ Fieldsets are at the base of:
|
||||||
|
|
||||||
## Other Resources
|
## Other Resources
|
||||||
|
|
||||||
<!-- TODO: - [`FormControlMixin`] () -->
|
|
||||||
<!-- TODO: - [`LionField`] () -->
|
|
||||||
|
|
||||||
- [Model Value](?path=/docs/forms-system-modelvalue--page)
|
- [Model Value](?path=/docs/forms-system-modelvalue--page)
|
||||||
- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
|
- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
|
||||||
- [Interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
- [Interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,6 @@ describe('formatAmount()', () => {
|
||||||
localizeTearDown();
|
localizeTearDown();
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO: Document that maximumFractionDigits >= minimumFractionDigits else a RangeError is thrown by Intl
|
|
||||||
|
|
||||||
it('formats number with options', async () => {
|
it('formats number with options', async () => {
|
||||||
expect(
|
expect(
|
||||||
formatAmount(12.345678, {
|
formatAmount(12.345678, {
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ export class LionInput extends LionField {
|
||||||
return {
|
return {
|
||||||
...super.slots,
|
...super.slots,
|
||||||
input: () => {
|
input: () => {
|
||||||
|
// TODO: Find a better way to do value delegation via attr
|
||||||
const native = document.createElement('input');
|
const native = document.createElement('input');
|
||||||
if (this.__dataInstanceProps && this.__dataInstanceProps.modelValue) {
|
if (this.__dataInstanceProps && this.__dataInstanceProps.modelValue) {
|
||||||
native.setAttribute('value', this.__dataInstanceProps.modelValue);
|
native.setAttribute('value', this.__dataInstanceProps.modelValue);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue