removed up/down arrows from datefield via css; scroll capability stil… (

#296) * 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
CMSgov · Dec 14, 2018 · bc3a6ae · bc3a6ae
1 parent a55e987
commit bc3a6ae
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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 {