From 706020ce5c6e9b7cee20d7451ff26f19c91d6f4b Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Mon, 14 Feb 2022 17:01:46 -0600
Subject: [PATCH] fix(styles): add missing v10 styles to number input (#10706)

* fix: v11 audit styles

* fix: v10 type style

* fix: firefox z-index
---
 .../number-input/_number-input.scss           |  2 +-
 .../number-input/_number-input.scss           | 47 ++++++++++++-------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
index 4c5032ecee7a..aea9652f877a 100644
--- a/packages/components/src/components/number-input/_number-input.scss
+++ b/packages/components/src/components/number-input/_number-input.scss
@@ -26,7 +26,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('body-short-01');
+    @include type-style('code-01');
     @include focus-outline('reset');
 
     display: inline-flex;
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index c273d8ceb69d..1987a349cde8 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -16,6 +16,7 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Number input styles
 /// @access public
@@ -31,7 +32,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('body-short-01');
+    @include type-style('code-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -88,8 +89,7 @@
     padding-right: rem(112px);
   }
 
-  .#{$prefix}--number input[type='number']:disabled,
-  .#{$prefix}--number--readonly input[type='number'] {
+  .#{$prefix}--number input[type='number']:disabled {
     border-bottom-color: transparent;
     background-color: $field;
     color: $text-disabled;
@@ -301,10 +301,6 @@
     background-color: transparent;
   }
 
-  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
-    display: none;
-  }
-
   .#{$prefix}--number__invalid {
     position: absolute;
     right: rem(96px);
@@ -368,10 +364,7 @@
   }
 
   // V11: Possibly deprecate
-  .#{$prefix}--number--light input[type='number']:disabled,
-  .#{$prefix}--number--light
-    .#{$prefix}--number--readonly
-    input[type='number'] {
+  .#{$prefix}--number--light input[type='number']:disabled {
     background-color: $field-02;
   }
 
@@ -381,18 +374,22 @@
     background-color: $field-02;
   }
 
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
-    background-color: $layer-hover-02;
-  }
-
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
     background-color: transparent;
   }
 
+  // V11: Possibly deprecate
+  // We include `:not(:focus)` here because the pseudo elements will overlap the
+  // focus outline on the button if we set their background-color on focus
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::before,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::after {
+    background-color: $layer-hover-02;
+  }
+
   // Size Variant styles
   // TODO V11: Remove xl selector
   .#{$prefix}--number--xl input[type='number'],
@@ -452,6 +449,20 @@
     right: rem(16px);
   }
 
+  // Readonly
+  .#{$prefix}--number--readonly input[type='number'] {
+    background: transparent;
+  }
+
+  .#{$prefix}--number--readonly .#{$prefix}--number__controls {
+    display: none;
+  }
+
+  .#{$prefix}--number__readonly-icon {
+    position: absolute;
+    right: rem(16px);
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;