CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-09-02 14:45:56 -06:00
co-authored by Cursor
parent df7051f33a
commit 84ef943df4
23 changed files with 251 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/create/components/FinalReviewChipEditModal.tsx
+13 -1
View File
@@ -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
+6 -4
View File
@@ -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
* action is **Add Platform** for an unselected card and **Save** for a selected
* card. **Remove** is available from the kebab (same behavior as legacy
* footer remove via {@link removeMethodCardFromFacetSelection}).
* editable sections rendered by {@link CommunicationMethodEditFields}. The
* primary action is **Add Platform** for an unselected card and **Save** for a
* selected card. **Remove** is a danger footer button on selected cards (and
* 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
+2
View File
@@ -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
+2
View File
@@ -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
+3 -2
View File
@@ -97,8 +97,9 @@ export function FinalReviewScreen({
/**
* Two modals coexist on this screen:
*
* - {@link FinalReviewChipEditModal} — core values + method chips: kebab
* Remove; values also offer Duplicate under the five-chip cap; method chips
* - {@link FinalReviewChipEditModal} — core values + method chips: footer
* **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
+2
View File
@@ -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
+2
View File
@@ -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
+6
View File
@@ -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
+6
View File
@@ -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
+6
View File
@@ -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
+2
View File
@@ -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
+10
View File
@@ -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
+18 -1
View File
@@ -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"