feat(console): form field tooltip (#786)

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

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<HTMLDivElement>(null);
 
   return (
     <div className={classNames(styles.field, className)}>
       <div className={styles.headline}>
         <div className={styles.title}>{typeof title === 'string' ? t(title) : title}</div>
+        {tooltip && (
+          <div ref={tipRef} className={styles.icon}>
+            <Tip />
+            <Tooltip domRef={tipRef} content={t(tooltip)} />
+          </div>
+        )}
+        <Spacer />
         {isRequired && <div className={styles.required}>{t('admin_console.form.required')}</div>}
       </div>
       {children}

packages/console/src/icons/Tip.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Tip = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.99992 7.33331C7.82311 7.33331 7.65354 7.40355 7.52852 7.52858C7.40349 7.6536 7.33325 7.82317 7.33325 7.99998V10.6666C7.33325 10.8435 7.40349 11.013 7.52852 11.1381C7.65354 11.2631 7.82311 11.3333 7.99992 11.3333C8.17673 11.3333 8.3463 11.2631 8.47133 11.1381C8.59635 11.013 8.66659 10.8435 8.66659 10.6666V7.99998C8.66659 7.82317 8.59635 7.6536 8.47133 7.52858C8.3463 7.40355 8.17673 7.33331 7.99992 7.33331ZM8.25325 4.71998C8.09095 4.6533 7.9089 4.6533 7.74659 4.71998C7.66475 4.75171 7.58999 4.79929 7.52659 4.85998C7.4677 4.92478 7.42035 4.99919 7.38659 5.07998C7.34927 5.1591 7.331 5.24586 7.33325 5.33331C7.33275 5.42105 7.34956 5.50803 7.38274 5.58925C7.41592 5.67048 7.4648 5.74435 7.52659 5.80665C7.59139 5.86553 7.6658 5.91289 7.74659 5.94665C7.84759 5.98814 7.95723 6.00419 8.06589 5.99339C8.17454 5.98259 8.27888 5.94526 8.36973 5.88469C8.46058 5.82412 8.53517 5.74217 8.58693 5.64603C8.63869 5.54989 8.66604 5.4425 8.66659 5.33331C8.66413 5.1568 8.59508 4.98774 8.47325 4.85998C8.40985 4.79929 8.33509 4.75171 8.25325 4.71998ZM7.99992 1.33331C6.68138 1.33331 5.39245 1.72431 4.29612 2.45685C3.19979 3.18939 2.34531 4.23058 1.84072 5.44876C1.33614 6.66693 1.20412 8.00738 1.46135 9.30058C1.71859 10.5938 2.35353 11.7817 3.28588 12.714C4.21823 13.6464 5.40611 14.2813 6.69932 14.5385C7.99253 14.7958 9.33297 14.6638 10.5511 14.1592C11.7693 13.6546 12.8105 12.8001 13.5431 11.7038C14.2756 10.6075 14.6666 9.31852 14.6666 7.99998C14.6666 7.1245 14.4941 6.25759 14.1591 5.44876C13.8241 4.63992 13.333 3.90499 12.714 3.28593C12.0949 2.66688 11.36 2.17581 10.5511 1.84078C9.74231 1.50575 8.8754 1.33331 7.99992 1.33331ZM7.99992 13.3333C6.94509 13.3333 5.91394 13.0205 5.03688 12.4345C4.15982 11.8484 3.47623 11.0155 3.07256 10.041C2.6689 9.06642 2.56328 7.99406 2.76907 6.9595C2.97485 5.92493 3.48281 4.97462 4.22869 4.22874C4.97457 3.48286 5.92487 2.97491 6.95944 2.76912C7.99401 2.56334 9.06636 2.66895 10.0409 3.07262C11.0154 3.47629 11.8484 4.15988 12.4344 5.03694C13.0205 5.914 13.3333 6.94515 13.3333 7.99998C13.3333 9.41447 12.7714 10.771 11.7712 11.7712C10.771 12.7714 9.41441 13.3333 7.99992 13.3333Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Tip;

packages/console/src/pages/SignInExperience/components/TermsForm.tsx

@@ -23,7 +23,11 @@ const TermsForm = () => {
           label={t('sign_in_exp.terms_of_use.description')}
         />
       </FormField>
-      <FormField isRequired={enabled} title="admin_console.sign_in_exp.terms_of_use.terms_of_use">
+      <FormField
+        isRequired={enabled}
+        title="admin_console.sign_in_exp.terms_of_use.terms_of_use"
+        tooltip="admin_console.sign_in_exp.terms_of_use.terms_of_use_tip"
+      >
         <TextInput {...register('termsOfUse.contentUrl', { required: enabled })} />
       </FormField>
     </>

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',

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: '登录方式',