From 9467a52e45580ec11b086f2b25889ed4c3d842fb Mon Sep 17 00:00:00 2001
From: palash2601 <palash2601@gmail.com>
Date: Wed, 15 Apr 2020 13:29:29 +0200
Subject: [PATCH] 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`
-      <slot name="after"></slot>
+      ${!this.singleOption
+        ? html`
+            <slot name="after"></slot>
+          `
+        : ''}
     `;
   }
 }
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
+
+<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
 
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;
     });
   });