Add type prop to Stepper

Author: forestream

packages/components/src/components/Stepper/Stepper.stories.tsx

@@ -29,7 +29,7 @@ export const Default: Story = {
     <Stepper {...args}>
       <StepperContainer>
         <StepperDecreaseButton />
-        <StepperInput editable={false} />
+        <StepperInput />
         <StepperIncreaseButton />
       </StepperContainer>
     </Stepper>

packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -37,14 +37,15 @@ exports[`Stepper > should render 1`] = `
       </div>
     </button>
     <div
-      aria-label="Stepper value"
-      class="width-0-80px--2 height-0-50px--2 text-align-0-center--2 padding-bottom-0-10px--2 padding-top-0-10px--2 padding-right-0-12px--2 padding-left-0-12px--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 padding-0-0--3 border-0-none--3 width-0-fit-content--3 height-0-fit-content--3"
-      data-value="0"
-      readonly=""
-      type="number"
-      value="0"
+      class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
     >
-      0
+      <input
+        aria-label="Stepper value"
+        class="width-0-80px--2 height-0-50px--2 text-align-0-center--2 padding-bottom-0-10px--2 padding-top-0-10px--2 padding-right-0-12px--2 padding-left-0-12px--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-12px--1 "
+        data-value="0"
+        type="number"
+        value="0"
+      />
     </div>
     <button
       aria-disabled="false"

packages/components/src/components/Stepper/__tests__/index.browser.test.tsx

@@ -51,6 +51,17 @@ describe('Stepper', () => {
     expect(input).toHaveAttribute('data-value', '10')
   })
 
+  it('should not change inner value by clicking the number when type is text', () => {
+    const { container } = render(
+      <Stepper type="text">
+        <StepperInput />
+      </Stepper>,
+    )
+    const input = container.querySelector('[aria-label="Stepper value"]')
+    expect(input?.nodeName).toBe('DIV')
+    expect(input).toHaveAttribute('data-value', '0')
+  })
+
   it('should have disabled decrease button when value is at min', () => {
     const { container } = render(
       <Stepper>

packages/components/src/components/Stepper/index.tsx

@@ -14,6 +14,7 @@ type StepperContextType = {
   setValue: (value: number) => void
   min: number
   max: number
+  type: 'input' | 'text'
 }
 
 const StepperContext = createContext<StepperContextType | null>(null)
@@ -33,6 +34,7 @@ type StepperProps = {
   onValueChange?: (value: number) => void
   min?: number
   max?: number
+  type?: 'input' | 'text'
 }
 
 function Stepper({
@@ -42,6 +44,7 @@ function Stepper({
   onValueChange,
   min = 0,
   max = 100,
+  type = 'input',
 }: StepperProps) {
   const [value, setValue] = useState(defaultValue ?? 0)
 
@@ -56,7 +59,13 @@ function Stepper({
 
   return (
     <StepperContext.Provider
-      value={{ value: valueProp ?? value, setValue: handleChange, min, max }}
+      value={{
+        value: valueProp ?? value,
+        setValue: handleChange,
+        min,
+        max,
+        type,
+      }}
     >
       {children}
     </StepperContext.Provider>
@@ -126,20 +135,16 @@ interface StepperInputProps extends ComponentProps<typeof Input> {
   editable?: boolean
 }
 
-function StepperInput({
-  editable = true,
-  className,
-  ...props
-}: StepperInputProps) {
-  const { value, setValue } = useStepper()
+function StepperInput({ className, ...props }: StepperInputProps) {
+  const { value, setValue, type } = useStepper()
   const notEditableClass = css({
     p: '0',
     border: 'none',
     w: 'fit-content',
     h: 'fit-content',
     styleOrder: 3,
   })
-
+  const editable = type === 'input'
   const Comp = editable ? Input : 'div'
 
   return (