@lion/field
Advanced tools
@lion/field - npm Package Compare versions
Comparing version 0.9.0 to 0.9.1
@@ -6,2 +6,13 @@ # Change Log | ||
| ## [0.9.1](https://github.com/ing-bank/lion/compare/@lion/field@0.9.0...@lion/field@0.9.1) (2020-02-10) | ||
| ### Bug Fixes | ||
| * **field:** replace state-disabled/filled css classes with attributes ([8e7670e](https://github.com/ing-bank/lion/commit/8e7670e501a1000b2ba39d31b9f5c56cf747bbf1)) | ||
| # [0.9.0](https://github.com/ing-bank/lion/compare/@lion/field@0.8.9...@lion/field@0.9.0) (2020-02-06) | ||
@@ -8,0 +19,0 @@ |
| { | ||
| "name": "@lion/field", | ||
| "version": "0.9.0", | ||
| "version": "0.9.1", | ||
| "description": "Fields are the most fundamental building block of the Form System", | ||
@@ -45,3 +45,3 @@ "author": "ing-bank", | ||
| }, | ||
| "gitHead": "455923278e3a2e9da58fe71df02105ab3f40021c" | ||
| "gitHead": "4eed787dea848a44adea45d6f68a79a1436ad7da" | ||
| } |
@@ -414,9 +414,10 @@ import { html, css, nothing, dedupeMixin, SlotMixin } from '@lion/core'; | ||
| * Modifiers: | ||
| * - {state} .state-disabled : when .form-control (<input>, <textarea> etc.) has disabled set | ||
| * - {state} [disabled] when .form-control (<input>, <textarea> etc.) has disabled set | ||
| * to true | ||
| * - {state} [filled] whether <input> has a value | ||
| * - {state} [touched] whether the user had blurred the field once | ||
| * - {state} [dirty] whether the value has changed since initial value | ||
| * | ||
| * TODO: update states below | ||
| * - {state} .state-focused: when .form-control (<input>, <textarea> etc.) <input> has focus | ||
| * - {state} .state-filled: whether <input> has a value | ||
| * - {state} .state-touched: whether the user had blurred the field once | ||
| * - {state} .state-dirty: whether the value has changed since initial value | ||
| * | ||
| * - {state} .state-invalid: when input has error(s) (regardless of whether they should be | ||
@@ -460,8 +461,8 @@ * shown to the user) | ||
| :host(.state-disabled) { | ||
| :host([disabled]) { | ||
| pointer-events: none; | ||
| } | ||
| :host(.state-disabled) .form-field__label ::slotted(*), | ||
| :host(.state-disabled) .form-field__help-text ::slotted(*) { | ||
| :host([disabled]) .form-field__label ::slotted(*), | ||
| :host([disabled]) .form-field__help-text ::slotted(*) { | ||
| color: var(--disabled-text-color, #adadad); | ||
@@ -483,4 +484,4 @@ } | ||
| /***** {state} .state-disabled *****/ | ||
| :host(.state-disabled) .input-group ::slotted(slot='input') { | ||
| /***** {state} :disabled *****/ | ||
| :host([disabled]) .input-group ::slotted(slot='input') { | ||
| color: var(--disabled-text-color, #adadad); | ||
@@ -487,0 +488,0 @@ } |
@@ -131,10 +131,6 @@ import { SlotMixin, LitElement } from '@lion/core'; | ||
| if (changedProps.has('disabled')) { | ||
| if (this.disabled) { | ||
| this._inputNode.disabled = true; | ||
| this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class | ||
| } else { | ||
| this._inputNode.disabled = false; | ||
| this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class | ||
| } | ||
| if (changedProps.has('disabled') && this.disabled) { | ||
| this._inputNode.disabled = true; | ||
| } else if (changedProps.has('disabled')) { | ||
| this._inputNode.disabled = false; | ||
| } | ||
@@ -199,3 +195,5 @@ | ||
| // For styling purposes, make it known the input field is not empty | ||
| this.classList[value ? 'add' : 'remove']('state-filled'); | ||
| if (this._inputNode) { | ||
| this[value ? 'setAttribute' : 'removeAttribute']('filled', ''); | ||
| } | ||
| } | ||
@@ -202,0 +200,0 @@ |
@@ -158,11 +158,11 @@ import { | ||
| // and make it act on this.value again | ||
| it('has a class "state-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}>`); | ||
| expect(el.classList.contains('state-filled')).to.equal(true); | ||
| expect(el.hasAttribute('filled')).to.equal(true); | ||
| el.value = ''; | ||
| await el.updateComplete; | ||
| expect(el.classList.contains('state-filled')).to.equal(false); | ||
| expect(el.hasAttribute('filled')).to.equal(false); | ||
| el.value = 'bla'; | ||
| await el.updateComplete; | ||
| expect(el.classList.contains('state-filled')).to.equal(true); | ||
| expect(el.hasAttribute('filled')).to.equal(true); | ||
| }); | ||
@@ -183,5 +183,4 @@ | ||
| // TODO: add pointerEvents test for disabled | ||
| it('has a class "state-disabled"', async () => { | ||
| it('is disabled when disabled property is passed', async () => { | ||
| const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`); | ||
| expect(el.classList.contains('state-disabled')).to.equal(false); | ||
| expect(el._inputNode.hasAttribute('disabled')).to.equal(false); | ||
@@ -193,7 +192,4 @@ | ||
| expect(el.classList.contains('state-disabled')).to.equal(true); | ||
| expect(el._inputNode.hasAttribute('disabled')).to.equal(true); | ||
| const disabledel = await fixture(html`<${tag} disabled>${inputSlot}</${tag}>`); | ||
| expect(disabledel.classList.contains('state-disabled')).to.equal(true); | ||
| expect(disabledel._inputNode.hasAttribute('disabled')).to.equal(true); | ||
@@ -200,0 +196,0 @@ }); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.05%
160670
- Lines of code
- decreased by-0.12%
3212
No dependency changes