maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve password peek positioning accross app and website. (#4810)

This commit is contained in:
Jeroen Reumkens 2022-10-03 21:52:57 +02:00 committed by GitHub
parent 75589db569
commit 4438ca2a63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/ui/v2/core/form/fields.tsx
View File

@ -202,12 +202,12 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
{addOnLeading || addOnSuffix ? (
<div
className={classNames(
" mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1",
"relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1",
addOnSuffix && "group flex-row-reverse"
)}>
<div
className={classNames(
"h-9 border border-gray-300",
"addon-wrapper h-9 border border-gray-300",
addOnFilled && "bg-gray-100",
addOnLeading && "rounded-l-md border-r-0 px-3",
addOnSuffix && "rounded-r-md border-l-0 px-3"
@ -250,40 +250,39 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
props,
ref
) {
/*const { t } = useLocale();
const { t } = useLocale();
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const toggleIsPasswordVisible = useCallback(
() => setIsPasswordVisible(!isPasswordVisible),
[isPasswordVisible, setIsPasswordVisible]
);
const textLabel = isPasswordVisible ? t("hide_password") : t("show_password");
*/
return (
<div className="relative">
<div className="relative [&_.group:hover_.addon-wrapper]:border-gray-400 [&_.group:focus-within_.addon-wrapper]:border-neutral-300">
<InputField
type={/* isPasswordVisible ? "text" : */ "password"}
placeholder={/* isPasswordVisible ? "0hMy4P4ssw0rd" : */ "•••••••••••••"}
type={isPasswordVisible ? "text" : "password"}
placeholder={isPasswordVisible ? "0hMy4P4ssw0rd" : "•••••••••••••"}
ref={ref}
{...props}
className={classNames("mb-0 pr-10", props.className)}
className={classNames("mb-0 border-r-0 pr-10", props.className)}
addOnFilled={false}
addOnSuffix={
<Tooltip content={textLabel}>
<button
className="absolute right-3 bottom-0 h-9 text-gray-900"
type="button"
onClick={() => toggleIsPasswordVisible()}>
{isPasswordVisible ? (
<EyeOff className="h-4 stroke-[2.5px]" />
) : (
<Eye className="h-4 stroke-[2.5px]" />
)}
<span className="sr-only">{textLabel}</span>
</button>
</Tooltip>
}
/>
{/*<Tooltip content={textLabel}>
<button
className={classNames(
"absolute right-3 h-9 text-gray-900",
props.hintErrors ? "top-[22px]" : "bottom-0"
)}
type="button"
onClick={() => toggleIsPasswordVisible()}>
{isPasswordVisible ? (
<EyeOff className="h-4 stroke-[2.5px]" />
) : (
<Eye className="h-4 stroke-[2.5px]" />
)}
<span className="sr-only">{textLabel}</span>
</button>
</Tooltip>*/}
</div>
);
});