0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00

chore(console): add beta tag to bring your ui feature (#6484)

This commit is contained in:
Charles Zhao 2024-08-21 13:21:49 +08:00 committed by GitHub
parent 332131a0f1
commit 56649b570f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 3 deletions

View file

@ -35,8 +35,11 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
.featureTag { .tagsWrapper {
display: flex;
align-items: center;
margin-left: _.unit(2); margin-left: _.unit(2);
gap: _.unit(1);
} }
} }

View file

@ -4,7 +4,7 @@ import type { ReactElement, ReactNode } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Tip from '@/assets/icons/tip.svg?react'; import Tip from '@/assets/icons/tip.svg?react';
import FeatureTag, { type Props as FeatureTagProps } from '@/components/FeatureTag'; import FeatureTag, { BetaTag, type Props as FeatureTagProps } from '@/components/FeatureTag';
import type DangerousRaw from '../DangerousRaw'; import type DangerousRaw from '../DangerousRaw';
import DynamicT from '../DynamicT'; import DynamicT from '../DynamicT';
@ -27,6 +27,7 @@ export type Props = {
readonly headlineClassName?: string; readonly headlineClassName?: string;
readonly tip?: ToggleTipProps['content']; readonly tip?: ToggleTipProps['content'];
readonly featureTag?: FeatureTagProps; readonly featureTag?: FeatureTagProps;
readonly isBeta?: boolean;
}; };
function FormField({ function FormField({
@ -40,9 +41,11 @@ function FormField({
headlineSpacing = 'default', headlineSpacing = 'default',
tip, tip,
featureTag, featureTag,
isBeta,
headlineClassName, headlineClassName,
}: Props) { }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const hasTags = Boolean(featureTag) || Boolean(isBeta);
return ( return (
<div className={classNames(styles.field, className)}> <div className={classNames(styles.field, className)}>
@ -66,7 +69,12 @@ function FormField({
</IconButton> </IconButton>
</ToggleTip> </ToggleTip>
)} )}
{hasTags && (
<div className={styles.tagsWrapper}>
{featureTag && <FeatureTag {...featureTag} className={styles.featureTag} />} {featureTag && <FeatureTag {...featureTag} className={styles.featureTag} />}
{isBeta && <BetaTag />}
</div>
)}
<Spacer /> <Spacer />
{isRequired && <div className={styles.required}>{t('general.required')}</div>} {isRequired && <div className={styles.required}>{t('general.required')}</div>}
</div> </div>

View file

@ -69,6 +69,7 @@ function CustomUiForm() {
</FormField> </FormField>
{isCloud && ( {isCloud && (
<FormField <FormField
isBeta
title="sign_in_exp.custom_ui.bring_your_ui_title" title="sign_in_exp.custom_ui.bring_your_ui_title"
description={ description={
<Trans <Trans