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 (