[MP-672] Support endAdornment properly in NumberInput (#4645)

* Support endAdornment in NumberInput

* Support endAdornment in NumberInput

* Remove unnecessary condition

.changeset/perfect-dolls-march.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-number-input': minor
+---
+
+- support custom `endAdornment` in NumberInput

packages/base/NumberInput/src/NumberInput/NumberInput.tsx

@@ -50,6 +50,7 @@ export const NumberInput = forwardRef<HTMLInputElement, Props>(
       status,
       onResetClick,
       enableReset,
+      endAdornment: customEndAdornment = null,
       width,
       icon,
       size,
@@ -63,7 +64,7 @@ export const NumberInput = forwardRef<HTMLInputElement, Props>(
       useRef<HTMLInputElement>(null)
     )
 
-    const endAdornment = hideControls ? null : (
+    const defaultEndAdornment = (
       <NumberInputEndAdornment
         step={step}
         min={min}
@@ -75,6 +76,15 @@ export const NumberInput = forwardRef<HTMLInputElement, Props>(
       />
     )
 
+    const endAdornment = hideControls ? (
+      customEndAdornment
+    ) : (
+      <>
+        {customEndAdornment}
+        {defaultEndAdornment}
+      </>
+    )
+
     const startAdornment = icon ? (
       <InputAdornment position='start' disablePointerEvents>
         {icon}

packages/base/NumberInput/src/NumberInput/story/WithEndAdornment.example.tsx

@@ -0,0 +1,26 @@
+import type { ChangeEventHandler } from 'react'
+import React, { useState } from 'react'
+import { NumberInput, Container, Typography } from '@toptal/picasso'
+
+const WithEndAdornmentExample = () => {
+  const [value, setValue] = useState('1')
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Container>
+      <NumberInput
+        value={value}
+        onChange={handleChange}
+        step='5'
+        max='100'
+        min='-100'
+        endAdornment={<Typography color='dark-grey'>$/hr</Typography>}
+      />
+    </Container>
+  )
+}
+
+export default WithEndAdornmentExample

packages/base/NumberInput/src/NumberInput/story/index.jsx

@@ -4,7 +4,7 @@ import PicassoBook from '~/.storybook/components/PicassoBook'
 const page = PicassoBook.section('Forms').createPage(
   'NumberInput',
   `Input component for numbers
-  
+
   ${PicassoBook.createSourceLink(__filename)}
   `
 )
@@ -35,6 +35,11 @@ page
     'With Icon',
     'base/NumberInput'
   )
+  .addExample(
+    'NumberInput/story/WithEndAdornment.example.tsx',
+    'With End Adornment',
+    'base/NumberInput'
+  )
   .addExample(
     'NumberInput/story/Sizes.example.tsx',
     'Sizes',

packages/base/NumberInput/src/NumberInput/test.tsx

@@ -22,6 +22,8 @@ const NumberInputRenderer = (
       value={value}
       onChange={handleChange}
       status={props.status}
+      endAdornment={props.endAdornment}
+      hideControls={props.hideControls}
       testIds={props.testIds}
     />
   )
@@ -150,4 +152,35 @@ describe('NumberInput', () => {
       expect(validIcon).not.toBeVisible()
     })
   })
+
+  describe('end adornment', () => {
+    describe('when endAdornment is passed', () => {
+      it('renders endAdornment with control buttons', () => {
+        const testProps: NumberInputProps = {
+          value: '10',
+          endAdornment: <div data-testid='custom-end-adornment' />,
+        }
+
+        const { getByTestId, getAllByRole } = renderNumberInput(testProps)
+
+        expect(getByTestId('custom-end-adornment')).toBeVisible()
+        expect(getAllByRole('button')).toHaveLength(2)
+      })
+    })
+
+    describe('when endAdornment is passed and controls are hidden', () => {
+      it('renders endAdornment without control buttons', () => {
+        const testProps: NumberInputProps = {
+          value: '10',
+          endAdornment: <div data-testid='custom-end-adornment' />,
+          hideControls: true,
+        }
+
+        const { getByTestId, queryAllByRole } = renderNumberInput(testProps)
+
+        expect(getByTestId('custom-end-adornment')).toBeVisible()
+        expect(queryAllByRole('button')).toHaveLength(0)
+      })
+    })
+  })
 })