PR feedback: make hiding the stepper a default behaviour with CSS

Author: tatianau

.changeset/gold-deers-tan.md

@@ -2,4 +2,4 @@
 '@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
+Made hiding the stepper arrows for inputs of type "number" and revealing them on hover and focus the default `TextField` behaviour to mimic the default browser experience

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

@@ -302,11 +302,17 @@ $spinner-icon-size: 12px;
   color: var(--p-icon);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
+  visibility: hidden;
   align-self: stretch;
   flex-direction: column;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 22px;
   cursor: pointer;
+
+  .focus &,
+  .TextField:hover & {
+    visibility: visible;
+  }
 }
 
 .SpinnerIcon {

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

@@ -587,20 +587,3 @@ export function WithInlineSuggestion() {
     </div>
   );
 }
-
-export function WithStepperShownOnInteraction() {
-  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,7 +7,6 @@ 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';
@@ -119,8 +118,6 @@ 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 */
@@ -204,7 +201,6 @@ export function TextField({
   id: idProp,
   role,
   step,
-  stepperShownOnInteraction,
   autoComplete,
   max,
   maxLength,
@@ -234,11 +230,6 @@ 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);
 
@@ -276,7 +267,6 @@ 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,
@@ -410,11 +400,7 @@ export function TextField({
   );
 
   const spinnerMarkup =
-    type === 'number' &&
-    step !== 0 &&
-    !disabled &&
-    !readOnly &&
-    !spinnerHidden ? (
+    type === 'number' && step !== 0 && !disabled && !readOnly ? (
       <Spinner
         onClick={handleClickChild}
         onChange={handleNumberChange}
@@ -568,16 +554,7 @@ export function TextField({
       requiredIndicator={requiredIndicator}
     >
       <Connected left={connectedLeft} right={connectedRight}>
-        <div
-          className={className}
-          onClick={handleClick}
-          onMouseEnter={
-            stepperShownOnInteraction ? handleMouseEnter : undefined
-          }
-          onMouseLeave={
-            stepperShownOnInteraction ? handleMouseLeave : undefined
-          }
-        >
+        <div className={className} onClick={handleClick}>
           {prefixMarkup}
           {inputMarkup}
           {suffixMarkup}

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

@@ -1116,99 +1116,6 @@ 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

@@ -214,8 +214,7 @@ Use the placeholder to provide information that’s required to use the text fie
 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
+- 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 when hovering over or focusing the field to make the arrows appear
 - 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)