Show a footer Remove on selected create-flow modules so removal is not kebab-only.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/components/FinalReviewChipEditModal.tsx

@@ -4,7 +4,8 @@
  * Final-review chip modal: **Core values** and **method** facets share the
  * kebab → **Duplicate** (values only when under the cap) / **Remove** pattern
  * from the create-card facet modals (`Create` +
- * {@link buildCustomRuleModalKebabMenu}). Values and method chips also offer
+ * {@link buildCustomRuleModalKebabMenu}), plus a footer **Remove** when the
+ * chip is already in the selection. Values and method chips also offer
  * **Customize**, which opens {@link CustomMethodCardWizard} prefilled from the
  * chip. Fields are editable on open; Save persists body edits without renaming.
  *
@@ -1073,12 +1074,23 @@ export function FinalReviewChipEditModal({
     );
   }, [subtitle, target]);
 
+  const showFooterRemove =
+    target != null &&
+    (target.groupKey === "coreValues" || isChipInSelection);
+
   return (
     <>
       <Create
       isOpen={isOpen && !addCustomWizardOpen}
       onClose={handleModalClose}
       onBack={handleModalClose}
+      showBackButton={!showFooterRemove}
+      showRemoveButton={showFooterRemove}
+      onRemove={
+        target?.groupKey === "coreValues"
+          ? handleRemoveCoreValueFromModal
+          : handleRemoveSelectedFromModal
+      }
       backdropVariant="blurredYellow"
       headerContent={headerContent}
       showNextButton={true}

app/(app)/create/screens/card/CommunicationMethodsScreen.tsx

@@ -9,10 +9,10 @@
  * reuse `CardStack` / `CreateFlowStepShell` as needed.
  *
  * Card click opens the Figma create modal (node `20246-15829`) with three
- * editable sections rendered by {@link CommunicationMethodEditFields}. The primary
+ * editable sections rendered by {@link CommunicationMethodEditFields}. The
- * action is **Add Platform** for an unselected card and **Save** for a selected
+ * primary action is **Add Platform** for an unselected card and **Save** for a
- * card. **Remove** is available from the kebab (same behavior as legacy
+ * selected card. **Remove** is a danger footer button on selected cards (and
- * footer remove via {@link removeMethodCardFromFacetSelection}).
+ * remains in the kebab) via {@link removeMethodCardFromFacetSelection}.
  */
 
 import { useState, useCallback, useMemo, useRef } from "react";
@@ -747,6 +747,8 @@ export function CommunicationMethodsScreen() {
         nextButtonText={modalConfig.nextButtonText}
         showBackButton={false}
         showNextButton={showMethodModalPrimary}
+        showRemoveButton={isSelectedCardModal}
+        onRemove={handleRemoveSelectedFromModal}
         backdropVariant="blurredYellow"
         kebabTriggerAriaLabel={modalKebabMenu.triggerAriaLabel}
         kebabMenuAriaLabel={modalKebabMenu.menuAriaLabel}

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -748,6 +748,8 @@ export function ConflictManagementScreen() {
         nextButtonText={modalConfig.nextButtonText}
         showBackButton={false}
         showNextButton={showMethodModalPrimary}
+        showRemoveButton={isSelectedCardModal}
+        onRemove={handleRemoveSelectedFromModal}
         backdropVariant="blurredYellow"
         kebabTriggerAriaLabel={modalKebabMenu.triggerAriaLabel}
         kebabMenuAriaLabel={modalKebabMenu.menuAriaLabel}

app/(app)/create/screens/card/MembershipMethodsScreen.tsx

@@ -741,6 +741,8 @@ export function MembershipMethodsScreen() {
         nextButtonText={modalConfig.nextButtonText}
         showBackButton={false}
         showNextButton={showMethodModalPrimary}
+        showRemoveButton={isSelectedCardModal}
+        onRemove={handleRemoveSelectedFromModal}
         backdropVariant="blurredYellow"
         kebabTriggerAriaLabel={modalKebabMenu.triggerAriaLabel}
         kebabMenuAriaLabel={modalKebabMenu.menuAriaLabel}

app/(app)/create/screens/review/FinalReviewScreen.tsx

@@ -97,8 +97,9 @@ export function FinalReviewScreen({
   /**
    * Two modals coexist on this screen:
    *
-   * - {@link FinalReviewChipEditModal} — core values + method chips: kebab
+   * - {@link FinalReviewChipEditModal} — core values + method chips: footer
-   *   Remove; values also offer Duplicate under the five-chip cap; method chips
+   *   **Remove** when the chip is already selected, plus kebab **Remove**;
+   *   values also offer Duplicate under the five-chip cap; method chips
    *   offer Customize (prefilled custom-policy wizard). Fields are editable on
    *   open. Save writes `{group}DetailsById` and field blocks; wizard Finalize
    *   also writes `customMethodCardMetaById`.

app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx

@@ -811,6 +811,8 @@ export function DecisionApproachesScreen() {
         nextButtonText={modalConfig.nextButtonText}
         showBackButton={false}
         showNextButton={showMethodModalPrimary}
+        showRemoveButton={isSelectedCardModal}
+        onRemove={handleRemoveSelectedFromModal}
         backdropVariant="blurredYellow"
         kebabTriggerAriaLabel={modalKebabMenu.triggerAriaLabel}
         kebabMenuAriaLabel={modalKebabMenu.menuAriaLabel}

app/(app)/create/screens/select/CoreValuesSelectScreen.tsx

@@ -751,6 +751,8 @@ export function CoreValuesSelectScreen() {
           }
           showBackButton={false}
           showNextButton={showFooterPrimary}
+          showRemoveButton={modalSession === "editing"}
+          onRemove={handleRemoveFromKebab}
           onNext={handleModalConfirm}
           nextButtonText={
             modalSession === "editing"

app/components/modals/Create/Create.container.tsx

@@ -21,10 +21,13 @@ const CreateContainer = memo<CreateProps>(
     footerClassName,
     showBackButton = true,
     showNextButton = true,
+    showRemoveButton = false,
     onBack,
     onNext,
+    onRemove,
     backButtonText = "Back",
     nextButtonText = "Next",
+    removeButtonText,
     nextButtonDisabled = false,
     currentStep,
     totalSteps,
@@ -56,10 +59,13 @@ const CreateContainer = memo<CreateProps>(
         footerClassName={footerClassName}
         showBackButton={showBackButton}
         showNextButton={showNextButton}
+        showRemoveButton={showRemoveButton}
         onBack={onBack}
         onNext={onNext}
+        onRemove={onRemove}
         backButtonText={backButtonText}
         nextButtonText={nextButtonText}
+        removeButtonText={removeButtonText}
         nextButtonDisabled={nextButtonDisabled}
         currentStep={currentStep}
         totalSteps={totalSteps}

app/components/modals/Create/Create.types.ts

@@ -16,10 +16,13 @@ export interface CreateProps {
   footerClassName?: string;
   showBackButton?: boolean;
   showNextButton?: boolean;
+  showRemoveButton?: boolean;
   onBack?: () => void;
   onNext?: () => void;
+  onRemove?: () => void;
   backButtonText?: string;
   nextButtonText?: string;
+  removeButtonText?: string;
   nextButtonDisabled?: boolean;
   currentStep?: number;
   totalSteps?: number;
@@ -58,10 +61,13 @@ export interface CreateViewProps {
   footerClassName?: string;
   showBackButton: boolean;
   showNextButton: boolean;
+  showRemoveButton: boolean;
   onBack?: () => void;
   onNext?: () => void;
+  onRemove?: () => void;
   backButtonText: string;
   nextButtonText: string;
+  removeButtonText?: string;
   nextButtonDisabled: boolean;
   currentStep?: number;
   totalSteps?: number;

app/components/modals/Create/Create.view.tsx

@@ -17,10 +17,13 @@ export function CreateView({
   footerClassName,
   showBackButton,
   showNextButton,
+  showRemoveButton,
   onBack,
   onNext,
+  onRemove,
   backButtonText,
   nextButtonText,
+  removeButtonText,
   nextButtonDisabled,
   currentStep,
   totalSteps,
@@ -76,10 +79,13 @@ export function CreateView({
       <ModalFooter
         showBackButton={showBackButton}
         showNextButton={showNextButton}
+        showRemoveButton={showRemoveButton}
         onBack={onBack}
         onNext={onNext}
+        onRemove={onRemove}
         backButtonText={backButtonText}
         nextButtonText={nextButtonText}
+        removeButtonText={removeButtonText}
         nextButtonDisabled={nextButtonDisabled}
         currentStep={currentStep}
         totalSteps={totalSteps}

app/components/modals/ModalFooter/ModalFooter.container.tsx

@@ -14,12 +14,14 @@ const ModalFooterContainer = memo<ModalFooterProps>((props) => {
   const t = useTranslation("common");
   const resolvedBackText = props.backButtonText ?? t("buttons.back");
   const resolvedNextText = props.nextButtonText ?? t("buttons.next");
+  const resolvedRemoveText = props.removeButtonText ?? t("buttons.remove");
 
   return (
     <ModalFooterView
       {...props}
       backButtonText={resolvedBackText}
       nextButtonText={resolvedNextText}
+      removeButtonText={resolvedRemoveText}
     />
   );
 });

app/components/modals/ModalFooter/ModalFooter.types.ts

@@ -1,8 +1,14 @@
 export interface ModalFooterProps {
   showBackButton?: boolean;
   showNextButton?: boolean;
+  /**
+   * Danger **Remove** in the left footer slot (selected create-flow modules).
+   * Takes the left slot instead of Back when both would otherwise show.
+   */
+  showRemoveButton?: boolean;
   onBack?: () => void;
   onNext?: () => void;
+  onRemove?: () => void;
   /**
    * Custom back button text. If not provided, uses localized "Back" from common.json
    */
@@ -11,6 +17,10 @@ export interface ModalFooterProps {
    * Custom next button text. If not provided, uses localized "Next" from common.json
    */
   nextButtonText?: string;
+  /**
+   * Custom remove button text. If not provided, uses localized "Remove" from common.json
+   */
+  removeButtonText?: string;
   nextButtonDisabled?: boolean;
   currentStep?: number;
   totalSteps?: number;

app/components/modals/ModalFooter/ModalFooter.view.tsx

@@ -7,10 +7,13 @@ import type { ModalFooterProps } from "./ModalFooter.types";
 export function ModalFooterView({
   showBackButton = false,
   showNextButton = false,
+  showRemoveButton = false,
   onBack,
   onNext,
+  onRemove,
   backButtonText,
   nextButtonText,
+  removeButtonText,
   nextButtonDisabled = false,
   currentStep,
   totalSteps,
@@ -22,12 +25,26 @@ export function ModalFooterView({
     stepperProp !== undefined
       ? stepperProp
       : currentStep !== undefined && totalSteps !== undefined;
+  const showStartBack = showBackButton && !showRemoveButton;
 
   return (
     <div
       className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300,12px)] rounded-br-[var(--radius-300,12px)] shrink-0 relative ${className}`}
     >
-      {showBackButton && (
+      {showRemoveButton && (
+        <div className="absolute left-[16px] top-[12px]">
+          <Button
+            buttonType="danger"
+            palette="default"
+            size="medium"
+            onClick={onRemove}
+          >
+            {removeButtonText}
+          </Button>
+        </div>
+      )}
+
+      {showStartBack && (
         <div className="absolute left-[16px] top-[12px]">
           <Button
             buttonType="outline"

messages/en/common.json

@@ -7,6 +7,7 @@
     "askOrganizer": "Ask an organizer",
     "back": "Back",
     "next": "Next",
+    "remove": "Remove",
     "finish": "Finish"
   },
   "ariaLabels": {

stories/modals/Create.stories.js

@@ -29,6 +29,9 @@ export default {
     showNextButton: {
       control: { type: "boolean" },
     },
+    showRemoveButton: {
+      control: { type: "boolean" },
+    },
     nextButtonDisabled: {
       control: { type: "boolean" },
     },
@@ -196,6 +199,28 @@ export const LoginYellowBackdrop = {
   },
   render: Template,
 };
+export const SelectedModuleRemove = {
+  args: {
+    isOpen: true,
+    title: "Lazy Consensus",
+    description:
+      "A decision is assumed approved unless objections are raised within a specified timeframe.",
+    backdropVariant: "blurredYellow",
+    children: (
+      <div className="space-y-4">
+        <p className="text-[var(--color-content-default-primary)]">
+          Selected module: danger Remove on the left, Save on the right.
+        </p>
+      </div>
+    ),
+    showBackButton: false,
+    showRemoveButton: true,
+    showNextButton: true,
+    nextButtonText: "Save",
+    nextButtonDisabled: false,
+  },
+  render: Template,
+};
 export const NextButtonDisabled = {
   args: {
     isOpen: true,

stories/modals/ModalFooter.stories.js

@@ -11,6 +11,11 @@ export default {
       control: "boolean",
       description: "Whether to render the back button on the left",
     },
+    showRemoveButton: {
+      control: "boolean",
+      description:
+        "Whether to render a danger Remove button in the left footer slot",
+    },
     showNextButton: {
       control: "boolean",
       description: "Whether to render the next button on the right",
@@ -41,6 +46,7 @@ export default {
     },
     onBack: { action: "back-clicked" },
     onNext: { action: "next-clicked" },
+    onRemove: { action: "remove-clicked" },
   },
 };
 
@@ -69,3 +75,12 @@ export const NextOnly = {
     showNextButton: true,
   },
 };
+
+export const RemoveAndSave = {
+  args: {
+    showBackButton: false,
+    showRemoveButton: true,
+    showNextButton: true,
+    nextButtonText: "Save",
+  },
+};

tests/components/ConflictManagementScreen.test.tsx

@@ -27,6 +27,9 @@ describe("ConflictManagementScreen", () => {
     for (const field of fields) {
       expect(field).toBeEnabled();
     }
+    expect(
+      within(dialog).queryByRole("button", { name: "Remove" }),
+    ).not.toBeInTheDocument();
     fireEvent.click(
       within(dialog).getByRole("button", { name: "More options" }),
     );

tests/components/CoreValuesSelectScreen.test.tsx

@@ -26,6 +26,9 @@ describe("CoreValuesSelectScreen", () => {
     expect(
       within(dialog).getByRole("button", { name: "Add Value" }),
     ).toBeInTheDocument();
+    expect(
+      within(dialog).queryByRole("button", { name: "Remove" }),
+    ).not.toBeInTheDocument();
     fireEvent.click(within(dialog).getByRole("button", { name: "More options" }));
     expect(
       screen.getByRole("menuitem", { name: "Customize" }),
@@ -124,6 +127,9 @@ describe("CoreValuesSelectScreen", () => {
     });
     fireEvent.click(screen.getByText("Accessibility"));
     const editing = await screen.findByRole("dialog");
+    expect(
+      within(editing).getByRole("button", { name: "Remove" }),
+    ).toBeInTheDocument();
     fireEvent.click(
       within(editing).getByRole("button", { name: "More options" }),
     );

tests/components/Create.test.tsx

@@ -169,6 +169,41 @@ describe("Create", () => {
     expect(screen.getByText("Custom Footer")).toBeInTheDocument();
   });
 
+  it("renders a danger Remove in the left footer when showRemoveButton is true", () => {
+    const onRemove = vi.fn();
+    renderWithProviders(
+      <Create
+        {...defaultProps}
+        showBackButton={false}
+        showRemoveButton
+        onRemove={onRemove}
+        showNextButton
+        nextButtonText="Save"
+      />,
+    );
+    const removeButton = screen.getByRole("button", { name: "Remove" });
+    expect(removeButton).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Back" })).not.toBeInTheDocument();
+    fireEvent.click(removeButton);
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it("prefers Remove over Back when both would occupy the left slot", () => {
+    renderWithProviders(
+      <Create
+        {...defaultProps}
+        showBackButton
+        showRemoveButton
+        onBack={vi.fn()}
+        onRemove={vi.fn()}
+        showNextButton
+        nextButtonText="Save"
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Remove" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Back" })).not.toBeInTheDocument();
+  });
+
   it("uses responsive width at baseline (matches Login modal)", () => {
     renderWithProviders(
       <Create {...defaultProps}>Create dialog content</Create>,

tests/components/FinalReviewPage.test.tsx

@@ -519,7 +519,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("closes the chip edit modal when Back is pressed", async () => {
+  it("closes the chip edit modal when the close control is pressed", async () => {
     render(
       <FinalReviewWithStateProbe
         onState={() => {}}
@@ -532,12 +532,41 @@ describe("FinalReviewScreen — chip detail modal", () => {
 
     fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
     const dialog = await screen.findByRole("dialog");
-    fireEvent.click(within(dialog).getByRole("button", { name: "Back" }));
+    expect(
+      within(dialog).getByRole("button", { name: "Remove" }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    fireEvent.click(within(dialog).getByLabelText("Close dialog"));
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     });
   });
 
+  it("deselects a method chip from the footer Remove", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <FinalReviewWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+        initial={{
+          title: "Oak Park Commons",
+          selectedCommunicationMethodIds: ["signal"],
+        }}
+      />,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    const dialog = await screen.findByRole("dialog");
+    fireEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    expect(latest.selectedCommunicationMethodIds ?? []).not.toContain("signal");
+  });
+
 });
 
 /**

tests/components/MembershipMethodsScreen.test.tsx

@@ -27,6 +27,9 @@ describe("MembershipMethodsScreen", () => {
     for (const field of fields) {
       expect(field).toBeEnabled();
     }
+    expect(
+      within(dialog).queryByRole("button", { name: "Remove" }),
+    ).not.toBeInTheDocument();
     fireEvent.click(
       within(dialog).getByRole("button", { name: "More options" }),
     );

tests/pages/communication-methods.test.jsx

@@ -40,7 +40,7 @@ describe("Create flow communication-methods page", () => {
     expect(within(dialog).getByText("Add Platform")).toBeInTheDocument();
   });
 
-  test("re-opening a selected method shows Save; Remove is in the kebab", async () => {
+  test("re-opening a selected method shows Save and footer Remove; Remove stays in the kebab", async () => {
     const user = userEvent.setup();
     render(<CommunicationMethodsScreen />);
 
@@ -54,8 +54,8 @@ describe("Create flow communication-methods page", () => {
     await user.click(signalCards[0]);
     const dialogAgain = screen.getByRole("dialog");
     expect(
-      within(dialogAgain).queryByRole("button", { name: "Remove" }),
+      within(dialogAgain).getByRole("button", { name: "Remove" }),
-    ).not.toBeInTheDocument();
+    ).toBeInTheDocument();
     expect(
       within(dialogAgain).queryByRole("button", { name: "Add Platform" }),
     ).not.toBeInTheDocument();
@@ -67,6 +67,30 @@ describe("Create flow communication-methods page", () => {
     expect(screen.getByRole("menuitem", { name: "Remove" })).toBeInTheDocument();
   });
 
+  test("Remove from the footer deselects the method", async () => {
+    const user = userEvent.setup();
+    render(<CommunicationMethodsScreen />);
+
+    const signalCards = screen.getAllByRole("button", {
+      name: /Signal: Encrypted messaging/,
+    });
+    await user.click(signalCards[0]);
+    await user.click(
+      within(screen.getByRole("dialog")).getByRole("button", {
+        name: "Add Platform",
+      }),
+    );
+
+    expect(signalCards[0]).toHaveTextContent("SELECTED");
+
+    await user.click(signalCards[0]);
+    await user.click(
+      within(screen.getByRole("dialog")).getByRole("button", { name: "Remove" }),
+    );
+
+    expect(signalCards[0]).not.toHaveTextContent("SELECTED");
+  });
+
   test("Remove from the kebab deselects the method", async () => {
     const user = userEvent.setup();
     render(<CommunicationMethodsScreen />);

tests/pages/decision-approaches.test.jsx

@@ -244,7 +244,7 @@ describe("Create flow decision-approaches page", () => {
     expect(screen.getByText("SELECTED")).toBeInTheDocument();
   });
 
-  test("re-opening a selected approach shows Save; Remove is in the kebab", async () => {
+  test("re-opening a selected approach shows Save and footer Remove; Remove stays in the kebab", async () => {
     const user = userEvent.setup();
     render(<DecisionApproachesScreen />);
 
@@ -262,8 +262,8 @@ describe("Create flow decision-approaches page", () => {
     await user.click(card);
     const dialogAgain = screen.getByRole("dialog");
     expect(
-      within(dialogAgain).queryByRole("button", { name: "Remove" }),
+      within(dialogAgain).getByRole("button", { name: "Remove" }),
-    ).not.toBeInTheDocument();
+    ).toBeInTheDocument();
     expect(
       within(dialogAgain).queryByRole("button", { name: "Add Approach" }),
     ).not.toBeInTheDocument();
@@ -275,6 +275,30 @@ describe("Create flow decision-approaches page", () => {
     expect(screen.getByRole("menuitem", { name: "Remove" })).toBeInTheDocument();
   });
 
+  test("Remove from the footer deselects the approach", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    const card = screen.getByRole("button", {
+      name: /Lazy Consensus: A decision is assumed approved/,
+    });
+    await user.click(card);
+    await user.click(
+      within(await screen.findByRole("dialog")).getByRole("button", {
+        name: "Add Approach",
+      }),
+    );
+
+    expect(card).toHaveTextContent("SELECTED");
+
+    await user.click(card);
+    await user.click(
+      within(screen.getByRole("dialog")).getByRole("button", { name: "Remove" }),
+    );
+
+    expect(card).not.toHaveTextContent("SELECTED");
+  });
+
   test("Save on a selected approach persists the edit and closes", async () => {
     const user = userEvent.setup();
     render(<DecisionApproachesScreen />);