NumberField fixes (#1509)

* Fix double border between input and buttons

* Fix disabled focus and hover states for stepper buttons

* Update stepper disabled state as you type

* Adjust behavior of step to match slider and native number input

* Allow incrementing/decrementing values that are near the min/max step value

* Replace "spin button number field" with just "number field"

* Improve focus behavior for stepper buttons

* Fix forward delete of plusSign

* Fix typing minus sign in some locales

* making focused invalid numberfield stay red

* Fix issue where we couldn't type a negative number

* giving proper padding right to valid/invalid/loadable quiet textfields

moved the styles so they are more specific than the isQuiet padding right styles

* fixing numberfield quiet mobile stepper button active styles

* Implement fallback support for reverting invalid composition events

For browsers that don't support input events level 2

* Fix typing symbols from non-default numbering systems

e.g. latin decimal point in arabic

* Support normal negative numbers in accounting format

* Remove horizontal scrolling as an incr/decr method

* fix react 17

* Make active state go around full component rather than just input on touch

* Set inputMode according to the OS

* Fix sign display polyfill with number parser in Safari

* Numberfield fixes: remove aria-roledescription on iOS and replace hyphen with minus sign (#1517)

* Slight cleanup and add comment about minus sign

Co-authored-by: Rob Snow <[email protected]>
Co-authored-by: Daniel <[email protected]>
Co-authored-by: Michael Jordan <[email protected]>

Author: 4 people

packages/@adobe/spectrum-css-temp/components/stepper/index.css

@@ -103,6 +103,10 @@ governing permissions and limitations under the License.
     border-end-end-radius: var(--spectrum-stepper-border-radius-reset);
   }
 
+  .spectrum-Stepper-button {
+    border-inline-start-style: none;
+  }
+
   &.spectrum-Stepper--isMobile {
     grid-template-rows: auto;
     grid-template-columns: auto 1fr auto;
@@ -114,8 +118,7 @@ governing permissions and limitations under the License.
       border-end-start-radius: var(--spectrum-stepper-border-radius-reset);
       border-end-end-radius: var(--spectrum-stepper-border-radius-reset);
     }
-    .spectrum-Stepper-button--stepUp,
-    .spectrum-Stepper-button--stepDown {
+    .spectrum-Stepper-button {
       block-size: var(--spectrum-textfield-height);
       inline-size: var(--spectrum-actionbutton-min-width);
       border-block-start-style: solid;
@@ -128,6 +131,8 @@ governing permissions and limitations under the License.
       border-end-end-radius: var(--spectrum-border-radius);
     }
     .spectrum-Stepper-button--stepDown {
+      border-inline-start-style: solid;
+      border-inline-end-style: none;
       border-start-start-radius: var(--spectrum-border-radius);
       border-start-end-radius: var(--spectrum-stepper-border-radius-reset);
       border-end-start-radius: var(--spectrum-border-radius);

packages/@adobe/spectrum-css-temp/components/stepper/skin.css

@@ -48,16 +48,6 @@ governing permissions and limitations under the License.
     }
   }
 }
-.spectrum-Stepper.spectrum-Stepper--isHovered {
-  .spectrum-Stepper-button {
-    border-color: var(--spectrum-actionbutton-border-color-hover);
-
-    &:disabled,
-    &.is-disabled {
-      border-color: var(--spectrum-textfield-border-color-disabled);
-    }
-  }
-}
 
 .spectrum-Stepper-button.spectrum-Stepper-button--isQuiet {
   background-color: unset;
@@ -69,14 +59,23 @@ governing permissions and limitations under the License.
 .spectrum-Stepper {
   .spectrum-Stepper-button {
     border-color: var(--spectrum-textfield-border-color);
+  }
+
+  &.is-hovered {
+    .spectrum-Stepper-button {
+      border-color: var(--spectrum-actionbutton-border-color-hover);
+    }
+  }
 
+  .spectrum-Stepper-button {
     &:disabled,
     &.is-disabled {
       border-color: var(--spectrum-textfield-border-color-disabled);
     }
   }
 
-  &:focus {
+  &:focus,
+  &:active {
     .spectrum-Stepper-button {
       border-color: var(--spectrum-textfield-border-color-key-focus);
     }
@@ -106,6 +105,10 @@ governing permissions and limitations under the License.
       border-color: var(--spectrum-textfield-border-color-key-focus);
     }
 
+    .spectrum-Stepper-input {
+      border-color: var(--spectrum-textfield-border-color-key-focus);
+    }
+
     &.focus-ring {
       &:invalid,
       &.is-invalid {
@@ -118,6 +121,10 @@ governing permissions and limitations under the License.
       .spectrum-Stepper-button {
         border-color: var(--spectrum-textfield-border-color-error);
       }
+
+      .spectrum-Stepper-input {
+        border-color: var(--spectrum-textfield-border-color-error);
+      }
     }
   }
 
@@ -226,6 +233,15 @@ governing permissions and limitations under the License.
       &.is-disabled {
         border-color: var(--spectrum-textfield-quiet-border-color-disabled);
       }
+
+      &.is-active {
+        border-color: var(--spectrum-actionbutton-border-color-hover);
+        color: var(--spectrum-actionbutton-text-color-hover);
+
+        .spectrum-Stepper-icon {
+          fill: var(--spectrum-actionbutton-icon-color-hover);
+        }
+      }
     }
 
     &:focus {

packages/@adobe/spectrum-css-temp/components/textfield/index.css

@@ -155,18 +155,6 @@ governing permissions and limitations under the License.
     box-shadow: none;
   }
 
-  .spectrum-Textfield--valid & {
-    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left));
-  }
-
-  .spectrum-Textfield--invalid & {
-    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));
-  }
-
-  .spectrum-Textfield--loadable & {
-    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));
-  }
-
   .spectrum-Textfield--multiline & {
     height: var(--spectrum-textfield-multiline-height);
     min-height: var(--spectrum-textfield-multiline-min-height);
@@ -188,6 +176,18 @@ governing permissions and limitations under the License.
     resize: none;
     overflow-y: hidden;
   }
