From 6c510e7a1f0748fcdc4de558c0c9c6f7c48d8dfa Mon Sep 17 00:00:00 2001 From: Hardik Pithva Date: Mon, 26 Oct 2020 14:59:33 +0100 Subject: [PATCH 1/4] fix(input-stepper): make use of prefix and suffix slots --- .../input-stepper/src/LionInputStepper.js | 100 +++++++++++++----- 1 file changed, 73 insertions(+), 27 deletions(-) diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index 42d09ddb0..918222363 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -34,8 +34,6 @@ export class LionInputStepper extends LionInput { type: Number, reflect: true, }, - __disableIncrementor: { attribute: false }, - __disableDecrementor: { attribute: false }, }; } @@ -50,8 +48,6 @@ export class LionInputStepper extends LionInput { super(); /** @param {string} modelValue */ this.parser = modelValue => parseFloat(modelValue); - this.__disableIncrementor = false; - this.__disableDecrementor = false; this.min = Infinity; this.max = Infinity; this.step = 1; @@ -103,6 +99,15 @@ export class LionInputStepper extends LionInput { } } + // @ts-ignore + get slots() { + return { + ...super.slots, + prefix: () => this.__getButtonNode(), + suffix: () => this.__getButtonNode(true), + }; + } + /** * Set aria labels and apply validators * @private @@ -149,8 +154,12 @@ export class LionInputStepper extends LionInput { */ __toggleSpinnerButtonsState() { const { min, max } = this.values; - this.__disableIncrementor = this.currentValue >= max && max !== Infinity; - this.__disableDecrementor = this.currentValue <= min && min !== Infinity; + const decrementButton = this.__getSlot('prefix'); + const incrementButton = this.__getSlot('suffix'); + const disableIncrementor = this.currentValue >= max && max !== Infinity; + const disableDecrementor = this.currentValue <= min && min !== Infinity; + 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', { @@ -159,6 +168,19 @@ export class LionInputStepper extends LionInput { ); } + /** + * Get slotted element + * @param {String} slotName - slot name + * @returns {HTMLButtonElement|Object} + */ + __getSlot(slotName) { + return ( + /** @type {HTMLElement[]} */ (Array.from(this.children)).find( + child => child.slot === slotName, + ) || {} + ); + } + /** * Increment the value based on given step or default step value is 1 * @private @@ -185,6 +207,24 @@ export class LionInputStepper extends LionInput { } } + /** + * Get the button node + * @param {Boolean} isIncrement flag to differentiate the template + * @returns {Element|null} + */ + __getButtonNode(isIncrement = false) { + const renderParent = document.createElement('div'); + /** @type {typeof LionInputStepper} */ (this.constructor).render( + isIncrement ? this._incrementorTemplate() : this._decrementorTemplate(), + renderParent, + { + scopeName: this.localName, + eventContext: this, + }, + ); + return renderParent.firstElementChild; + } + /** * Toggle +/- buttons on change * @override @@ -194,15 +234,6 @@ export class LionInputStepper extends LionInput { this.__toggleSpinnerButtonsState(); } - /** - * Override after template to none - * @override - */ - // eslint-disable-next-line class-methods-use-this - _inputGroupAfterTemplate() { - return html``; - } - /** * Override before template to none * @override @@ -213,43 +244,58 @@ export class LionInputStepper extends LionInput { } /** - * Override prefix template for the increment button - * @override + * Get the decrementor button sign template + * @returns {String|import('lit-element').TemplateResult} */ // eslint-disable-next-line class-methods-use-this - _inputGroupPrefixTemplate() { + _decrementorSignTemplate() { + return '－'; + } + + /** + * Get the incrementor button sign template + * @returns {String|import('lit-element').TemplateResult} + */ + // eslint-disable-next-line class-methods-use-this + _incrementorSignTemplate() { + return '＋'; + } + + /** + * Get the increment button template + * @returns {import('lit-element').TemplateResult} + */ + _decrementorTemplate() { return html` `; } /** - * Override suffix template for the decrement button and add after slot - * @override + * Get the decrement button template + * @returns {import('lit-element').TemplateResult} */ - // eslint-disable-next-line class-methods-use-this - _inputGroupSuffixTemplate() { + _incrementorTemplate() { return html` - `; } } From 51670bd88138148b6676a31eb33f4069ca76fb18 Mon Sep 17 00:00:00 2001 From: Hardik Pithva Date: Mon, 26 Oct 2020 17:28:22 +0100 Subject: [PATCH 2/4] test(input-stepper): fix tests --- packages/input-stepper/test/lion-input-stepper.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/input-stepper/test/lion-input-stepper.test.js b/packages/input-stepper/test/lion-input-stepper.test.js index ec542dd9e..f50596975 100644 --- a/packages/input-stepper/test/lion-input-stepper.test.js +++ b/packages/input-stepper/test/lion-input-stepper.test.js @@ -24,7 +24,7 @@ describe('', () => { it('should increment the value to 1 on + button click', async () => { const el = await fixture(defaultInputStepper); expect(el.value).to.equal(''); - const incrementButton = el.shadowRoot?.querySelector('[name=increment]'); + const incrementButton = el.querySelector('[slot=suffix]'); incrementButton?.dispatchEvent(new Event('click')); expect(el.value).to.equal('1'); }); @@ -32,8 +32,8 @@ describe('', () => { it('should decrement the value to -1 on - button click', async () => { const el = await fixture(defaultInputStepper); expect(el.value).to.equal(''); - const incrementButton = el.shadowRoot?.querySelector('[name=decrement]'); - incrementButton?.dispatchEvent(new Event('click')); + const decrementButton = el.querySelector('[slot=prefix]'); + decrementButton?.dispatchEvent(new Event('click')); expect(el.value).to.equal('-1'); }); @@ -66,7 +66,7 @@ describe('', () => { it('updates aria-valuenow when stepper is changed', async () => { const el = await fixture(inputStepperWithAttrs); - const incrementButton = el.shadowRoot?.querySelector('[name=increment]'); + const incrementButton = el.querySelector('[slot=suffix]'); incrementButton?.dispatchEvent(new Event('click')); expect(el).to.have.attribute('aria-valuenow', '1'); }); From 51d2f4d28ab11363bd24bf22e55eff33b7393adb Mon Sep 17 00:00:00 2001 From: Hardik Pithva Date: Tue, 27 Oct 2020 09:59:46 +0100 Subject: [PATCH 3/4] chore(input-stepper): remove name attr and improvements --- .changeset/silent-steaks-marry.md | 5 ++++ .../input-stepper/src/LionInputStepper.js | 30 ++++++++++++++----- 2 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 .changeset/silent-steaks-marry.md diff --git a/.changeset/silent-steaks-marry.md b/.changeset/silent-steaks-marry.md new file mode 100644 index 000000000..51041d07c --- /dev/null +++ b/.changeset/silent-steaks-marry.md @@ -0,0 +1,5 @@ +--- +'@lion/input-stepper': patch +--- + +fix(input-stepper): make use of prefix and suffix slots diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index 918222363..732947e66 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -103,8 +103,8 @@ export class LionInputStepper extends LionInput { get slots() { return { ...super.slots, - prefix: () => this.__getButtonNode(), - suffix: () => this.__getButtonNode(true), + prefix: () => this.__getDecrementButtonNode(), + suffix: () => this.__getIncrementButtonNode(), }; } @@ -208,14 +208,30 @@ export class LionInputStepper extends LionInput { } /** - * Get the button node - * @param {Boolean} isIncrement flag to differentiate the template + * Get the increment button node * @returns {Element|null} */ - __getButtonNode(isIncrement = false) { + __getIncrementButtonNode() { const renderParent = document.createElement('div'); /** @type {typeof LionInputStepper} */ (this.constructor).render( - isIncrement ? this._incrementorTemplate() : this._decrementorTemplate(), + this._incrementorTemplate(), + renderParent, + { + scopeName: this.localName, + eventContext: this, + }, + ); + return renderParent.firstElementChild; + } + + /** + * Get the decrement button node + * @returns {Element|null} + */ + __getDecrementButtonNode() { + const renderParent = document.createElement('div'); + /** @type {typeof LionInputStepper} */ (this.constructor).render( + this._decrementorTemplate(), renderParent, { scopeName: this.localName, @@ -271,7 +287,6 @@ export class LionInputStepper extends LionInput { ?disabled=${this.disabled || this.readOnly} @click=${this.__decrement} tabindex="-1" - name="decrement" type="button" aria-label="decrement" > @@ -290,7 +305,6 @@ export class LionInputStepper extends LionInput { ?disabled=${this.disabled || this.readOnly} @click=${this.__increment} tabindex="-1" - name="increment" type="button" aria-label="increment" > From 74ed74964a2e55f6e6eb8ed0507442eb409d0c42 Mon Sep 17 00:00:00 2001 From: Hardik Pithva Date: Wed, 28 Oct 2020 13:27:51 +0100 Subject: [PATCH 4/4] fix(input-stepper): allow before slot --- packages/input-stepper/src/LionInputStepper.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index 732947e66..77108869b 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -250,15 +250,6 @@ export class LionInputStepper extends LionInput { this.__toggleSpinnerButtonsState(); } - /** - * Override before template to none - * @override - */ - // eslint-disable-next-line class-methods-use-this - _inputGroupBeforeTemplate() { - return html``; - } - /** * Get the decrementor button sign template * @returns {String|import('lit-element').TemplateResult}