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

refactor(console): add headline spacing prop for FormField component (#4433)

Browse source
This commit is contained in:
Xiao Yijun 2023-09-06 10:23:19 +08:00 • committed by GitHub
parent 1453e1a2a1
commit 9e606d65a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 24 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/ds-components/FormField/index.module.scss
View file

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

10
packages/console/src/ds-components/FormField/index.tsx
View file

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

4
packages/console/src/onboarding/pages/SignInExperience/index.module.scss
View file

@ -23,10 +23,6 @@
font: var(--font-title-1);
}
.cardFieldHeadline {
margin-bottom: _.unit(2);
}
.authnSelector {
grid-template-columns: repeat(2, 1fr);
}

17
packages/console/src/onboarding/pages/SignInExperience/index.tsx
View file

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

4
packages/console/src/onboarding/pages/Welcome/index.module.scss
View file

@ -24,8 +24,4 @@
justify-content: center;
min-height: 60px;
}
.cardFieldHeadline {
margin-bottom: _.unit(2);
}
}

22
packages/console/src/onboarding/pages/Welcome/index.tsx
View file

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

4
packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.module.scss
View file

@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;
.imageFieldHeadline {
margin-bottom: _.unit(2);
}
.description {
color: var(--color-text-secondary);
font: var(--font-body-2);

4
packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.tsx
View file

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

7
packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
View file

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

4
packages/console/src/pages/SignInExperience/tabs/index.module.scss
View file

@ -57,7 +57,3 @@
font: var(--font-body-2);
color: var(--color-text-secondary);
}
.imageFieldHeadline {
margin-bottom: _.unit(2);
}