Stepper prototype

Shopify · May 1, 2024 · 444bafc · 444bafc
1 parent 995079c
commit 444bafc
Show file tree

Hide file tree

Showing 11 changed files with 311 additions and 21 deletions.
diff --git a/polaris-react/src/components/TextField/TextField.module.css b/polaris-react/src/components/TextField/TextField.module.css
@@ -147,6 +147,10 @@
     border-color: var(--p-color-border-magic-secondary);
   }
 
+  > .stepperInputWrapper {
+    background-color: purple;
+  }
+
   svg {
     fill: var(--p-color-icon-magic);
   }
@@ -199,6 +203,11 @@
   flex: 1 1 0%;
   width: 100%;
 }
+.StepperwithSuffixWrapper {
+  justify-content: center;
+  min-width: 70px;
+  height: 36px;
+}
 
 .AutoSizeWrapper {
   position: relative;
@@ -322,6 +331,31 @@
   }
 }
 
+.tallInput .Input {
+  padding-block-start: 10px;
+  padding-block-end: 10px;
+}
+
+.tallInput.labelInside .Input {
+  padding-block-start: 20px;
+  padding-block-end: 20px;
+}
+.tallInput.labelInside.hasValue {
+  .Input,
+  .Prefix {
+    padding-block-start: 30px;
+    padding-block-end: 10px;
+  }
+}
+
+.tallInput.labelInside.hasValue.showStepper {
+  .Input,
+  .Prefix {
+    padding-block-start: 0;
+    padding-block-end: 0;
+  }
+}
+
 .borderless {
   .Input,
   .Backdrop {
@@ -404,6 +438,11 @@
   color: var(--p-color-text-secondary);
   user-select: none;
 }
+.StepperSuffix {
+  vertical-align: middle;
+  align-content: center;
+  color: var(--p-color-text);
+}
 
 .Prefix {
   margin-left: var(--p-space-300);
@@ -451,6 +490,18 @@
   }
 }
 
+.stepperInput {
+  text-align: center;
+}
+
+.stepperInputWrapper {
+  display: flex;
+  flex-direction: row;
+  border-radius: var(--p-border-radius-150);
+  background-color: var(--p-color-bg-fill-active);
+  width: 100%;
+}
+
 .CharacterCount {
   color: var(--p-color-text-secondary);
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */

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"
@@ -211,6 +212,13 @@ export const WithHiddenLabel = {
             />
           }
         />
+        <TextField
+          label="Gift cards expire after"
+          type="number"
+          labelHidden
+          value={value}
+          autoComplete="off"
+        />
       </FormLayout>
     );
   },
