Ability to show textfield spinner on hover and focus

Author: tatianau

.changeset/gold-deers-tan.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `stepperShownOnInteraction` prop to `TextField` to support hiding the stepper arrows for inputs of type "number" by default and revealing them on hover and focus

polaris-react/src/components/TextField/TextField.stories.tsx

@@ -587,3 +587,20 @@ export function WithInlineSuggestion() {
     </div>
   );
 }
+
+export function WithStepperShownOnIneraction() {
+  const [value, setValue] = useState('1');
+
+  const handleChange = useCallback((newValue) => setValue(newValue), []);
+
+  return (
+    <TextField
+      label="Quantity"
+      type="number"
+      value={value}
+      onChange={handleChange}
+      autoComplete="off"
+      stepperShownOnInteraction
+    />
+  );
+}

polaris-react/src/components/TextField/TextField.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import {CircleCancelMinor} from '@shopify/polaris-icons';
 
+import {useToggle} from '../../utilities/use-toggle';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {useUniqueId} from '../../utilities/unique-id';
@@ -118,6 +119,8 @@ interface NonMutuallyExclusiveProps {
   role?: string;
   /** Limit increment value for numeric and date-time inputs */
   step?: number;
+  /** Hide stepper by default, reveal on hover and focus */
+  stepperShownOnInteraction?: boolean;
   /** Enable automatic completion by the browser. Set to "off" when you do not want the browser to fill in info */
   autoComplete: string;
   /** Mimics the behavior of the native HTML attribute, limiting the maximum value */
@@ -201,6 +204,7 @@ export function TextField({
   id: idProp,
   role,
   step,
+  stepperShownOnInteraction,
   autoComplete,
   max,
   maxLength,
@@ -230,6 +234,11 @@ export function TextField({
   const [height, setHeight] = useState<number | null>(null);
   const [focus, setFocus] = useState(Boolean(focused));
   const isAfterInitial = useIsAfterInitialMount();
+  const {
+    value: mouseEnter,
+    setTrue: handleMouseEnter,
+    setFalse: handleMouseLeave,
+  } = useToggle(false);
 
   const id = useUniqueId('TextField', idProp);
 
@@ -267,6 +276,7 @@ export function TextField({
   const normalizedStep = step != null ? step : 1;
   const normalizedMax = max != null ? max : Infinity;
   const normalizedMin = min != null ? min : -Infinity;
+  const spinnerHidden = stepperShownOnInteraction && !focus && !mouseEnter;
 
   const className = classNames(
     styles.TextField,
@@ -400,7 +410,11 @@ export function TextField({
   );
 
   const spinnerMarkup =
-    type === 'number' && step !== 0 && !disabled && !readOnly ? (
+    type === 'number' &&
+    step !== 0 &&
+    !disabled &&
+    !readOnly &&
+    !spinnerHidden ? (
       <Spinner
         onClick={handleClickChild}
         onChange={handleNumberChange}
@@ -554,7 +568,16 @@ export function TextField({
       requiredIndicator={requiredIndicator}
     >
       <Connected left={connectedLeft} right={connectedRight}>
-        <div className={className} onClick={handleClick}>
+        <div
+          className={className}
+          onClick={handleClick}
+          onMouseEnter={
+            stepperShownOnInteraction ? handleMouseEnter : undefined
+          }
+          onMouseLeave={
+            stepperShownOnInteraction ? handleMouseLeave : undefined
+          }
+        >
           {prefixMarkup}
           {inputMarkup}
           {suffixMarkup}

polaris-react/src/components/TextField/tests/TextField.test.tsx

@@ -1116,6 +1116,99 @@ describe('<TextField />', () => {
           expect(spy).not.toHaveBeenCalled();
         });
       });
+
+      describe('stepperShownOnInteraction', () => {
+        it('does not render spinner by default when input is not interacted with', () => {
+          const element = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="number"
+              value="3"
+              autoComplete="off"
+              stepperShownOnInteraction
+            />,
+          );
+
+          expect(element).not.toContainReactComponent(Spinner);
+        });
+
+        it('renders spinner when input is focused', () => {
+          const element = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="number"
+              value="3"
+              autoComplete="off"
+              stepperShownOnInteraction
+            />,
+          );
+
+          element!.find('input')!.trigger('onFocus');
+
+          expect(element).toContainReactComponent(Spinner);
+        });
+
+        it('does not render spinner when input is blurred', () => {
+          const element = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="number"
+              value="3"
+              autoComplete="off"
+              stepperShownOnInteraction
+            />,
+          );
+
+          element!.find('input')!.trigger('onFocus');
+          element!.find('input')!.trigger('onBlur');
+
+          expect(element).not.toContainReactComponent(Spinner);
+        });
+
+        it('renders spinner when `mouseenter` event is triggered', () => {
+          const element = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="number"
+              value="3"
+              autoComplete="off"
+              stepperShownOnInteraction
+            />,
+          );
+
+          element
+            .find(Connected)!
+            .triggerKeypath('children.props.onMouseEnter', {});
+
+          expect(element).toContainReactComponent(Spinner);
+        });
+
+        it('does not render spinner when `mouseleave` event is triggered', () => {
+          const element = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="number"
+              value="3"
+              autoComplete="off"
+              stepperShownOnInteraction
+            />,
+          );
+
+          element
+            .find(Connected)!
+            .triggerKeypath('children.props.onMouseEnter', {});
+          element
+            .find(Connected)!
+            .triggerKeypath('children.props.onMouseLeave', {});
+
+          expect(element).not.toContainReactComponent(Spinner);
+        });
+      });
     });
   });
 

polaris.shopify.com/content/components/selection-and-input/text-field.md

@@ -215,6 +215,7 @@ Text fields have standard keyboard support.
 
 - Merchants who rely on the keyboard expect to move focus to each text field using the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)
 - If the `type` is set to `number`, then merchants can use the up and down arrow keys to adjust the value typed into the field
+- Using the `stepperShownOnInteraction` prop if the `type` is set to `number` allows to hide the stepper arrows by default and show them when the field is interacted with to mimic the default browser behaviour
 - Using the `disabled` prop will prevent the text field from receive keyboard focus or inputs
 - The `readOnly` prop allows focus on the text field but prevents input or editing
 - The `inputMode` prop can be used to bring up a relevant keyboard for merchants on mobile; it’s passed down to the input as an [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)