From 10e2395760c201917afe13ab803ab1464639dbb9 Mon Sep 17 00:00:00 2001
From: laurenashleigh <lauren.armstrong@grafana.com>
Date: Tue, 28 Oct 2025 09:26:41 +0000
Subject: [PATCH] Update UI to match designs

---
 .../components/AlertRuleDrawerForm.tsx        | 73 ++++++++++---------
 .../components/RuleConditionSection.tsx       | 21 +-----
 .../components/RuleDefinitionSection.tsx      | 21 +-----
 .../components/RuleNotificationSection.tsx    | 21 +-----
 4 files changed, 48 insertions(+), 88 deletions(-)

diff --git a/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx b/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx
index 41be22ab514..af327c43be9 100644
--- a/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx
+++ b/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx
@@ -82,47 +82,52 @@ export function AlertRuleDrawerForm({
       title={title ?? t('alerting.new-rule-from-panel-button.new-alert-rule', 'New alert rule')}
       onClose={onClose}
     >
-      <FormProvider {...methods}>
-        <RuleDefinitionSection type={RuleFormType.grafana} />
-        <div className={styles.divider} aria-hidden="true" />
-        <RuleConditionSection type={RuleFormType.grafana} />
-        <div className={styles.divider} aria-hidden="true" />
-        <RuleNotificationSection />
-        <div className={styles.footer}>
-          <Stack direction="row" gap={1} alignItems="center" justifyContent="flex-end">
-            <Button
-              variant="secondary"
-              type="button"
-              onClick={() => {
-                methods.reset(getDefaultFormValues(RuleFormType.grafana));
-                onClose();
-              }}
-            >
-              {t('alerting.common.cancel', 'Cancel')}
-            </Button>
-            {onContinueInAlerting && (
-              <Button variant="secondary" type="button" onClick={() => onContinueInAlerting(methods.getValues())}>
-                {t('alerting.simplified.continue-in-alerting', 'Continue in Alerting')}
+      <div className={styles.outer}>
+        <FormProvider {...methods}>
+          <RuleDefinitionSection type={RuleFormType.grafana} />
+          <div className={styles.divider} aria-hidden="true" />
+          <RuleConditionSection type={RuleFormType.grafana} />
+          <div className={styles.divider} aria-hidden="true" />
+          <RuleNotificationSection />
+          <div className={styles.footer}>
+            <Stack direction="row" gap={1} alignItems="center" justifyContent="flex-end">
+              <Button
+                variant="secondary"
+                type="button"
+                onClick={() => {
+                  methods.reset(getDefaultFormValues(RuleFormType.grafana));
+                  onClose();
+                }}
+              >
+                {t('alerting.common.cancel', 'Cancel')}
               </Button>
-            )}
-            <Button
-              variant="primary"
-              type="button"
-              onClick={methods.handleSubmit((values) => submit(values), onInvalid)}
-              disabled={methods.formState.isSubmitting}
-              icon={methods.formState.isSubmitting ? 'spinner' : undefined}
-            >
-              {t('alerting.simplified.create', 'Create')}
-            </Button>
-          </Stack>
-        </div>
-      </FormProvider>
+              {onContinueInAlerting && (
+                <Button variant="secondary" type="button" onClick={() => onContinueInAlerting(methods.getValues())}>
+                  {t('alerting.simplified.continue-in-alerting', 'Continue in Alerting')}
+                </Button>
+              )}
+              <Button
+                variant="primary"
+                type="button"
+                onClick={methods.handleSubmit((values) => submit(values), onInvalid)}
+                disabled={methods.formState.isSubmitting}
+                icon={methods.formState.isSubmitting ? 'spinner' : undefined}
+              >
+                {t('alerting.simplified.create', 'Create')}
+              </Button>
+            </Stack>
+          </div>
+        </FormProvider>
+      </div>
     </Drawer>
   );
 }
 
 function getStyles(theme: GrafanaTheme2) {
   return {
+    outer: css({
+      paddingLeft: theme.spacing(1),
+    }),
     divider: css({
       borderTop: `1px solid ${theme.colors.border.weak}`,
       margin: `${theme.spacing(3)} 0`,
diff --git a/public/app/features/alerting/unified/components/RuleConditionSection.tsx b/public/app/features/alerting/unified/components/RuleConditionSection.tsx
index 51df3c8c131..9bc444a8840 100644
--- a/public/app/features/alerting/unified/components/RuleConditionSection.tsx
+++ b/public/app/features/alerting/unified/components/RuleConditionSection.tsx
@@ -68,15 +68,13 @@ export function RuleConditionSection({ type }: { type: RuleFormType }) {
   return (
     <div className={base.section}>
       <div className={base.sectionHeaderRow}>
-        <span className={base.stepBadge}>
-          <Trans i18nKey="alerting.simplified.step-number-two">2</Trans>
-        </span>
         <div className={base.sectionHeader}>
+          {`2. `}
           <Trans i18nKey="alerting.simplified.condition.title">Condition</Trans>
         </div>
       </div>
 
-      <div className={base.contentIndented}>
+      <div>
         <Stack direction="column" gap={2}>
           <InlineFieldRow>
             {simpleCondition.whenField && (
@@ -157,23 +155,10 @@ function getStyles(theme: GrafanaTheme2) {
       marginBottom: theme.spacing(1),
     }),
     sectionHeader: css({
-      fontWeight: 600,
+      fontWeight: theme.typography.fontWeightRegular,
       fontSize: theme.typography.h4.fontSize,
       lineHeight: theme.typography.h4.lineHeight,
     }),
-    stepBadge: css({
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 20,
-      width: 20,
-      borderRadius: theme.shape.radius.circle,
-      background: theme.colors.primary.main,
-      color: theme.colors.text.maxContrast,
-      fontSize: theme.typography.bodySmall.fontSize,
-      fontWeight: 600,
-    }),
-    contentIndented: css({ marginLeft: `calc(20px + ${theme.spacing(1)})` }),
     paragraphRow: css({ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: theme.spacing(1) }),
     inlineField: css({ display: 'inline-flex' }),
   };
diff --git a/public/app/features/alerting/unified/components/RuleDefinitionSection.tsx b/public/app/features/alerting/unified/components/RuleDefinitionSection.tsx
index 14c9dec55e1..e2b449efe09 100644
--- a/public/app/features/alerting/unified/components/RuleDefinitionSection.tsx
+++ b/public/app/features/alerting/unified/components/RuleDefinitionSection.tsx
@@ -32,14 +32,12 @@ export function RuleDefinitionSection({ type }: { type: RuleFormType }) {
   return (
     <div className={styles.section}>
       <div className={styles.sectionHeaderRow}>
-        <span className={styles.stepBadge}>
-          <Trans i18nKey="alerting.simplified.step-number-one">1</Trans>
-        </span>
         <div className={styles.sectionHeader}>
+          {`1. `}
           <Trans i18nKey="alerting.simplified.rule-definition">Rule Definition</Trans>
         </div>
       </div>
-      <div className={styles.contentIndented}>
+      <div>
         <Stack direction="column" gap={2}>
           <Field
             noMargin
@@ -115,23 +113,10 @@ function getStyles(theme: GrafanaTheme2) {
       marginBottom: theme.spacing(1),
     }),
     sectionHeader: css({
-      fontWeight: 600,
+      fontWeight: theme.typography.fontWeightRegular,
       fontSize: theme.typography.h4.fontSize,
       lineHeight: theme.typography.h4.lineHeight,
     }),
-    stepBadge: css({
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 20,
-      width: 20,
-      borderRadius: theme.shape.radius.circle,
-      background: theme.colors.primary.main,
-      color: theme.colors.text.maxContrast,
-      fontSize: theme.typography.bodySmall.fontSize,
-      fontWeight: 600,
-    }),
-    contentIndented: css({ marginLeft: `calc(20px + ${theme.spacing(1)})` }),
     nameLabel: css({
       fontSize: theme.typography.bodySmall.fontSize,
       fontWeight: 500,
diff --git a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
index 4ba8261f006..8e90052ec37 100644
--- a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
+++ b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
@@ -50,15 +50,13 @@ export function RuleNotificationSection() {
   return (
     <div className={styles.section}>
       <div className={styles.sectionHeaderRow}>
-        <span className={styles.stepBadge}>
-          <Trans i18nKey="alerting.simplified.step-number-three">3</Trans>
-        </span>
         <div className={styles.sectionHeader}>
+          {`3. `}
           <Trans i18nKey="alerting.simplified.notification.title">Notification</Trans>
         </div>
       </div>
 
-      <div className={styles.contentIndented}>
+      <div>
         <Stack direction="column" gap={2}>
           <Stack direction="column" gap={1}>
             <Stack direction="column" gap={1}>
@@ -214,23 +212,10 @@ function getStyles(theme: GrafanaTheme2) {
       marginBottom: theme.spacing(1),
     }),
     sectionHeader: css({
-      fontWeight: 600,
+      fontWeight: theme.typography.fontWeightRegular,
       fontSize: theme.typography.h4.fontSize,
       lineHeight: theme.typography.h4.lineHeight,
     }),
-    stepBadge: css({
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 20,
-      width: 20,
-      borderRadius: theme.shape.radius.circle,
-      background: theme.colors.primary.main,
-      color: theme.colors.text.maxContrast,
-      fontSize: theme.typography.bodySmall.fontSize,
-      fontWeight: 600,
-    }),
-    contentIndented: css({ marginLeft: `calc(20px + ${theme.spacing(1)})` }),
     contentTopSpacer: css({ marginTop: theme.spacing(0.5) }),
     manualRoutingInline: css({
       display: 'inline-flex',