fix(components): update number input styles for focus and hover (#10043)

joshblack · kodiakhq[bot] · web-flow · commit b0a79ab56cf9 · 2021-11-04T18:54:11.000Z
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
@@ -371,9 +371,13 @@
     background-color: transparent;
   }
 
+  // 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:hover::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::before,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::after {
     background-color: $hover-light-ui;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -371,9 +371,13 @@`
`371`	`371`	`background-color: transparent;`
`372`	`372`	`}`
`373`	`373`
	`374`	+ // We include `:not(:focus)` here because the pseudo elements will overlap the
	`375`	`+ // focus outline on the button if we set their background-color on focus`
`374`	`376`	`.#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,`
`375`		`- .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,`
`376`		`- .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {`
	`377`	`+ .#{$prefix}--number--light`
	`378`	`+ .#{$prefix}--number__control-btn:not(:focus):hover::before,`
	`379`	`+ .#{$prefix}--number--light`
	`380`	`+ .#{$prefix}--number__control-btn:not(:focus):hover::after {`
`377`	`381`	`background-color: $hover-light-ui;`
`378`	`382`	`}`
`379`	`383`