Removing border on textInput when focused

polaris-react/src/components/TextField/TextField.module.css

@@ -31,6 +31,13 @@
     .Loading:has(+ .ClearButton) {
       margin-right: 0;
     }
+
+    /* Ensure the Backdrop also has no border */
+    .Backdrop {
+      @media (--p-breakpoints-sm-down) {
+        border: none;
+      }
+    }
   }
 
   &:not(:focus-within) {
@@ -95,6 +102,12 @@
       outline-width: var(--p-border-width-025);
       outline-offset: 0;
     }
+
+    @media (--p-breakpoints-sm-down) {
+      border-color: var(--p-color-border-focus);
+      outline-width: var(--p-border-width-050);
+      outline-offset: 0;
+    }
   }
 }
 
@@ -224,6 +237,11 @@
   flex: 1 1 0%;
   width: 100%;
 }
+.StepperwithSuffixWrapper {
+  justify-content: center;
+  min-width: 70px;
+  height: 36px;
+}
 
 .AutoSizeWrapper {
   position: relative;
@@ -364,6 +382,14 @@
   }
 }
 
+.tallInput.labelInside.hasValue.showStepper {
+  .Input,
+  .Prefix {
+    padding-block-start: 0;
+    padding-block-end: 0;
+  }
+}
+
 .borderless {
   .Input,
   .Backdrop {
@@ -449,6 +475,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);
@@ -496,6 +527,18 @@
   }
 }
 
+.stepperInput {
+  text-align: center;
+}
+
+.stepperInputWrapper {
+  display: flex;
+  flex-direction: row;
+  border-radius: var(--p-border-radius-750);
+  background-color: var(--p-color-bg-surface-secondary-active);
+  width: 100%;
+}
+
 .CharacterCount {
   color: var(--p-color-text-secondary);
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */

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;
+}

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

@@ -0,0 +1,49 @@
+import {MinusIcon, PlusIcon} from '@shopify/polaris-icons';
+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;
+  label: React.ReactNode;
+  hideLabel: boolean;
+  canDecrement: boolean;
+  canIncrement: boolean;
+  handleNumberChange: (step: number) => void;
+}
+export function Stepper({
+  input,
+  label,
+  hideLabel,
+  canDecrement,
+  canIncrement,
+  handleNumberChange,
+}: Props) {
+  return (
+    <div className={classNames(styles.Wrapper, hideLabel && styles.FullWidth)}>
+      {hideLabel ? undefined : (
+        <div className={styles.LabelWrapper}>
+          <Text as="span" variant="bodyMd">
+            {label}
+          </Text>
+        </div>
+      )}
+
+      <div className={styles.StepperWrapper}>
+        <StepperButton
+          source={MinusIcon}
+          disabled={!canDecrement}
+          onPress={handleNumberChange}
+        />
+        {input}
+        <StepperButton
+          source={PlusIcon}
+          disabled={!canIncrement}
+          onPress={handleNumberChange}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import {MinusIcon} from '@shopify/polaris-icons';
+import React from 'react';
+
+import type {IconSource} from '../../../..';
+import {Button} from '../../../Button';
+
+interface Props {
+  source: IconSource;
+  disabled: boolean;
+  onPress: (step: number) => void;
+}
+
+export function StepperButton({source, disabled, onPress}: Props) {
+  const valueChange = source === MinusIcon ? -1 : 1;
+
+  return (
+    <Button
+      key={source.toString()}
+      variant="plain"
+      disabled={disabled}
+      icon={source}
+      onClick={() => onPress(valueChange)}
+    />
+  );
+}

polaris-react/src/components/TextField/components/Stepper/index.ts

@@ -0,0 +1,3 @@
+export * from './useStepper';
+export * from './StepperButton';
+export * from './Stepper';

polaris-react/src/components/TextField/components/Stepper/useStepper.ts

@@ -0,0 +1,28 @@
+interface Props {
+  value: number | null;
+  minValue?: number;
+  maxValue?: number;
+  disabled?: boolean;
+}
+
+interface Value {
+  canDecrement: boolean;
+  canIncrement: boolean;
+}
+
+export function useStepper({
+  value,
+  minValue,
+  maxValue,
+  disabled,
+}: Props): Value {
+  const isDisabled = disabled === true || value === null;
+
+  const canDecrement = isDisabled ? false : value > (minValue ?? -Infinity);
+  const canIncrement = isDisabled ? false : value < (maxValue ?? Infinity);
+
+  return {
+    canDecrement,
+    canIncrement,
+  };
+}

polaris-react/src/components/TextField/components/index.ts

@@ -1,3 +1,5 @@
 export * from './Resizer';
 
 export * from './Spinner';
+
+export * from './Stepper';

polaris-react/src/utilities/use-is-mobile-breakpoint.ts

@@ -0,0 +1,6 @@
+import {useBreakpoints} from './breakpoints';
+
+export function useIsMobileBreakpoint() {
+  const {mdDown} = useBreakpoints();
+  return mdDown;
+}