From 712437edc73f5cb578e6f07226c23aae6a9f2ffe Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 25 Aug 2026 09:49:10 -0600
Subject: [PATCH] Align custom policy details with the Figma create modal so
 the add-field control, copy, and labels match the intended styling.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../CustomMethodCardWizard.container.tsx      |  2 +
 .../CustomMethodCardWizard.view.tsx           |  2 +-
 .../CustomMethodCardWizardBlocksList.view.tsx |  2 +-
 ...CustomMethodCardWizardFieldBodies.view.tsx |  8 +--
 app/components/buttons/Vertical/Vertical.tsx  |  2 +-
 .../AddCustomField.container.tsx              |  2 +-
 .../AddCustomField/AddCustomField.types.ts    |  2 +-
 .../AddCustomField/AddCustomField.view.tsx    | 64 +++++++------------
 app/components/modals/Create/Create.view.tsx  |  2 +-
 .../customRule/customMethodCardWizard.json    |  4 +-
 ...unicationMethodsScreenPersistence.test.tsx |  6 +-
 .../CoreValuesSelectScreen.test.tsx           | 48 +++++++++++++-
 tests/components/FinalReviewPage.test.tsx     |  4 +-
 13 files changed, 88 insertions(+), 60 deletions(-)

diff --git a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.container.tsx b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.container.tsx
index e745f6d..4c5f8bd 100644
--- a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.container.tsx
+++ b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.container.tsx
@@ -388,6 +388,7 @@ const CustomMethodCardWizardContainer = memo<CustomMethodCardWizardProps>(
 
     const handleSelectFieldType = useCallback((ft: AddCustomFieldType) => {
       setEditingBlockId(null);
+      setAddFieldExpanded(false);
       resetFieldTypeDrafts();
       setFieldTypeModal(ft);
       fieldModalSnapshotRef.current = JSON.stringify({
@@ -531,6 +532,7 @@ const CustomMethodCardWizardContainer = memo<CustomMethodCardWizardProps>(
       });
       setFieldTypeModal(null);
       setEditingBlockId(null);
+      setAddFieldExpanded(false);
       fieldModalSnapshotRef.current = null;
     }, [
       badgeBlockTitle,
diff --git a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx
index 29cbb79..7d80080 100644
--- a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx
+++ b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx
@@ -90,7 +90,7 @@ function CustomMethodCardWizardViewComponent({
         />
       ) : null}
       {!fieldTypeModal && wizardStep === 3 ? (
-        <div className="flex w-full flex-col gap-4 pt-1">
+        <div className="flex w-full flex-col gap-6">
           {draftFieldBlocks.length > 0 ? (
             <CustomMethodCardWizardBlocksList
               blocks={draftFieldBlocks}
diff --git a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
index 7c08fd2..ad7e875 100644
--- a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
+++ b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
@@ -43,7 +43,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
 }: CustomMethodCardWizardBlocksListViewProps) {
   return (
     <ul
-      className="flex list-none flex-col gap-2 p-0 pt-1"
+      className="flex list-none flex-col gap-2 p-0"
       aria-label={listLabel}
     >
       {blocks.map((block, index) => {
diff --git a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx
index aba6e85..1c471f5 100644
--- a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx
+++ b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx
@@ -53,11 +53,9 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
           maxLength={CUSTOM_METHOD_CARD_WIZARD_MAX_FIELD_CHARS}
         />
         <div className="flex flex-col gap-2">
-          <InputLabel
-            label={copy.text.placeholderLabel}
-            size="s"
-            palette="default"
-          />
+          <label className="text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]">
+            {copy.text.placeholderLabel}
+          </label>
           <TextArea
             formHeader={false}
             appearance="embedded"
diff --git a/app/components/buttons/Vertical/Vertical.tsx b/app/components/buttons/Vertical/Vertical.tsx
index 19c3c0c..0b5aac9 100644
--- a/app/components/buttons/Vertical/Vertical.tsx
+++ b/app/components/buttons/Vertical/Vertical.tsx
@@ -28,7 +28,7 @@ function VerticalComponent({
   "data-testid": dataTestId,
 }: VerticalProps) {
   const base =
-    "box-border flex w-[90px] shrink-0 cursor-pointer flex-col items-center gap-[var(--spacing-scale-008)] rounded-[var(--spacing-scale-004)] border border-solid border-[var(--color-border-default-brand-primary)] bg-transparent px-[var(--spacing-scale-008)] py-[var(--spacing-scale-012)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60";
+    "box-border flex w-full min-w-[90px] cursor-pointer flex-col items-center gap-[var(--spacing-scale-008)] rounded-[var(--spacing-scale-004)] border border-solid border-[var(--color-border-default-brand-primary)] bg-transparent px-[var(--spacing-scale-008)] py-[var(--spacing-scale-012)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60";
 
   return (
     <button
diff --git a/app/components/controls/AddCustomField/AddCustomField.container.tsx b/app/components/controls/AddCustomField/AddCustomField.container.tsx
index caaa433..1de1683 100644
--- a/app/components/controls/AddCustomField/AddCustomField.container.tsx
+++ b/app/components/controls/AddCustomField/AddCustomField.container.tsx
@@ -7,7 +7,7 @@ import type { AddCustomFieldProps, AddCustomFieldType } from "./AddCustomField.t
 
 /**
  * Figma: "Add Custom Field" control — Community Rule System (`20235:12994`).
- * Collapsed CTA expands to a 2×2 field-type picker (per-type modals deferred).
+ * Collapsed CTA expands to a four-tile field-type picker.
  */
 const AddCustomFieldContainer = memo<AddCustomFieldProps>(
   ({ active, onPressAdd, onSelectFieldType, className = "" }) => {
diff --git a/app/components/controls/AddCustomField/AddCustomField.types.ts b/app/components/controls/AddCustomField/AddCustomField.types.ts
index b8d8def..7fc8d28 100644
--- a/app/components/controls/AddCustomField/AddCustomField.types.ts
+++ b/app/components/controls/AddCustomField/AddCustomField.types.ts
@@ -11,7 +11,7 @@ export const ADD_CUSTOM_FIELD_TYPE_ICONS = {
 } as const satisfies Record<AddCustomFieldType, IconName>;
 
 export interface AddCustomFieldProps {
-  /** When true, show the 2×2 field-type grid; when false, show the primary CTA. */
+  /** When true, show the four field-type tiles; when false, show the primary CTA. */
   active: boolean;
   onPressAdd?: () => void;
   onSelectFieldType?: (type: AddCustomFieldType) => void;
diff --git a/app/components/controls/AddCustomField/AddCustomField.view.tsx b/app/components/controls/AddCustomField/AddCustomField.view.tsx
index a6b2177..4b34dad 100644
--- a/app/components/controls/AddCustomField/AddCustomField.view.tsx
+++ b/app/components/controls/AddCustomField/AddCustomField.view.tsx
@@ -38,15 +38,6 @@ function FieldTypeButton({
   );
 }
 
-/**
- * Stable block height for collapsed vs expanded so the Create dialog (`top-1/2 -translate-y-1/2`)
- * does not shrink and re-center when toggling `active`.
- *
- * - Collapsed CTA: `py-12` (48+48) + inner row (`py-3` + 20px icon/line) ≈ 140px border-box.
- * - Expanded: inner `p-4` (32) + Vertical tile (py 12+12, gap 8, 32px icon, 18px label) ≈ 114px — shorter without this floor.
- */
-const ADD_CUSTOM_FIELD_SHELL_MIN_H_PX = 140;
-
 function AddCustomFieldViewComponent({
   active,
   onPressAdd,
@@ -55,17 +46,12 @@ function AddCustomFieldViewComponent({
   fieldTypeLabels,
   className,
 }: AddCustomFieldViewProps) {
-  const shellStyle = {
-    minHeight: ADD_CUSTOM_FIELD_SHELL_MIN_H_PX,
-  } as const;
-
   if (!active) {
     return (
       <button
         type="button"
         onClick={onPressAdd}
-        style={shellStyle}
-        className={`flex w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 py-12 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
+        className={`flex h-[88px] w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
       >
         <span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3">
           <svg
@@ -89,35 +75,33 @@ function AddCustomFieldViewComponent({
     );
   }
 
-  const expandedShellClasses = ["flex w-full shrink-0 flex-col", className ?? ""]
+  const expandedShellClasses = ["flex w-full shrink-0", className ?? ""]
     .join(" ")
     .trim();
 
   return (
-    <div className={expandedShellClasses} style={shellStyle}>
-      <div className="flex w-full flex-col gap-3 rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] p-4">
-        <div className="flex w-full flex-row flex-nowrap justify-center gap-3 overflow-x-auto max-sm:justify-start">
-          <FieldTypeButton
-            type="text"
-            label={fieldTypeLabels.text}
-            onSelect={onSelectFieldType}
-          />
-          <FieldTypeButton
-            type="badges"
-            label={fieldTypeLabels.badges}
-            onSelect={onSelectFieldType}
-          />
-          <FieldTypeButton
-            type="upload"
-            label={fieldTypeLabels.upload}
-            onSelect={onSelectFieldType}
-          />
-          <FieldTypeButton
-            type="proportion"
-            label={fieldTypeLabels.proportion}
-            onSelect={onSelectFieldType}
-          />
-        </div>
+    <div className={expandedShellClasses}>
+      <div className="grid w-full grid-cols-4 gap-3">
+        <FieldTypeButton
+          type="text"
+          label={fieldTypeLabels.text}
+          onSelect={onSelectFieldType}
+        />
+        <FieldTypeButton
+          type="badges"
+          label={fieldTypeLabels.badges}
+          onSelect={onSelectFieldType}
+        />
+        <FieldTypeButton
+          type="upload"
+          label={fieldTypeLabels.upload}
+          onSelect={onSelectFieldType}
+        />
+        <FieldTypeButton
+          type="proportion"
+          label={fieldTypeLabels.proportion}
+          onSelect={onSelectFieldType}
+        />
       </div>
     </div>
   );
diff --git a/app/components/modals/Create/Create.view.tsx b/app/components/modals/Create/Create.view.tsx
index 62eecfb..7db1283 100644
--- a/app/components/modals/Create/Create.view.tsx
+++ b/app/components/modals/Create/Create.view.tsx
@@ -59,7 +59,7 @@ export function CreateView({
       {headerContent !== undefined ? (
         <div className="shrink-0">{headerContent}</div>
       ) : title || description ? (
-        <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
+        <div className="bg-[var(--color-surface-default-primary)] px-[24px] shrink-0">
           <ContentLockup
             title={title}
             description={description}
diff --git a/messages/en/create/customRule/customMethodCardWizard.json b/messages/en/create/customRule/customMethodCardWizard.json
index 81bd65a..8073f04 100644
--- a/messages/en/create/customRule/customMethodCardWizard.json
+++ b/messages/en/create/customRule/customMethodCardWizard.json
@@ -24,7 +24,7 @@
     "dragHandleAriaLabel": "Drag to reorder this field"
   },
   "footer": {
-    "finalize": "Finalize"
+    "finalize": "Finalize policy"
   },
   "editModal": {
     "noCustomFieldsYet": "No custom fields yet.",
@@ -36,7 +36,7 @@
     "clearFileLabel": "Clear file"
   },
   "addCustomField": {
-    "cta": "Add",
+    "cta": "Add Custom Field",
     "fieldTypes": {
       "text": "Text",
       "badges": "Badges",
diff --git a/tests/components/CommunicationMethodsScreenPersistence.test.tsx b/tests/components/CommunicationMethodsScreenPersistence.test.tsx
index a9da359..9ec30d7 100644
--- a/tests/components/CommunicationMethodsScreenPersistence.test.tsx
+++ b/tests/components/CommunicationMethodsScreenPersistence.test.tsx
@@ -442,7 +442,7 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
     expect(
       screen.getByRole("button", { name: "Core Principle & Scope" }),
     ).toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: "Finalize" }));
+    fireEvent.click(screen.getByRole("button", { name: "Finalize policy" }));
 
     await waitFor(() => {
       expect(latest.customMethodCardMetaById?.[customId]?.label).toBe(
@@ -493,7 +493,7 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
     });
     fireEvent.click(screen.getByRole("button", { name: "Next" }));
     fireEvent.click(screen.getByRole("button", { name: "Next" }));
-    fireEvent.click(screen.getByRole("button", { name: "Finalize" }));
+    fireEvent.click(screen.getByRole("button", { name: "Finalize policy" }));
 
     await waitFor(() => {
       expect(latest.customMethodCardMetaById?.signal?.label).toBe(
@@ -546,7 +546,7 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
     fireEvent.dragStart(rows[0], { dataTransfer });
     fireEvent.drop(rows[2], { dataTransfer });
 
-    fireEvent.click(screen.getByRole("button", { name: "Finalize" }));
+    fireEvent.click(screen.getByRole("button", { name: "Finalize policy" }));
 
     await waitFor(() => {
       expect(
diff --git a/tests/components/CoreValuesSelectScreen.test.tsx b/tests/components/CoreValuesSelectScreen.test.tsx
index 02dce53..1861485 100644
--- a/tests/components/CoreValuesSelectScreen.test.tsx
+++ b/tests/components/CoreValuesSelectScreen.test.tsx
@@ -235,7 +235,7 @@ describe("CoreValuesSelectScreen", () => {
     fireEvent.dragStart(rows[0], { dataTransfer });
     fireEvent.drop(rows[1], { dataTransfer });
 
-    fireEvent.click(screen.getByRole("button", { name: "Finalize" }));
+    fireEvent.click(screen.getByRole("button", { name: "Finalize policy" }));
 
     await waitFor(() => {
       expect(
@@ -288,9 +288,53 @@ describe("CoreValuesSelectScreen", () => {
         target: { value: "A community-authored value." },
       });
       fireEvent.click(screen.getByRole("button", { name: "Next" }));
-      fireEvent.click(await screen.findByRole("button", { name: "Finalize" }));
+      expect(
+        await screen.findByText("Custom policy details"),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Add Custom Field" }),
+      ).toBeInTheDocument();
+      fireEvent.click(await screen.findByRole("button", { name: "Finalize policy" }));
     }
 
+    it("collapses the field-type picker after adding a custom field", async () => {
+      renderWithProviders(<CoreValuesSelectScreen />);
+      fireEvent.click(screen.getByRole("button", { name: "Add value" }));
+      fireEvent.change(await screen.findByPlaceholderText("Policy name"), {
+        target: { value: CUSTOM_LABEL },
+      });
+      fireEvent.click(screen.getByRole("button", { name: "Next" }));
+      fireEvent.change(
+        await screen.findByPlaceholderText("Policy description"),
+        { target: { value: "A community-authored value." } },
+      );
+      fireEvent.click(screen.getByRole("button", { name: "Next" }));
+      expect(
+        await screen.findByText("Custom policy details"),
+      ).toBeInTheDocument();
+
+      const wizard = screen.getByRole("dialog");
+      fireEvent.click(
+        within(wizard).getByRole("button", { name: "Add Custom Field" }),
+      );
+      fireEvent.click(within(wizard).getByRole("button", { name: "Text" }));
+      fireEvent.change(
+        await screen.findByPlaceholderText("Add your text block title"),
+        { target: { value: "Policy title" } },
+      );
+      fireEvent.click(screen.getByRole("button", { name: "Add field" }));
+
+      expect(
+        await within(wizard).findByRole("button", { name: "Add Custom Field" }),
+      ).toBeInTheDocument();
+      expect(
+        within(wizard).queryByRole("button", { name: "Text" }),
+      ).not.toBeInTheDocument();
+      expect(
+        within(wizard).getByRole("button", { name: "Policy title" }),
+      ).toBeInTheDocument();
+    });
+
     it("opens the empty custom-policy wizard from Add value", async () => {
       renderWithProviders(<CoreValuesSelectScreen />);
       fireEvent.click(screen.getByRole("button", { name: "Add value" }));
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
index 090ea2c..8ba5ac3 100644
--- a/tests/components/FinalReviewPage.test.tsx
+++ b/tests/components/FinalReviewPage.test.tsx
@@ -829,7 +829,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     fireEvent.change(nameInput, { target: { value: "Custom Signal header" } });
     fireEvent.click(screen.getByRole("button", { name: "Next" }));
     fireEvent.click(screen.getByRole("button", { name: "Next" }));
-    fireEvent.click(screen.getByRole("button", { name: "Finalize" }));
+    fireEvent.click(screen.getByRole("button", { name: "Finalize policy" }));
 
     await waitFor(() => {
       expect(latest.customMethodCardMetaById?.signal?.label).toBe(
@@ -883,7 +883,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     fireEvent.dragStart(rows[0], { dataTransfer });
     fireEvent.drop(rows[2], { dataTransfer });
 
-    fireEvent.click(screen.getByRole("button", { name: "Finalize" }));
+    fireEvent.click(screen.getByRole("button", { name: "Finalize policy" }));
 
     await waitFor(() => {
       expect(