[sparkle] - fix: adjust button wrapping based on disabled state

- Buttons now render directly without wrapping in SheetClose if disabled - Ensures correct visual and interaction pattern for disabled state buttons in SheetFooter
dust-tt · Nov 28, 2024 · 03b3668 · 03b3668
1 parent 3fec337
commit 03b3668
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/sparkle/src/components/Sheet.tsx b/sparkle/src/components/Sheet.tsx
@@ -128,12 +128,22 @@ const SheetFooter = ({
     )}
     {...props}
   >
-    {(leftButtonProps || rightButtonProps) && (
-      <SheetClose className={sheetCloseClassName}>
-        {leftButtonProps && <Button {...leftButtonProps} />}
-        {rightButtonProps && <Button {...rightButtonProps} />}
-      </SheetClose>
-    )}
+    {leftButtonProps &&
+      (leftButtonProps.disabled ? (
+        <Button {...leftButtonProps} />
+      ) : (
+        <SheetClose className={sheetCloseClassName}>
+          <Button {...leftButtonProps} />
+        </SheetClose>
+      ))}
+    {rightButtonProps &&
+      (rightButtonProps.disabled ? (
+        <Button {...rightButtonProps} />
+      ) : (
+        <SheetClose className={sheetCloseClassName}>
+          <Button {...rightButtonProps} />
+        </SheetClose>
+      ))}
     {children}
   </div>
 );

diff --git a/sparkle/src/stories/Sheet.stories.tsx b/sparkle/src/stories/Sheet.stories.tsx
@@ -65,7 +65,7 @@ export function SheetDemo() {
           <SheetFooter
             sheetCloseClassName="s-flex s-gap-2"
             leftButtonProps={{ label: "Cancel", variant: "warning" }}
-            rightButtonProps={{ label: "Save" }}
+            rightButtonProps={{ label: "Save", disabled: true }}
           />
         </SheetContent>
       </Sheet>