@@ -716,8 +724,30 @@ export const WithInlineSuggestion = {
 
 export const All = {
   render() {
+    const [stepperValue, setStepperValue] = useState(3);
+    const [stepperValue2, setStepperValue2] = useState(3);
+
     return (
       <FormLayout>
+        <FormLayout.Group>
+          <TextField
+            label="Working Stepper with a min value of 0 and max value of 10"
+            value={stepperValue}
+            onChange={setStepperValue}
+            min={0}
+            max={10}
+            autoComplete="off"
+            type="number"
+          />
+          <TextField
+            label="Stepper with suffix"
+            value={stepperValue2}
+            onChange={setStepperValue2}
+            suffix={'/10'}
+            autoComplete="off"
+            type="number"
+          />
+        </FormLayout.Group>
         <FormLayout.Group>
           <TextField
             label="Default"
@@ -908,9 +938,19 @@ export const All = {
           <TextField
             label="Connected"
             type="number"
-            value="Value"
+            value="1"
+            onChange={() => {}}
+            autoComplete="off"
+            connectedLeft={<Button>Left</Button>}
+            connectedRight={<Button>Right</Button>}
+          />
+          <TextField
+            label="Connected with suffix"
+            type="number"
+            value="1"
             onChange={() => {}}
             autoComplete="off"
+            suffix="/100"
             connectedLeft={<Button>Left</Button>}
             connectedRight={<Button>Right</Button>}
           />

diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
@@ -20,10 +20,12 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {Spinner as LoadingSpinner} from '../Spinner';
 import {useEventListener} from '../../utilities/use-event-listener';
+import {useIsMobileBreakpoint} from '../../utilities/use-is-mobile-breakpoint';
 
-import {Resizer, Spinner} from './components';
+import {Resizer, Spinner, useStepper} from './components';
 import type {SpinnerProps} from './components';
 import styles from './TextField.module.css';
+import {Stepper} from './components/Stepper/Stepper';
 
 type Type =
   | 'text'
@@ -255,7 +257,7 @@ export function TextField({
   onFocus,
   onBlur,
   tone,
-  autoSize,
+  autoSize: incomingAutoSize,
   loading,
 }: TextFieldProps) {
   const i18n = useI18n();
@@ -306,6 +308,13 @@ export function TextField({
   const normalizedMax = max != null ? max : Infinity;
   const normalizedMin = min != null ? min : -Infinity;
 
+  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 className = classNames(
     styles.TextField,
     Boolean(normalizedValue) && styles.hasValue,
@@ -317,26 +326,34 @@ export function TextField({
     focus && !disabled && styles.focus,
     variant !== 'inherit' && styles[variant],
     size === 'slim' && styles.slim,
+    showStepper && styles.showStepper,
   );
 
-  const inputType = type === 'currency' ? 'text' : type;
-  const isNumericType = type === 'number' || type === 'integer';
-  const iconPrefix = React.isValidElement(prefix) && prefix.type === Icon;
+  const inputType = type === 'currency' || showStepper ? 'text' : type;
 
-  const prefixMarkup = prefix ? (
-    <div
-      className={classNames(styles.Prefix, iconPrefix && styles.PrefixIcon)}
-      id={`${id}-Prefix`}
-      ref={prefixRef}
-    >
-      <Text as="span" variant="bodyMd">
-        {prefix}
-      </Text>
-    </div>
-  ) : null;
+  const fullWidthStepper = showStepper && !labelHidden;
+
+  const autoSize = incomingAutoSize || fullWidthStepper;
+
+  const prefixMarkup =
+    prefix && !showStepper ? (
+      <div
+        className={classNames(styles.Prefix, iconPrefix && styles.PrefixIcon)}
+        id={`${id}-Prefix`}
+        ref={prefixRef}
+      >
+        <Text as="span" variant="bodyMd">
+          {prefix}
+        </Text>
+      </div>
+    ) : null;
 
   const suffixMarkup = suffix ? (
-    <div className={styles.Suffix} id={`${id}-Suffix`} ref={suffixRef}>
+    <div
+      className={classNames(styles.Suffix, showStepper && styles.StepperSuffix)}
+      id={`${id}-Suffix`}
+      ref={suffixRef}
+    >
       <Text as="span" variant="bodyMd">
         {suffix}
       </Text>
@@ -473,7 +490,11 @@ export function TextField({
   );
 
   const spinnerMarkup =
-    isNumericType && step !== 0 && !disabled && !readOnly ? (
+    !isMobileBreakpoint &&
+    isNumericType &&
+    step !== 0 &&
+    !disabled &&
+    !readOnly ? (
       <Spinner
         onClick={handleClickChild}
         onChange={handleNumberChange}
@@ -541,6 +562,7 @@ export function TextField({
     monospaced && styles.monospaced,
     suggestion && styles.suggestion,
     autoSize && styles['Input-autoSize'],
+    showStepper && styles.stepperInput,
   );
 
   const handleOnFocus = (
@@ -615,6 +637,13 @@ export function TextField({
     'data-form-type': autoComplete === 'off' ? 'other' : undefined,
   });
 
+  const {canDecrement, canIncrement} = useStepper({
+    value: isNumericType ? Number(value) : null,
+    minValue: min ? Number(min) : undefined,
+    maxValue: max ? Number(max) : undefined,
+    disabled,
+  });
+
   const inputWithVerticalContentMarkup = verticalContent ? (
     <div
       className={styles.VerticalContent}
@@ -640,7 +669,12 @@ export function TextField({
   );
 
   const inputAndSuffixMarkup = autoSize ? (
-    <div className={styles.InputAndSuffixWrapper}>
+    <div
+      className={classNames(
+        styles.InputAndSuffixWrapper,
+        showStepper && styles.StepperwithSuffixWrapper,
+      )}
+    >
       <div
         className={classNames(
           styles.AutoSizeWrapper,
@@ -659,6 +693,21 @@ export function TextField({
     </>
   );
 
+  const finalInputMarkup = showStepper ? (
+    <Stepper
+      input={
+        <div className={styles.stepperInputWrapper}>{inputAndSuffixMarkup}</div>
+      }
+      label={label}
+      hideLabel={Boolean(labelHidden)}
+      canDecrement={canDecrement}
+      canIncrement={canIncrement}
+      handleNumberChange={handleNumberChange}
+    />
+  ) : (
+    inputAndSuffixMarkup
+  );
+
   return (
     <Labelled
       label={label}
@@ -674,7 +723,7 @@ export function TextField({
       <Connected left={connectedLeft} right={connectedRight}>
         <div className={className} onClick={handleClick} ref={textFieldRef}>
           {prefixMarkup}
-          {inputAndSuffixMarkup}
+          {finalInputMarkup}
           {characterCountMarkup}
           {loadingMarkup}
           {clearButtonMarkup}

diff --git a/polaris-react/src/components/TextField/components/Stepper/Stepper.module.css b/polaris-react/src/components/TextField/components/Stepper/Stepper.module.css
@@ -0,0 +1,27 @@
+.Wrapper {
+  z-index: var(--pc-text-field-contents);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  vertical-align: middle;
+  align-content: center;
+  width: 100%;
+  padding-block: var(--p-space-200);
+}
+
+.LabelWrapper {
+  vertical-align: middle;
+  align-content: center;
+  padding-inline: var(--p-space-200);
+}
+
+.StepperWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-inline: var(--p-space-200);
+}
+
+.FullWidth .StepperWrapper {
+  width: inherit;
+}