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

Merge pull request #1436 from maartenst/fix/button_toggling

Browse source 
Fix/button toggling
This commit is contained in:
gerjanvangeest 2021-07-05 11:34:28 +02:00 committed by GitHub
commit 13ab349ff9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 103 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/afraid-snakes-bake.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/input-stepper': patch
---
- fixed the button toggling so it is always toggled if relevant values change
- fires user-input-changed only on increment/decrement

13
packages/input-stepper/src/LionInputStepper.js
View file

@ -96,14 +96,20 @@ export class LionInputStepper extends LionInput {
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('modelValue')) {
this.__toggleSpinnerButtonsState();
}
if (changedProperties.has('min')) {
this._inputNode.min = `${this.min}`;
this.values.min = this.min;
this.__toggleSpinnerButtonsState();
}
if (changedProperties.has('max')) {
this._inputNode.max = `${this.max}`;
this.values.max = this.max;
this.__toggleSpinnerButtonsState();
}
if (changedProperties.has('step')) {
@ -173,11 +179,6 @@ export class LionInputStepper extends LionInput {
decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
this.setAttribute('aria-valuenow', `${this.currentValue}`);
this.dispatchEvent(
new CustomEvent('user-input-changed', {
bubbles: true,
}),
);
}
/**
@ -204,6 +205,7 @@ export class LionInputStepper extends LionInput {
if (newValue <= max || max === Infinity) {
this.value = `${newValue}`;
this.__toggleSpinnerButtonsState();
this._proxyInputEvent();
}
}
@ -217,6 +219,7 @@ export class LionInputStepper extends LionInput {
if (newValue >= min || min === Infinity) {
this.value = `${newValue}`;
this.__toggleSpinnerButtonsState();
this._proxyInputEvent();
}
}

89
packages/input-stepper/test/lion-input-stepper.test.js
View file

@ -38,6 +38,40 @@ describe('<lion-input-stepper>', () => {
expect(el.value).to.equal('-1');
});
it('fires one "user-input-changed" event on + button click', async () => {
let counter = 0;
const el = await fixture(html`
<lion-input-stepper
name="year"
label="Years"
@user-input-changed="${() => {
counter += 1;
}}"
>
</lion-input-stepper>
`);
const incrementButton = el.querySelector('[slot=suffix]');
incrementButton?.dispatchEvent(new Event('click'));
expect(counter).to.equal(1);
});
it('fires one "user-input-changed" event on - button click', async () => {
let counter = 0;
const el = await fixture(html`
<lion-input-stepper
name="year"
label="Years"
@user-input-changed="${() => {
counter += 1;
}}"
>
</lion-input-stepper>
`);
const decrementButton = el.querySelector('[slot=prefix]');
decrementButton?.dispatchEvent(new Event('click'));
expect(counter).to.equal(1);
});
it('should update min and max attributes when min and max property change', async () => {
const el = await fixture(inputStepperWithAttrs);
el.min = 100;
@ -46,6 +80,61 @@ describe('<lion-input-stepper>', () => {
expect(el._inputNode.min).to.equal(el.min.toString());
expect(el._inputNode.max).to.equal(el.max.toString());
});
it('should remove the disabled attribute of the decrement button when the min property changes to below the modelvalue', async () => {
const el = await fixture(inputStepperWithAttrs);
const decrementButton = el.querySelector('[slot=prefix]');
el.modelValue = 100;
await nextFrame();
expect(decrementButton?.getAttribute('disabled')).to.equal('true');
el.min = 99;
await nextFrame();
expect(decrementButton?.getAttribute('disabled')).to.equal(null);
});
it('should add the disabled attribute of the decrement button when the min property changes to the modelvalue', async () => {
const el = await fixture(inputStepperWithAttrs);
const decrementButton = el.querySelector('[slot=prefix]');
el.modelValue = 101;
await nextFrame();
expect(decrementButton?.getAttribute('disabled')).to.equal(null);
el.min = 101;
await nextFrame();
expect(decrementButton?.getAttribute('disabled')).to.equal('true');
});
it('should remove the disabled attribute of the increment button when the max property changes to above the modelvalue', async () => {
const el = await fixture(inputStepperWithAttrs);
const incrementButton = el.querySelector('[slot=suffix]');
el.modelValue = 200;
await nextFrame();
expect(incrementButton?.getAttribute('disabled')).to.equal('true');
el.max = 201;
await nextFrame();
expect(incrementButton?.getAttribute('disabled')).to.equal(null);
});
it('should add the disabled attribute of the increment button when the max property changes to the modelvalue', async () => {
const el = await fixture(inputStepperWithAttrs);
const incrementButton = el.querySelector('[slot=suffix]');
el.modelValue = 199;
await nextFrame();
expect(incrementButton?.getAttribute('disabled')).to.equal(null);
el.max = 199;
await nextFrame();
expect(incrementButton?.getAttribute('disabled')).to.equal('true');
});
it('should react to changes in the modelValue by adjusting the disabled state of the button', async () => {
const el = await fixture(inputStepperWithAttrs);
const incrementButton = el.querySelector('[slot=suffix]');
el.modelValue = 199;
await nextFrame();
expect(incrementButton?.getAttribute('disabled')).to.equal(null);
el.modelValue = 200;
await nextFrame();
expect(incrementButton?.getAttribute('disabled')).to.equal('true');
});
});
describe('Accessibility', () => {