diff --git a/packages/console/src/ds-components/FormField/index.module.scss b/packages/console/src/ds-components/FormField/index.module.scss index ed38b54a9..8516be515 100644 --- a/packages/console/src/ds-components/FormField/index.module.scss +++ b/packages/console/src/ds-components/FormField/index.module.scss @@ -35,8 +35,11 @@ color: var(--color-text-secondary); } - .featureTag { + .tagsWrapper { + display: flex; + align-items: center; margin-left: _.unit(2); + gap: _.unit(1); } } diff --git a/packages/console/src/ds-components/FormField/index.tsx b/packages/console/src/ds-components/FormField/index.tsx index 45a0fcc3a..bcad6fe39 100644 --- a/packages/console/src/ds-components/FormField/index.tsx +++ b/packages/console/src/ds-components/FormField/index.tsx @@ -4,7 +4,7 @@ import type { ReactElement, ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; 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 DynamicT from '../DynamicT'; @@ -27,6 +27,7 @@ export type Props = { readonly headlineClassName?: string; readonly tip?: ToggleTipProps['content']; readonly featureTag?: FeatureTagProps; + readonly isBeta?: boolean; }; function FormField({ @@ -40,9 +41,11 @@ function FormField({ headlineSpacing = 'default', tip, featureTag, + isBeta, headlineClassName, }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const hasTags = Boolean(featureTag) || Boolean(isBeta); return (
@@ -66,7 +69,12 @@ function FormField({ )} - {featureTag && } + {hasTags && ( +
+ {featureTag && } + {isBeta && } +
+ )} {isRequired &&
{t('general.required')}
}
diff --git a/packages/console/src/pages/SignInExperience/PageContent/Branding/CustomUiForm/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/Branding/CustomUiForm/index.tsx index 2d8475300..182932888 100644 --- a/packages/console/src/pages/SignInExperience/PageContent/Branding/CustomUiForm/index.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/Branding/CustomUiForm/index.tsx @@ -69,6 +69,7 @@ function CustomUiForm() { {isCloud && (