Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

fix(console): text input in AC should support both 36px and 44px heights (#3337)

Browse source
This commit is contained in:
Charles Zhao 2023-03-09 10:43:29 +08:00 • committed by GitHub
parent 1c5bdda02a
commit 79ccd27673
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/console/src/components/TextInput/index.module.scss
View file

@ -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;

7
packages/console/src/components/TextInput/index.tsx
View file

@ -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>}

1
packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
View file

@ -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();

2
packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
View file

@ -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

1
packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
View file

@ -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();

1
packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
View file

@ -88,6 +88,7 @@ const VerifyPasswordModal = () => {
{showPassword ? <PasswordShowIcon /> : <PasswordHideIcon />}
</IconButton>
}
size="large"
onKeyDown={(event) => {
if (event.key === 'Enter') {
onSubmit();