From 9e606d65a79e061b136ac54e2df024d8ffb07d82 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 6 Sep 2023 10:23:19 +0800
Subject: [PATCH] refactor(console): add headline spacing prop for `FormField`
 component (#4433)

---
 .../ds-components/FormField/index.module.scss |  4 ++++
 .../src/ds-components/FormField/index.tsx     | 10 ++++++++-
 .../pages/SignInExperience/index.module.scss  |  4 ----
 .../pages/SignInExperience/index.tsx          | 17 +++-----------
 .../pages/Welcome/index.module.scss           |  4 ----
 .../src/onboarding/pages/Welcome/index.tsx    | 22 ++++---------------
 .../index.module.scss                         |  4 ----
 .../EmailServiceConnectorForm/index.tsx       |  4 ++--
 .../tabs/Branding/BrandingForm.tsx            |  7 ++----
 .../SignInExperience/tabs/index.module.scss   |  4 ----
 10 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/packages/console/src/ds-components/FormField/index.module.scss b/packages/console/src/ds-components/FormField/index.module.scss
index 79191cc71..a9b14e612 100644
--- a/packages/console/src/ds-components/FormField/index.module.scss
+++ b/packages/console/src/ds-components/FormField/index.module.scss
@@ -11,6 +11,10 @@
   align-items: center;
   margin-bottom: _.unit(1);
 
+  &.withLargeSpacing {
+    margin-bottom: _.unit(2);
+  }
+
   .title {
     font: var(--font-label-2);
     color: var(--color-text);
diff --git a/packages/console/src/ds-components/FormField/index.tsx b/packages/console/src/ds-components/FormField/index.tsx
index b73e2de5d..b5c045667 100644
--- a/packages/console/src/ds-components/FormField/index.tsx
+++ b/packages/console/src/ds-components/FormField/index.tsx
@@ -20,6 +20,7 @@ export type Props = {
   isRequired?: boolean;
   isMultiple?: boolean;
   className?: string;
+  headlineSpacing?: 'default' | 'large';
   headlineClassName?: string;
   tip?: ToggleTipProps['content'];
 };
@@ -30,6 +31,7 @@ function FormField({
   isRequired,
   isMultiple,
   className,
+  headlineSpacing = 'default',
   tip,
   headlineClassName,
 }: Props) {
@@ -37,7 +39,13 @@ function FormField({
 
   return (
     <div className={classNames(styles.field, className)}>
-      <div className={classNames(styles.headline, headlineClassName)}>
+      <div
+        className={classNames(
+          styles.headline,
+          headlineSpacing === 'large' && styles.withLargeSpacing,
+          headlineClassName
+        )}
+      >
         <div className={styles.title}>
           {typeof title === 'string' ? <DynamicT forKey={title} /> : title}
           {isMultiple && (
diff --git a/packages/console/src/onboarding/pages/SignInExperience/index.module.scss b/packages/console/src/onboarding/pages/SignInExperience/index.module.scss
index 3cf5921cf..49ab6c146 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/index.module.scss
+++ b/packages/console/src/onboarding/pages/SignInExperience/index.module.scss
@@ -23,10 +23,6 @@
       font: var(--font-title-1);
     }
 
-    .cardFieldHeadline {
-      margin-bottom: _.unit(2);
-    }
-
     .authnSelector {
       grid-template-columns: repeat(2, 1fr);
     }
diff --git a/packages/console/src/onboarding/pages/SignInExperience/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
index f6a65c441..0b44080f4 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
@@ -176,10 +176,7 @@ function SignInExperience() {
                 )}
               />
             </FormField>
-            <FormField
-              title="cloud.sie.identifier_field"
-              headlineClassName={styles.cardFieldHeadline}
-            >
+            <FormField title="cloud.sie.identifier_field" headlineSpacing="large">
               <Controller
                 name="identifier"
                 control={control}
@@ -196,11 +193,7 @@ function SignInExperience() {
                 )}
               />
             </FormField>
-            <FormField
-              isMultiple
-              title="cloud.sie.authn_field"
-              headlineClassName={styles.cardFieldHeadline}
-            >
+            <FormField isMultiple title="cloud.sie.authn_field" headlineSpacing="large">
               <Controller
                 name="authentications"
                 control={control}
@@ -220,11 +213,7 @@ function SignInExperience() {
                 )}
               />
             </FormField>
-            <FormField
-              isMultiple
-              title="cloud.sie.social_field"
-              headlineClassName={styles.cardFieldHeadline}
-            >
+            <FormField isMultiple title="cloud.sie.social_field" headlineSpacing="large">
               <Controller
                 name="socialTargets"
                 control={control}
diff --git a/packages/console/src/onboarding/pages/Welcome/index.module.scss b/packages/console/src/onboarding/pages/Welcome/index.module.scss
index db5eb884b..9cfa7c178 100644
--- a/packages/console/src/onboarding/pages/Welcome/index.module.scss
+++ b/packages/console/src/onboarding/pages/Welcome/index.module.scss
@@ -24,8 +24,4 @@
     justify-content: center;
     min-height: 60px;
   }
-
-  .cardFieldHeadline {
-    margin-bottom: _.unit(2);
-  }
 }
diff --git a/packages/console/src/onboarding/pages/Welcome/index.tsx b/packages/console/src/onboarding/pages/Welcome/index.tsx
index 23ccc088c..239a07fa7 100644
--- a/packages/console/src/onboarding/pages/Welcome/index.tsx
+++ b/packages/console/src/onboarding/pages/Welcome/index.tsx
@@ -61,10 +61,7 @@ function Welcome() {
           <div className={styles.title}>{t('cloud.welcome.title')}</div>
           <div className={styles.description}>{t('cloud.welcome.description')}</div>
           <form className={styles.form}>
-            <FormField
-              title="cloud.welcome.project_field"
-              headlineClassName={styles.cardFieldHeadline}
-            >
+            <FormField title="cloud.welcome.project_field" headlineSpacing="large">
               <Controller
                 control={control}
                 name="project"
@@ -81,11 +78,7 @@ function Welcome() {
             {/* Check whether it is a business use case */}
             {watch('project') === Project.Company && (
               <>
-                <FormField
-                  isMultiple
-                  title="cloud.welcome.title_field"
-                  headlineClassName={styles.cardFieldHeadline}
-                >
+                <FormField isMultiple title="cloud.welcome.title_field" headlineSpacing="large">
                   <Controller
                     control={control}
                     name="titles"
@@ -108,10 +101,7 @@ function Welcome() {
                     {...register('companyName')}
                   />
                 </FormField>
-                <FormField
-                  title="cloud.welcome.company_size_field"
-                  headlineClassName={styles.cardFieldHeadline}
-                >
+                <FormField title="cloud.welcome.company_size_field" headlineSpacing="large">
                   <Controller
                     control={control}
                     name="companySize"
@@ -130,11 +120,7 @@ function Welcome() {
                 </FormField>
               </>
             )}
-            <FormField
-              isMultiple
-              title="cloud.welcome.reason_field"
-              headlineClassName={styles.cardFieldHeadline}
-            >
+            <FormField isMultiple title="cloud.welcome.reason_field" headlineSpacing="large">
               <Controller
                 control={control}
                 name="reasons"
diff --git a/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.module.scss b/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.module.scss
index 83abf16b9..ff7d8279a 100644
--- a/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.module.scss
@@ -1,9 +1,5 @@
 @use '@/scss/underscore' as _;
 
-.imageFieldHeadline {
-  margin-bottom: _.unit(2);
-}
-
 .description {
   color: var(--color-text-secondary);
   font: var(--font-body-2);
diff --git a/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.tsx b/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.tsx
index bcf265fc8..ed9c65838 100644
--- a/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.tsx
@@ -1,5 +1,5 @@
 import { urlRegEx } from '@logto/connector-kit';
-import { conditional, conditionalString } from '@silverhand/essentials';
+import { conditionalString } from '@silverhand/essentials';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -91,7 +91,7 @@ function EmailServiceConnectorForm({ extraInfo }: Props) {
       <FormField
         title="connector_details.logto_email.app_logo_field"
         tip={<DynamicT forKey="connector_details.logto_email.app_logo_tip" />}
-        headlineClassName={conditional(isUserAssetsServiceReady && styles.imageFieldHeadline)}
+        headlineSpacing={isUserAssetsServiceReady ? 'large' : 'default'}
       >
         {isUserAssetsServiceReady ? (
           <Controller
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
index 6421a5047..b7ceca240 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
@@ -74,7 +74,7 @@ function BrandingForm() {
               {t('sign_in_exp.branding.favicon')}
             </DangerousRaw>
           }
-          headlineClassName={styles.imageFieldHeadline}
+          headlineSpacing="large"
         >
           <LogoAndFaviconUploader />
         </FormField>
@@ -131,10 +131,7 @@ function BrandingForm() {
             )}
           </FormField>
           {isUserAssetsServiceReady ? (
-            <FormField
-              title="sign_in_exp.branding.dark_logo_image"
-              headlineClassName={styles.imageFieldHeadline}
-            >
+            <FormField title="sign_in_exp.branding.dark_logo_image" headlineSpacing="large">
               <Controller
                 name="branding.darkLogoUrl"
                 control={control}
diff --git a/packages/console/src/pages/SignInExperience/tabs/index.module.scss b/packages/console/src/pages/SignInExperience/tabs/index.module.scss
index deb44c26f..f6e6a2359 100644
--- a/packages/console/src/pages/SignInExperience/tabs/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/index.module.scss
@@ -57,7 +57,3 @@
   font: var(--font-body-2);
   color: var(--color-text-secondary);
 }
-
-.imageFieldHeadline {
-  margin-bottom: _.unit(2);
-}