+
+  .spectrum-Textfield--valid & {
+    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left));
+  }
+
+  .spectrum-Textfield--invalid & {
+    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));
+  }
+
+  .spectrum-Textfield--loadable & {
+    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));
+  }
 }
 
 .spectrum-Textfield-validationIcon {

packages/@react-aria/button/src/useButton.ts

@@ -54,6 +54,8 @@ export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<an
     onPressStart,
     onPressEnd,
     onPressChange,
+    // @ts-ignore - undocumented
+    preventFocusOnPress,
     // @ts-ignore
     onClick: deprecatedOnClick,
     href,
@@ -81,6 +83,7 @@ export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<an
     onPressChange,
     onPress,
     isDisabled,
+    preventFocusOnPress,
     ref
   });
 
@@ -90,14 +93,13 @@ export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<an
 
   return {
     isPressed, // Used to indicate press state for visual
-    buttonProps: mergeProps(buttonProps, {
+    buttonProps: mergeProps(additionalProps, buttonProps, {
       'aria-haspopup': props['aria-haspopup'],
       'aria-expanded': props['aria-expanded'],
       'aria-controls': props['aria-controls'],
       'aria-pressed': props['aria-pressed'],
       disabled: isDisabled,
       type,
-      ...(additionalProps || {}),
       onClick: (e) => {
         if (deprecatedOnClick) {
           deprecatedOnClick(e);

packages/@react-aria/numberfield/intl/ar-AE.json

@@ -1,6 +1,5 @@
 {
   "Decrement": "نقصان",
-  "Enter a number": "أدخل رقماً",
   "Increment": "زيادة",
-  "Spin button number field": "Spin button number field"
+  "Number field": "Number field"
 }

packages/@react-aria/numberfield/intl/bg-BG.json

@@ -1,6 +1,5 @@
 {
   "Decrement": "Стъпка на намаление",
-  "Enter a number": "Въведете число",
   "Increment": "Стъпка на увеличение",
-  "Spin button number field": "Spin button number field"
+  "Number field": "Number field"
 }

packages/@react-aria/numberfield/intl/cs-CZ.json

@@ -1,6 +1,5 @@
 {
   "Decrement": "Snížení",
-  "Enter a number": "Zadejte číslo",
   "Increment": "Zvýšení",
-  "Spin button number field": "Spin button number field"
+  "Number field": "Number field"
 }

packages/@react-aria/numberfield/intl/da-DK.json

@@ -1,6 +1,5 @@
 {
   "Decrement": "Reduktion",
-  "Enter a number": "Skriv et tal",
   "Increment": "Forøgelse",
-  "Spin button number field": "Spin button number field"
+  "Number field": "Number field"
 }

packages/@react-aria/numberfield/intl/de-DE.json

@@ -1,6 +1,5 @@
 {
   "Decrement": "Verringern",
-  "Enter a number": "Zahl eingeben",
   "Increment": "Erhöhen",
-  "Spin button number field": "Spin button number field"
+  "Number field": "Number field"
 }

packages/@react-aria/numberfield/intl/el-GR.json

@@ -1,6 +1,5 @@
 {
   "Decrement": "Μείωση",
-  "Enter a number": "Εισαγωγή αριθμού",
   "Increment": "Προσαύξηση",
-  "Spin button number field": "Spin button number field"
+  "Number field": "Number field"
 }