Merge pull request #682 from palash2601/fix/select-rich-singleoption-review

chore(select-rich): docs for single-option and fix review comments

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`
-      <slot name="after"></slot>
+      ${!this.singleOption
+        ? html`
+            <slot name="after"></slot>
+          `
+        : ''}
     `;
   }
 }

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();

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
+
+<Story name="Single Option">
+  {html`
+    <lion-select-rich label="Single Option" name="color">
+      <lion-options slot="input">
+        <lion-option .choiceValue=${'red'}>Red</lion-option>
+      </lion-options>
+    </lion-select-rich>
+  `}
+</Story>
+
+```html
+<lion-select-rich label="single option select" name="color">
+  <lion-options slot="input">
+    <lion-option .choiceValue=${'red'}>Red</lion-option>
+  </lion-options>
+</lion-select-rich>
+```
+
 
 ### Custom Invoker
 

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`
+      <lion-select-invoker .singleOption="${true}"></lion-select-invoker>
+    `);
+
+    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`
+      <lion-select-invoker></lion-select-invoker>
+    `);
+
+    expect(el.shadowRoot.querySelector('slot[name="after"]')).to.exist;
+  });
+
   describe('Subclassers', () => {
     it('supports a custom _contentTemplate', async () => {
       const myTag = defineCE(

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;
     });
   });
 
@@ -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`
+        <lion-select-rich>
+          <lion-options slot="input">
+            <lion-option .choiceValue=${10}>Item 1</lion-option>
+            <lion-option .choiceValue=${20}>Item 2</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      `);
+
+      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', () => {