From 51d2f4d28ab11363bd24bf22e55eff33b7393adb Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Tue, 27 Oct 2020 09:59:46 +0100
Subject: [PATCH] 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"
       >