fix: move dialog footer to monorepo, ref leather-io/extension#5248

leather-io · Aug 21, 2024 · a7bb3b9 · a7bb3b9
1 parent 68bb507
commit a7bb3b9
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 5 deletions.
diff --git a/packages/ui/src/components/dialog/dialog-footer.web.tsx b/packages/ui/src/components/dialog/dialog-footer.web.tsx
@@ -0,0 +1,26 @@
+import { Flex, FlexProps } from 'leather-styles/jsx';
+
+interface DialogFooterProps extends FlexProps {
+  children: React.ReactNode;
+}
+
+export function DialogFooter({ children, ...props }: DialogFooterProps) {
+  return (
+    <Flex
+      gap="space.05"
+      p="space.05"
+      bottom={0}
+      width="100vw"
+      maxWidth="100%"
+      zIndex={1}
+      minHeight="footerHeight"
+      position="fixed"
+      borderBottomRadius="md"
+      bg="ink.background-primary"
+      borderTop="default"
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/components/dialog/dialog.web.stories.tsx b/packages/ui/src/components/dialog/dialog.web.stories.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
 
 import type { Meta } from '@storybook/react';
+import { Box, Flex } from 'leather-styles/jsx';
 
-import { Button } from '@leather.io/ui';
-
+import { Button } from '../button/button.web';
+import { DialogHeader } from './dialog-header.web';
 import { Dialog as Component } from './dialog.web';
 
 const meta: Meta<typeof Component> = {
@@ -20,11 +21,64 @@ export function Dialog() {
     <>
       <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
       <Component
-        header={<h1>Some Header</h1>}
+        header={<DialogHeader title="Leather" />}
+        isShowing={isShowing}
+        onClose={() => setIsShowing(false)}
+      >
+        <Box textAlign="center" height="60vh">
+          Let's start a dialogue.
+        </Box>
+      </Component>
+    </>
+  );
+}
+
+export function DialogWithFooter() {
+  const [isShowing, setIsShowing] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
+      <Component
+        header={<DialogHeader title="Send" />}
+        isShowing={isShowing}
+        onClose={() => setIsShowing(false)}
+        footer={
+          <Button fullWidth onClick={() => setIsShowing(false)}>
+            Close
+          </Button>
+        }
+      >
+        <Box textAlign="center" height="60vh">
+          Let's start a dialogue.
+        </Box>
+      </Component>
+    </>
+  );
+}
+
+export function DialogWithButtonsFooter() {
+  const [isShowing, setIsShowing] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
+      <Component
+        header={<DialogHeader title="Send" />}
         isShowing={isShowing}
         onClose={() => setIsShowing(false)}
+        footer={
+          <Flex flexDirection="row" gap="space.04" width="100%">
+            <Button flexGrow={1} variant="outline" onClick={() => setIsShowing(false)}>
+              Cancel
+            </Button>
+            <Button flexGrow={1} onClick={() => setIsShowing(false)}>
+              Send
+            </Button>
+          </Flex>
+        }
       >
-        <h1>Some Dialog</h1>
+        <Box textAlign="center" height="60vh">
+          Let's start a dialogue.
+        </Box>
       </Component>
     </>
   );

diff --git a/packages/ui/src/components/dialog/dialog.web.tsx b/packages/ui/src/components/dialog/dialog.web.tsx
@@ -7,6 +7,8 @@ import { token } from 'leather-styles/tokens';
 
 import { pxStringToNumber } from '@leather.io/utils';
 
+import { DialogFooter } from './dialog-footer.web';
+
 export interface DialogProps {
   isShowing: boolean;
   onClose?(): void;
@@ -91,7 +93,7 @@ export function Dialog({
             ) : (
               children
             )}
-            {footer}
+            {footer && <DialogFooter>{footer}</DialogFooter>}
           </RadixDialog.Content>
         </RadixDialog.Overlay>
       </RadixDialog.Portal>