From e8c6dc990c48c78d57976e398c5ac48243b3ee97 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui.lau@gmail.com>
Date: Wed, 30 Jun 2021 16:29:57 +0800
Subject: [PATCH] feat: update NumberInput theming to align with Input style

---
 .../components/NumberInput/NumberInput.tsx    | 43 ++++++-------------
 frontend/src/theme/components/NumberInput.ts  | 32 +++++++++++---
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/NumberInput/NumberInput.tsx b/frontend/src/components/NumberInput/NumberInput.tsx
index 6451278c66..20780bfcd3 100644
--- 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
index 4eacdd782e..3824e610bf 100644
--- a/frontend/src/theme/components/NumberInput.ts
+++ b/frontend/src/theme/components/NumberInput.ts
@@ -2,9 +2,7 @@ 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
@@ -12,11 +10,11 @@ const { variants, defaultProps } = Input
  *
  * 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,
 }