Fix modal actions (#1878)

dust-tt · Sep 29, 2023 · 3664192 · 3664192
1 parent 6dbe604
commit 3664192
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.91",
+  "version": "0.1.92",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

diff --git a/sparkle/src/components/Modal.tsx b/sparkle/src/components/Modal.tsx
@@ -4,7 +4,7 @@ import React, { Fragment } from "react";
 import { classNames } from "@sparkle/lib/utils";
 
 import { BarHeader, BarHeaderButtonBarProps } from "./BarHeader";
-import { ButtonProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 
 interface ModalProps {
   isOpen: boolean;
@@ -20,6 +20,7 @@ interface ModalProps {
 export function Modal({
   isOpen,
   onClose,
+  action,
   children,
   hasChanged,
   onSave,
@@ -78,6 +79,7 @@ export function Modal({
               >
                 <BarHeader
                   title={title || ""}
+                  leftActions={action ? <Button {...action} /> : undefined}
                   rightActions={<BarHeader.ButtonBar {...buttonBarProps} />}
                 />
                 <div

diff --git a/sparkle/src/stories/Modal.stories.tsx b/sparkle/src/stories/Modal.stories.tsx
@@ -31,6 +31,12 @@ export const ModalExample = () => {
       <Modal
         isOpen={isOpenWithActionAndChange}
         onClose={() => setIsOpenWithActionAndChange(false)}
+        action={{
+          labelVisible: true,
+          label: "An action",
+          variant: "tertiary",
+          size: "xs",
+        }}
         hasChanged={true}
       >
         <div className="s-mt-4 s-h-72 s-text-left">I'm the modal content</div>