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:
parent
332131a0f1
commit
56649b570f
3 changed files with 15 additions and 3 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Add table
Reference in a new issue