Chore/add field styles for number input (#823)

* chore: add merge input styles for numberinput * chore: update NumberINput stores * chore: fix lint * chore: remove merge as sx has higher priority
opengovsg · Dec 16, 2024 · 0f307e2 · 0f307e2
1 parent dfe6aa8
commit 0f307e2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/camp/src/NumberInput/NumberInput.stories.tsx b/packages/camp/src/NumberInput/NumberInput.stories.tsx
@@ -100,3 +100,9 @@ export const FormInput: StoryFn<NumberInputProps> = (args) => {
     </FormControl>
   )
 }
+
+export const InputStyles = Template.bind({})
+InputStyles.args = {
+  placeholder: 'Pass in input styles',
+  inputStyles: { bgColor: 'gray.100' },
+}
diff --git a/packages/camp/src/NumberInput/NumberInput.tsx b/packages/camp/src/NumberInput/NumberInput.tsx
@@ -3,10 +3,10 @@ import { useRef } from 'react'
 import {
   Box,
   chakra,
-  ComponentWithAs as _,
   Divider,
   forwardRef,
   NumberInputProps as ChakraNumberInputProps,
+  SystemStyleObject,
   useFormControlProps,
   useMergeRefs,
   useMultiStyleConfig,
@@ -29,6 +29,11 @@ export interface NumberInputProps extends ChakraNumberInputProps {
    * Whether to show the increment and decrement steppers. Defaults to true.
    */
   showSteppers?: boolean
+
+  /**
+   * Merge styles for inner input field
+   */
+  inputStyles?: SystemStyleObject
 }
 
 export const NumberInput = forwardRef<NumberInputProps, 'input'>(
@@ -38,6 +43,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
       clampValueOnBlur = false,
       isSuccess,
       isPrefilled,
+      inputStyles,
       ...props
     },
     ref,
@@ -90,6 +96,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
           // is this input.
           ref={inputRef}
           __css={styles.field}
+          sx={inputStyles}
         />
         {showSteppers && (
           <Box __css={styles.stepperWrapper} ref={stepperWrapperRef}>