From 9467a52e45580ec11b086f2b25889ed4c3d842fb Mon Sep 17 00:00:00 2001 From: palash2601 Date: Wed, 15 Apr 2020 13:29:29 +0200 Subject: [PATCH 1/2] chore(select-rich): docs for single-option and fix review comments --- packages/select-rich/src/LionSelectInvoker.js | 8 +++++-- packages/select-rich/src/LionSelectRich.js | 9 ++++---- .../select-rich/stories/index.stories.mdx | 22 +++++++++++++++++++ .../select-rich/test/lion-select-rich.test.js | 2 +- 4 files changed, 34 insertions(+), 7 deletions(-) diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js index aec171e1c..8dcbbe54f 100644 --- a/packages/select-rich/src/LionSelectInvoker.js +++ b/packages/select-rich/src/LionSelectInvoker.js @@ -43,7 +43,7 @@ export class LionSelectInvoker extends LionButton { singleOption: { type: Boolean, reflect: true, - attribute: 'singleOption', + attribute: 'single-option', }, }; } @@ -99,7 +99,11 @@ export class LionSelectInvoker extends LionButton { // eslint-disable-next-line class-methods-use-this _afterTemplate() { return html` - + ${!this.singleOption + ? html` + + ` + : ''} `; } } diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index 32050f404..b6bf62456 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -219,10 +219,6 @@ export class LionSelectRich extends ScopedElementsMixin( firstUpdated(changedProperties) { super.firstUpdated(changedProperties); - if (this._listboxNode.childElementCount === 1) { - this.singleOption = true; - this._invokerNode.singleOption = true; - } this._overlaySetupComplete.then(() => { this.__setupOverlay(); @@ -281,6 +277,11 @@ export class LionSelectRich extends ScopedElementsMixin( updated(changedProperties) { super.updated(changedProperties); + if (this.formElements.length === 1) { + this.singleOption = true; + this._invokerNode.singleOption = true; + } + if (changedProperties.has('disabled')) { if (this.disabled) { this._invokerNode.makeRequestToBeDisabled(); diff --git a/packages/select-rich/stories/index.stories.mdx b/packages/select-rich/stories/index.stories.mdx index 46b94bc4b..e98c62883 100644 --- a/packages/select-rich/stories/index.stories.mdx +++ b/packages/select-rich/stories/index.stories.mdx @@ -506,6 +506,28 @@ Both methods work with the `Required` validator. > but subclassers can easily override this in their extension, by the overriding `_noSelectionTemplate()` method. +### Single Option + +If there is a single option rendered, then `singleOption` property is set to `true` on `lion-select-rich` and invoker as well. Invoker also gets `single-option` which can be used to having desired templating and styling. As in here the arrow is not displayed for single option + + + {html` + + + Red + + + `} + + +```html + + + Red + + +``` + ### Custom Invoker diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index 185cec565..dd04cca8e 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -285,7 +285,7 @@ describe('lion-select-rich', () => { `); expect(el.singleOption).to.be.true; - expect(el._invokerNode.hasAttribute('singleOption')).to.be.true; + expect(el._invokerNode.hasAttribute('single-option')).to.be.true; }); }); From ab12f2768baaeefe6022501675a4d85b026e75a6 Mon Sep 17 00:00:00 2001 From: palash2601 Date: Thu, 16 Apr 2020 13:46:52 +0200 Subject: [PATCH 2/2] chore(select-rich): added tests --- .../test/lion-select-invoker.test.js | 16 +++++++++++++ .../select-rich/test/lion-select-rich.test.js | 23 +++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/packages/select-rich/test/lion-select-invoker.test.js b/packages/select-rich/test/lion-select-invoker.test.js index 526470252..4f1df75f4 100644 --- a/packages/select-rich/test/lion-select-invoker.test.js +++ b/packages/select-rich/test/lion-select-invoker.test.js @@ -48,6 +48,22 @@ describe('lion-select-invoker', () => { expect(el.getAttribute('tabindex')).to.equal('0'); }); + it('should not render after slot when singleOption is true', async () => { + const el = await fixture(html` + + `); + + expect(el.shadowRoot.querySelector('slot[name="after"]')).to.not.exist; + }); + + it('should render after slot when singleOption is not true', async () => { + const el = await fixture(html` + + `); + + expect(el.shadowRoot.querySelector('slot[name="after"]')).to.exist; + }); + describe('Subclassers', () => { it('supports a custom _contentTemplate', async () => { const myTag = defineCE( diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index dd04cca8e..b6e14a2b9 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -429,6 +429,29 @@ describe('lion-select-rich', () => { expect(el._overlayCtrl.inheritsReferenceWidth).to.equal('full'); }); + + it('should set singleOption to true when options change dynamically to 1 option', async () => { + const elSingleoption = await fixture(html` + + + Item 1 + Item 2 + + + `); + + elSingleoption._invokerNode.click(); + await elSingleoption.updateComplete; + expect(elSingleoption.singleOption).to.be.undefined; + + const optionELm = elSingleoption.querySelectorAll('lion-option')[0]; + optionELm.parentNode.removeChild(optionELm); + elSingleoption.requestUpdate(); + + elSingleoption._invokerNode.click(); + await elSingleoption.updateComplete; + expect(elSingleoption.singleOption).to.be.true; + }); }); describe('interaction-mode', () => {