fix(CounterInput): prevent value clipping

Author: nawwwal

packages/blade/src/components/CounterInput/CounterInput.native.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Pressable, TextInput, StyleSheet } from 'react-native';
+import type { TextStyle } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -15,6 +16,7 @@ import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 import type { BladeElementRef } from '~utils/types';
 import { useControllableState } from '~utils/useControllable';
+import { baseInputCounterInputPaddingTokens } from '~components/Input/BaseInput/baseInputTokens';
 import BaseBox from '~components/Box/BaseBox';
 import { FormLabel } from '~components/Form';
 import { useId } from '~utils/useId';
@@ -160,25 +162,40 @@ const _CounterInput = React.forwardRef<BladeElementRef, CounterInputProps>(
       size: COUNTER_INPUT_SIZE_TO_TEXT_SIZE[size],
       weight: 'semibold',
     });
+    const fontSize = theme.typography.fonts.size[fontSizeToken];
+    const counterValueDigitCount = Math.max(2, String(internalValue ?? min).length);
+    const counterInputHorizontalPadding =
+      theme.spacing[baseInputCounterInputPaddingTokens.left[size]] +
+      theme.spacing[baseInputCounterInputPaddingTokens.right[size]];
+    const counterInputFieldWidth =
+      counterValueDigitCount * fontSize + counterInputHorizontalPadding;
 
     const containerStyle = StyleSheet.create({
       box: {
-        width: COUNTER_INPUT_TOKEN.width[size],
+        minWidth: COUNTER_INPUT_TOKEN.width[size],
         height: COUNTER_INPUT_TOKEN.height[size],
+        alignSelf: 'flex-start',
       },
     });
 
     const textInputStyle = StyleSheet.create({
       input: {
-        flex: 1,
+        width: '100%',
         textAlign: 'center',
         textAlignVertical: 'center',
         includeFontPadding: false,
         padding: 0,
         color: valueColor,
-        fontSize: theme.typography.fonts.size[fontSizeToken],
+        fontSize,
         fontFamily: theme.typography.fonts.family.text,
         fontWeight: '600',
+        fontVariant: ['tabular-nums'] as TextStyle['fontVariant'],
+      },
+    });
+
+    const inputWrapperStyle = StyleSheet.create({
+      wrapper: {
+        width: counterInputFieldWidth,
       },
     });
 
