From 3c6e55006b3a7bad0d7fa782fab3141e1961e686 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Thu, 4 Jan 2024 13:27:36 -0800
Subject: [PATCH] feat(textfield): add `no-spinner` to remove number spin
 buttons

PiperOrigin-RevId: 595788647
---
 textfield/internal/_input.scss   | 12 ++++++++++++
 textfield/internal/text-field.ts |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/textfield/internal/_input.scss b/textfield/internal/_input.scss
index 743be802c..023afb0d3 100644
--- a/textfield/internal/_input.scss
+++ b/textfield/internal/_input.scss
@@ -43,6 +43,18 @@
     }
   }
 
+  // Optionally remove number input's spinner
+  .no-spinner .input {
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      display: none;
+    }
+
+    &[type='number'] {
+      -moz-appearance: textfield;
+    }
+  }
+
   :focus-within .input {
     caret-color: var(--_focus-caret-color);
   }
diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
index fcb9ef131..19ee58a8d 100644
--- a/textfield/internal/text-field.ts
+++ b/textfield/internal/text-field.ts
@@ -226,6 +226,11 @@ export abstract class TextField extends textFieldBaseClass {
    */
   @property({type: Number}) minLength = -1;
 
+  /**
+   * When true, hide the spinner for `type="number"` text fields.
+   */
+  @property({type: Boolean, attribute: 'no-spinner'}) noSpinner = false;
+
   /**
    * A regular expression that the text field's value must match to pass
    * constraint validation.
@@ -514,6 +519,7 @@ export abstract class TextField extends textFieldBaseClass {
       'disabled': this.disabled,
       'error': !this.disabled && this.hasError,
       'textarea': this.type === 'textarea',
+      'no-spinner': this.noSpinner,
     };
 
     return html`