feat: update NumberInput theming to align with Input style

opengovsg · Jul 7, 2021 · e8c6dc9 · e8c6dc9
1 parent e0750c7
commit e8c6dc9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 38 deletions.
diff --git a/frontend/src/components/NumberInput/NumberInput.tsx b/frontend/src/components/NumberInput/NumberInput.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from 'react'
 import { BiCaretDown, BiCaretUp } from 'react-icons/bi'
 import {
   forwardRef,
@@ -10,10 +9,11 @@ import {
   NumberInputField,
   NumberInputProps as ChakraNumberInputProps,
   NumberInputStepper,
+  useMultiStyleConfig,
 } from '@chakra-ui/react'
+import { omit } from '@chakra-ui/utils'
 
 import { BxsCheckCircle } from '~assets/icons/BxsCheckCircle'
-import { SX_STEPPER_WIDTH } from '~theme/components/NumberInput'
 
 export interface NumberInputProps extends ChakraNumberInputProps {
   /**
@@ -27,38 +27,19 @@ export interface NumberInputProps extends ChakraNumberInputProps {
 }
 
 export const NumberInput = forwardRef<NumberInputProps, 'input'>(
-  ({ isPrefilled, isSuccess, ...props }, ref) => {
-    const extraInputProps = useMemo(() => {
-      let extraProps = {}
-      if (isSuccess) {
-        extraProps = {
-          borderColor: 'success.700',
-          _hover: {
-            borderColor: 'success.700',
-          },
-          paddingInlineEnd: `calc(var(${SX_STEPPER_WIDTH}) + 2.5rem)`,
-        }
-      }
-      // Add background if isPrefilled.
-      if (isPrefilled) {
-        extraProps = {
-          ...extraProps,
-          bg: 'warning.100',
-        }
-      }
-      return extraProps
-    }, [isPrefilled, isSuccess])
+  (props, ref) => {
+    const { isSuccess } = props
+    const inputStyles = useMultiStyleConfig('NumberInput', props)
+    // Omit extra props so they will not be passed into the DOM and trigger
+    // React warnings.
+    const inputProps = omit(props, ['isSuccess', 'isPrefilled'])
 
     return (
-      <ChakraNumberInput {...props} ref={ref}>
-        <NumberInputField {...extraInputProps} />
+      <ChakraNumberInput {...inputProps} ref={ref}>
+        <NumberInputField sx={inputStyles.field} />
         {isSuccess && (
-          <InputRightElement
-            pointerEvents="none"
-            fontSize="1.25rem"
-            mr={`var(${SX_STEPPER_WIDTH})`}
-          >
-            <Icon as={BxsCheckCircle} color="success.700" />
+          <InputRightElement sx={inputStyles.success}>
+            <Icon as={BxsCheckCircle} />
           </InputRightElement>
         )}
         <NumberInputStepper>

diff --git a/frontend/src/theme/components/NumberInput.ts b/frontend/src/theme/components/NumberInput.ts
@@ -2,21 +2,19 @@ import { ComponentMultiStyleConfig } from '@chakra-ui/theme'
 
 import { Input } from './Input'
 
-const parts = ['root', 'field', 'stepper', 'stepperGroup']
-
-const { variants, defaultProps } = Input
+const parts = ['root', 'field', 'success', 'stepper', 'stepperGroup']
 
 /**
  * CSS variable string that refers to the right input field padding to
  * accomodate the number stepper.
  *
  * See https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/number-input.ts#L10.
  */
-export const SX_FIELD_PADDING = '--number-input-field-padding'
+const SX_FIELD_PADDING = '--number-input-field-padding'
 /**
  * CSS variable string that refers to the width of the current stepper.
  */
-export const SX_STEPPER_WIDTH = '--number-input-stepper-width'
+const SX_STEPPER_WIDTH = '--number-input-stepper-width'
 
 const baseStyleRoot = {
   [SX_STEPPER_WIDTH]: '2.75rem',
@@ -59,6 +57,26 @@ export const NumberInput: ComponentMultiStyleConfig = {
       },
     },
   },
-  variants,
-  defaultProps,
+  variants: {
+    ...Input.variants,
+    outline: (props: Record<string, any>) => {
+      const { isSuccess } = props
+      const inputOutlineStyles = Input.variants.outline(props)
+
+      return {
+        ...inputOutlineStyles,
+        field: {
+          ...inputOutlineStyles.field,
+          paddingInlineEnd: isSuccess
+            ? `calc(var(${SX_STEPPER_WIDTH}) + 2.5rem)`
+            : undefined,
+        },
+        success: {
+          ...inputOutlineStyles.success,
+          mr: `var(${SX_STEPPER_WIDTH})`,
+        },
+      }
+    },
+  },
+  defaultProps: Input.defaultProps,
 }