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

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
@@ -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}
@@ -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;
@@ -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}
@@ -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}
/>
);
});
@@ -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;
@@ -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"