From 79ccd27673c3eefec8d6d8c4e34968354bb79489 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Thu, 9 Mar 2023 10:43:29 +0800
Subject: [PATCH] fix(console): text input in AC should support both 36px and
 44px heights (#3337)

---
 .../console/src/components/TextInput/index.module.scss     | 6 +++++-
 packages/console/src/components/TextInput/index.tsx        | 7 +++++--
 .../Profile/containers/BasicUserInfoUpdateModal/index.tsx  | 1 +
 .../pages/Profile/containers/ChangePasswordModal/index.tsx | 2 ++
 .../src/pages/Profile/containers/LinkEmailModal/index.tsx  | 1 +
 .../pages/Profile/containers/VerifyPasswordModal/index.tsx | 1 +
 6 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/console/src/components/TextInput/index.module.scss b/packages/console/src/components/TextInput/index.module.scss
index 6f6e52c2f..330f033cd 100644
--- a/packages/console/src/components/TextInput/index.module.scss
+++ b/packages/console/src/components/TextInput/index.module.scss
@@ -16,10 +16,14 @@
   transition-timing-function: ease-in-out;
   transition-duration: 0.2s;
   padding: 0 _.unit(3);
-  height: 44px;
+  height: 36px;
   background: var(--color-layer-1);
   font: var(--font-body-2);
 
+  &.large {
+    height: 44px;
+  }
+
   &.withIcon {
     display: flex;
     align-items: center;
diff --git a/packages/console/src/components/TextInput/index.tsx b/packages/console/src/components/TextInput/index.tsx
index 684031d5d..8f17f6492 100644
--- a/packages/console/src/components/TextInput/index.tsx
+++ b/packages/console/src/components/TextInput/index.tsx
@@ -4,11 +4,12 @@ import { cloneElement, forwardRef } from 'react';
 
 import * as styles from './index.module.scss';
 
-type Props = HTMLProps<HTMLInputElement> & {
+type Props = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
   hasError?: boolean;
   errorMessage?: string;
   icon?: ReactElement;
   suffix?: ReactElement;
+  size?: 'medium' | 'large';
 };
 
 const TextInput = (
@@ -21,6 +22,7 @@ const TextInput = (
     className,
     readOnly,
     value,
+    size = 'medium',
     ...rest
   }: Props,
   reference: ForwardedRef<HTMLInputElement>
@@ -33,7 +35,8 @@ const TextInput = (
           hasError && styles.error,
           icon && styles.withIcon,
           disabled && styles.disabled,
-          readOnly && styles.readOnly
+          readOnly && styles.readOnly,
+          styles[size]
         )}
       >
         {icon && <span className={styles.icon}>{icon}</span>}
diff --git a/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx b/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
index 43a62dd18..d37c11d39 100644
--- a/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
@@ -109,6 +109,7 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
             })}
             placeholder={getInputPlaceholder()}
             errorMessage={errors[field]?.message}
+            size="large"
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 void onSubmit();
diff --git a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
index 601f39bbb..0fe1ccb35 100644
--- a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
@@ -116,6 +116,7 @@ const ChangePasswordModal = () => {
             <ClearInput />
           </IconButton>
         }
+        size="large"
         onKeyDown={onKeyDown}
       />
       <TextInput
@@ -135,6 +136,7 @@ const ChangePasswordModal = () => {
             <ClearInput />
           </IconButton>
         }
+        size="large"
         onKeyDown={onKeyDown}
       />
       <Checkbox
diff --git a/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx b/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
index fa9ce63c2..f972806ac 100644
--- a/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
@@ -62,6 +62,7 @@ const LinkEmailModal = () => {
             t('profile.link_account.identical_email_address'),
         })}
         errorMessage={errors.email?.message}
+        size="large"
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
             onSubmit();
diff --git a/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx b/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
index 997ada230..7e4549b1c 100644
--- a/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
@@ -88,6 +88,7 @@ const VerifyPasswordModal = () => {
             {showPassword ? <PasswordShowIcon /> : <PasswordHideIcon />}
           </IconButton>
         }
+        size="large"
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
             onSubmit();