Use Autosize feature for the mobile stepper

Shopify · Apr 24, 2024 · 499409e · 499409e
1 parent b230a8c
commit 499409e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/polaris-react/src/components/TextField/TextField.module.css b/polaris-react/src/components/TextField/TextField.module.css
@@ -311,10 +311,10 @@
   }
 
   &.stepperInput {
-    height: var(--p-height-800);
     border-radius: var(--p-border-radius-750);
     background-color: var(--p-color-bg-surface-secondary-active);
-    text-align: center; /* min-width: 78px; */
+    text-align: center;
+    min-width: 78px;
   }
 
   &:-webkit-autofill {

diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx
@@ -105,6 +105,7 @@ export const Number = {
           value={value}
           onChange={handleChange}
           autoComplete="off"
+          suffix="/10"
         />
         <TextField
           label="Second Quantity"
@@ -908,7 +909,7 @@ export const All = {
           <TextField
             label="Connected"
             type="number"
-            value="Value"
+            value="1"
             onChange={() => {}}
             autoComplete="off"
             connectedLeft={<Button>Left</Button>}

diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
@@ -257,7 +257,7 @@ export function TextField({
   onFocus,
   onBlur,
   tone,
-  autoSize,
+  autoSize: incomingAutoSize,
   loading,
 }: TextFieldProps) {
   const i18n = useI18n();
@@ -321,14 +321,17 @@ export function TextField({
     size === 'slim' && styles.slim,
   );
 
-  const inputType = type === 'currency' ? 'text' : type;
   const isNumericType = type === 'number' || type === 'integer';
   const iconPrefix = React.isValidElement(prefix) && prefix.type === Icon;
   const isMobileBreakpoint = useIsMobileBreakpoint();
 
   const showStepper =
     isMobileBreakpoint && isNumericType && step !== 0 && !disabled && !readOnly;
 
+  const fullWidthStepper =
+    showStepper && !Boolean(labelHidden || connectedLeft);
+  const inputType = type === 'currency' || showStepper ? 'text' : type;
+  const autoSize = incomingAutoSize || fullWidthStepper;
   const prefixMarkup =
     prefix && !showStepper ? (
       <div
@@ -680,7 +683,7 @@ export function TextField({
 
   const finalInputMarkup = showStepper ? (
     <Stepper
-      input={inputMarkup}
+      input={inputAndSuffixMarkup}
       label={label}
       hideLabel={Boolean(labelHidden || connectedLeft)}
       canDecrement={canDecrement}

diff --git a/polaris-react/src/components/TextField/components/Stepper/Stepper.module.css b/polaris-react/src/components/TextField/components/Stepper/Stepper.module.css
@@ -23,5 +23,8 @@
   align-items: center;
   margin-inline: var(--p-space-200);
   /* min-width: 78px; */
+}
+
+.FullWidth .StepperWrapper {
   width: inherit;
 }
diff --git a/polaris-react/src/components/TextField/components/Stepper/Stepper.tsx b/polaris-react/src/components/TextField/components/Stepper/Stepper.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {StepperButton} from './StepperButton';
 import {Text} from '../../../Text';
 import styles from './Stepper.module.css';
+import {classNames} from '../../../../utilities/css';
 
 interface Props {
   input: React.JSX.Element | null;
@@ -21,7 +22,7 @@ export function Stepper({
   handleNumberChange,
 }: Props) {
   return (
-    <div className={styles.Wrapper}>
+    <div className={classNames(styles.Wrapper, hideLabel && styles.FullWidth)}>
       {hideLabel ? undefined : (
         <div className={styles.LabelWrapper}>
           <Text as="span" variant="bodyMd">