From 3dfb391a7363ffdae24b972c6a6b128db5e79210 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 19 Mar 2021 05:28:40 -0700
Subject: [PATCH] fix(number-input): use add, subtract icons and update markup

---
 src/NumberInput/NumberInput.svelte | 44 +++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 34b51761..fd65e743 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -101,8 +101,8 @@
   export let ref = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
-  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
-  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
+  import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
@@ -187,7 +187,7 @@
           }}"
           disabled="{disabled}"
         >
-          <CaretDownGlyph class="down-icon" />
+          <Subtract16 class="down-icon" />
         </button>
         <input
           bind:this="{ref}"
@@ -221,7 +221,7 @@
           }}"
           disabled="{disabled}"
         >
-          <CaretUpGlyph class="up-icon" />
+          <Add16 class="up-icon" />
         </button>
       </div>
     {:else}
@@ -271,23 +271,7 @@
         <div class:bx--number__controls="{true}">
           <button
             type="button"
-            aria-live="polite"
-            aria-atomic="true"
-            title="{incrementLabel || iconDescription}"
-            aria-label="{incrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:up-icon="{true}"
-            on:click="{() => {
-              updateValue(1);
-            }}"
-            disabled="{disabled}"
-          >
-            <CaretUpGlyph class="up-icon" />
-          </button>
-          <button
-            type="button"
-            aria-live="polite"
-            aria-atomic="true"
+            tabindex="-1"
             title="{decrementLabel || iconDescription}"
             aria-label="{decrementLabel || iconDescription}"
             class:bx--number__control-btn="{true}"
@@ -297,8 +281,24 @@
             }}"
             disabled="{disabled}"
           >
-            <CaretDownGlyph class="down-icon" />
+            <Subtract16 class="down-icon" />
           </button>
+          <div class:bx--number__rule-divider="{true}"></div>
+          <button
+            type="button"
+            tabindex="-1"
+            title="{incrementLabel || iconDescription}"
+            aria-label="{incrementLabel || iconDescription}"
+            class:bx--number__control-btn="{true}"
+            class:up-icon="{true}"
+            on:click="{() => {
+              updateValue(1);
+            }}"
+            disabled="{disabled}"
+          >
+            <Add16 class="up-icon" />
+          </button>
+          <div class:bx--number__rule-divider="{true}"></div>
         </div>
       </div>
     {/if}