From 1c7de47a9326f326d5ec98fd9336037f5b75bf94 Mon Sep 17 00:00:00 2001 From: Wang Sijie Date: Wed, 11 May 2022 11:52:13 +0800 Subject: [PATCH] feat(console): form field tooltip (#786) --- .../src/components/FormField/index.module.scss | 8 +++++++- .../console/src/components/FormField/index.tsx | 17 +++++++++++++++-- packages/console/src/icons/Tip.tsx | 12 ++++++++++++ .../SignInExperience/components/TermsForm.tsx | 6 +++++- packages/phrases/src/locales/en.ts | 1 + packages/phrases/src/locales/zh-cn.ts | 1 + 6 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 packages/console/src/icons/Tip.tsx diff --git a/packages/console/src/components/FormField/index.module.scss b/packages/console/src/components/FormField/index.module.scss index d7be57aa3..e7abb98d5 100644 --- a/packages/console/src/components/FormField/index.module.scss +++ b/packages/console/src/components/FormField/index.module.scss @@ -8,7 +8,7 @@ .headline { display: flex; - justify-content: space-between; + align-items: center; margin-bottom: _.unit(1); .title { @@ -16,6 +16,12 @@ color: var(--color-text); } + .icon { + margin-left: _.unit(1); + width: 16px; + height: 16px; + } + .required { font: var(--font-body-medium); color: var(--color-caption); diff --git a/packages/console/src/components/FormField/index.tsx b/packages/console/src/components/FormField/index.tsx index 19bf7f9ff..e6f673c4f 100644 --- a/packages/console/src/components/FormField/index.tsx +++ b/packages/console/src/components/FormField/index.tsx @@ -1,9 +1,13 @@ import { I18nKey } from '@logto/phrases'; import classNames from 'classnames'; -import React, { ReactElement, ReactNode } from 'react'; +import React, { ReactElement, ReactNode, useRef } from 'react'; import { useTranslation } from 'react-i18next'; +import Tip from '@/icons/Tip'; + import DangerousRaw from '../DangerousRaw'; +import Spacer from '../Spacer'; +import Tooltip from '../Tooltip'; import * as styles from './index.module.scss'; type Props = { @@ -11,15 +15,24 @@ type Props = { children: ReactNode; isRequired?: boolean; className?: string; + tooltip?: I18nKey; }; -const FormField = ({ title, children, isRequired, className }: Props) => { +const FormField = ({ title, children, isRequired, className, tooltip }: Props) => { const { t } = useTranslation(); + const tipRef = useRef(null); return (
{typeof title === 'string' ? t(title) : title}
+ {tooltip && ( +
+ + +
+ )} + {isRequired &&
{t('admin_console.form.required')}
}
{children} diff --git a/packages/console/src/icons/Tip.tsx b/packages/console/src/icons/Tip.tsx new file mode 100644 index 000000000..f1277540d --- /dev/null +++ b/packages/console/src/icons/Tip.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Tip = () => ( + + + +); + +export default Tip; diff --git a/packages/console/src/pages/SignInExperience/components/TermsForm.tsx b/packages/console/src/pages/SignInExperience/components/TermsForm.tsx index 25ceecb8a..4d13eefe9 100644 --- a/packages/console/src/pages/SignInExperience/components/TermsForm.tsx +++ b/packages/console/src/pages/SignInExperience/components/TermsForm.tsx @@ -23,7 +23,11 @@ const TermsForm = () => { label={t('sign_in_exp.terms_of_use.description')} /> - + diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 5a9dbcfd1..4aaafeb5b 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -408,6 +408,7 @@ const translation = { 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ', terms_of_use: 'Terms of use', terms_of_use_placeholder: 'Terms of use url', + terms_of_use_tip: 'Terms of use url', }, sign_in_methods: { title: 'SIGN IN METHODS', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 2c1341dfd..f7fb0272e 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -404,6 +404,7 @@ const translation = { 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ', terms_of_use: 'Terms of use', terms_of_use_placeholder: 'Terms of use url', + terms_of_use_tip: 'Terms of use url', }, sign_in_methods: { title: '登录方式',