From bc3a6ae824408674325ccfcdb5ac98913b88b6c2 Mon Sep 17 00:00:00 2001
From: Sophia Dengo <sdengo@gmail.com>
Date: Fri, 14 Dec 2018 09:45:06 -0500
Subject: [PATCH] =?UTF-8?q?removed=20up/down=20arrows=20from=20datefield?=
 =?UTF-8?q?=20via=20css;=20scroll=20capability=20stil=E2=80=A6=20(#296)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* removed up/down arrows from datefield via css; scroll capability still works

* upon review move code into a more logical file

* Fixed linter complains about vendor prefixes, single quotes, and a qualifying selector for the input element. Also added a number input to the TextField example for easy checking across browsers
---
 packages/core/src/components/DateField/DateField.scss  |  1 +
 .../src/components/TextField/TextField.example.jsx     |  6 ++++++
 packages/core/src/components/TextField/TextField.scss  | 10 +++++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/DateField/DateField.scss b/packages/core/src/components/DateField/DateField.scss
index f7d547d778..0c04b7352d 100644
--- a/packages/core/src/components/DateField/DateField.scss
+++ b/packages/core/src/components/DateField/DateField.scss
@@ -33,6 +33,7 @@ Markup:
 
 Style guide: components.date-field
 */
+
 .ds-c-field--month,
 .ds-c-field--day,
 .ds-c-field--year {
diff --git a/packages/core/src/components/TextField/TextField.example.jsx b/packages/core/src/components/TextField/TextField.example.jsx
index b189a06d1f..7b17065cae 100644
--- a/packages/core/src/components/TextField/TextField.example.jsx
+++ b/packages/core/src/components/TextField/TextField.example.jsx
@@ -11,6 +11,12 @@ ReactDOM.render(
       name="single_example"
       requirementLabel="Optional"
     />
+    <TextField
+      defaultValue="123"
+      label="Number field"
+      name="number_example"
+      type="number"
+    />
     <TextField label="Small size modifier" name="small_example" size="small" />
     <TextField
       label="Medium size modifier"
diff --git a/packages/core/src/components/TextField/TextField.scss b/packages/core/src/components/TextField/TextField.scss
index 4c18026eb3..5639665824 100644
--- a/packages/core/src/components/TextField/TextField.scss
+++ b/packages/core/src/components/TextField/TextField.scss
@@ -41,7 +41,6 @@ Markup:
 Style guide: components.text-field
 */
 
-// input, textarea, select
 .ds-c-field {
   appearance: none;
   border: $input-border-width solid $input-border-color;
@@ -63,6 +62,15 @@ Style guide: components.text-field
   &:focus {
     box-shadow: $focus-shadow;
   }
+
+  &[type='number'] {
+    appearance: textfield;
+
+    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
 }
 
 .ds-c-field--small {