@@ -241,7 +258,7 @@ const _CounterInput = React.forwardRef<BladeElementRef, CounterInputProps>(
                   />
                 </Pressable>
 
-                <Animated.View style={[{ flex: 1 }, animatedStyle]}>
+                <Animated.View style={[inputWrapperStyle.wrapper, animatedStyle]}>
                   <TextInput
                     value={internalValue?.toString() ?? String(min)}
                     onChangeText={handleInputChange}

packages/blade/src/components/CounterInput/CounterInput.web.tsx

@@ -5,6 +5,7 @@ import { StyledCounterInput } from './StyledCounterInput';
 import { COUNTER_INPUT_TOKEN, COUNTER_INPUT_ICON_SIZE_MAP } from './token';
 import { CounterInputProvider } from './CounterInputContext';
 import { BaseInput } from '~components/Input/BaseInput';
+import { baseInputCounterInputPaddingTokens } from '~components/Input/BaseInput/baseInputTokens';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { getStyledProps } from '~components/Box/styledProps';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
@@ -111,6 +112,11 @@ const _CounterInput = React.forwardRef<BladeElementRef, CounterInputProps>(
     const lastActionRef = useRef<'increment' | 'decrement' | null>(null);
     const previousValueRef = useRef<number | undefined>(internalValue);
     const containerRef = useRef<HTMLDivElement>(null);
+    const counterValueDigitCount = Math.max(2, String(internalValue ?? min).length);
+    const counterInputHorizontalPadding =
+      theme.spacing[baseInputCounterInputPaddingTokens.left[size]] +
+      theme.spacing[baseInputCounterInputPaddingTokens.right[size]];
+    const counterInputFieldWidth = `calc(${counterValueDigitCount}ch + ${counterInputHorizontalPadding}px)`;
 
     // Track Tab navigation to show focus ring only on keyboard navigation (not mouse clicks)
     // Note: :focus-visible doesn't work for text inputs - shows ring on both Tab and click
@@ -218,6 +224,7 @@ const _CounterInput = React.forwardRef<BladeElementRef, CounterInputProps>(
             display="flex"
             flexDirection={isLabelLeftPositioned ? 'row' : 'column'}
             alignItems={isLabelLeftPositioned ? 'center' : undefined}
+            width="fit-content"
           >
             {label && (
               <FormLabel
@@ -241,7 +248,8 @@ const _CounterInput = React.forwardRef<BladeElementRef, CounterInputProps>(
                   ? emphasisTokens.loadingOrDisabledBgColor
                   : emphasisTokens.backgroundColor
               }
-              width={`${COUNTER_INPUT_TOKEN.width[size]}px`}
+              width="fit-content"
+              minWidth={`${COUNTER_INPUT_TOKEN.width[size]}px`}
               height={`${COUNTER_INPUT_TOKEN.height[size]}px`}
               borderRadius={COUNTER_INPUT_TOKEN.containerBorderRadius[size]}
               borderWidth="thin"
@@ -269,7 +277,10 @@ const _CounterInput = React.forwardRef<BladeElementRef, CounterInputProps>(
                   <MinusIcon size={COUNTER_INPUT_ICON_SIZE_MAP[size]} color="currentColor" />
                 </StyledCounterButton>
 
-                <BaseBox className={animationClass}>
+                <BaseBox
+                  className={`__blade-counter-input-number-wrapper ${animationClass}`.trim()}
+                  width={counterInputFieldWidth}
+                >
                   <BaseInput
                     ref={ref}
                     id={inputId}

packages/blade/src/components/CounterInput/StyledCounterInput.tsx

@@ -60,6 +60,7 @@ const StyledCounterInput = styled(BaseBox)`
 
   &.__blade-counter-input input[type='number'] {
     -moz-appearance: textfield; /* Firefox */
+    font-variant-numeric: tabular-nums;
   }
 
   /* Remove ProgressBar background */

packages/blade/src/components/CounterInput/__tests__/CounterInput.web.test.tsx

@@ -1,11 +1,27 @@
 import userEvent from '@testing-library/user-event';
+import 'jest-styled-components';
 import { CounterInput } from '../CounterInput';
 import renderWithTheme from '~utils/testing/renderWithTheme.web';
 import assertAccessible from '~utils/testing/assertAccessible.web';
+import { baseInputCounterInputPaddingTokens } from '~components/Input/BaseInput/baseInputTokens';
+import { bladeTheme } from '~tokens/theme';
 
 beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
+const getCounterInputFieldWidth = ({
+  digitCount,
+  size,
+}: {
+  digitCount: number;
+  size: 'xsmall' | 'medium' | 'large';
+}): string => {
+  const horizontalPadding =
+    bladeTheme.spacing[baseInputCounterInputPaddingTokens.left[size]] +
+    bladeTheme.spacing[baseInputCounterInputPaddingTokens.right[size]];
+  return `calc(${digitCount}ch + ${horizontalPadding}px)`;
+};
+
 describe('<CounterInput />', () => {
   it('should render', () => {
     const { container } = renderWithTheme(<CounterInput label="Quantity" />);
@@ -194,6 +210,30 @@ describe('<CounterInput />', () => {
     expect(input).toHaveAttribute('name', name);
   });
 
+  it('should reserve two digits and expand for larger values', () => {
+    const { container, rerender } = renderWithTheme(<CounterInput label="Quantity" value={5} />);
+
+    expect(container.querySelector('.__blade-counter-input-number-wrapper')).toHaveStyleRule(
+      'width',
+      getCounterInputFieldWidth({ digitCount: 2, size: 'medium' }),
+    );
+
+    rerender(<CounterInput label="Quantity" value={100} />);
+
+    expect(container.querySelector('.__blade-counter-input-number-wrapper')).toHaveStyleRule(
+      'width',
+      getCounterInputFieldWidth({ digitCount: 3, size: 'medium' }),
+    );
+  });
+
+  it('should use tabular numbers', () => {
+    const { container } = renderWithTheme(<CounterInput label="Quantity" value={100} />);
+
+    expect(container.firstChild).toHaveStyleRule('font-variant-numeric', 'tabular-nums', {
+      modifier: "&.__blade-counter-input input[type='number']",
+    });
+  });
+
   it('should pass a11y', async () => {
     const { getByRole } = renderWithTheme(
       <CounterInput label="Product Quantity" value={5} min={1} max={100} />,