feat: blur effect on the overlay of dialog component (#157)

add: blur effect on the overlay of dialog component
raystack · Oct 11, 2024 · 4251504 · 4251504
1 parent cd0169e
commit 4251504
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 18 deletions.
diff --git a/apps/www/content/primitives/components/dialog.mdx b/apps/www/content/primitives/components/dialog.mdx
@@ -9,19 +9,51 @@ radix:
 ## Preview
 
 <Preview>
-  <Dialog>
-    <Dialog.Trigger asChild>
-      <Button variant="ghost" size="small">Dialog button</Button>
-    </Dialog.Trigger>
-    <Dialog.Content close>
-      <Text size="5" style={{ fontWeight: 500, marginBottom: '12px' }}>Dialog Heading</Text>
-      <Text size="3" style={{ lineHeight: '25px' }}>
-        There are 5 variants to choose from. Use is for positive states. This is a link
-        Traditional business literature won’t help you solve it- most of that stuff is
-        focused on life after product/market fit, after the Trough of Sorrow.
-      </Text>
-    </Dialog.Content>
-  </Dialog>
+  <Flex
+    style={{
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: '12px',
+    }}
+  >
+    <Dialog>
+      <Dialog.Trigger asChild>
+        <Button variant="ghost" size="small">
+          Dialog button
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content close>
+        <Text size="5" style={{ fontWeight: 500, marginBottom: '12px' }}>
+          Dialog Heading
+        </Text>
+        <Text size="3" style={{ lineHeight: '25px' }}>
+          There are 5 variants to choose from. Use is for positive states. This
+          is a link Traditional business literature won’t help you solve it-
+          most of that stuff is focused on life after product/market fit, after
+          the Trough of Sorrow.
+        </Text>
+      </Dialog.Content>
+    </Dialog>
+
+    <Dialog>
+      <Dialog.Trigger asChild>
+        <Button variant="ghost" size="small">
+          Dialog with blur button
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content overlayBlur={true} close>
+        <Text size="5" style={{ fontWeight: 500, marginBottom: '12px' }}>
+          Dialog Heading
+        </Text>
+        <Text size="3" style={{ lineHeight: '25px' }}>
+          There are 5 variants to choose from. Use is for positive states. This
+          is a link Traditional business literature won’t help you solve it-
+          most of that stuff is focused on life after product/market fit, after
+          the Trough of Sorrow.
+        </Text>
+      </Dialog.Content>
+    </Dialog>
+  </Flex>
 </Preview>
 
 ## Installation
@@ -53,5 +85,25 @@ import { Dialog } from '@raystack/apsara'
     </Text>
   </Dialog.Content>
 </Dialog>
+
+<Dialog>
+  <Dialog.Trigger asChild>
+    <Button variant="ghost" size="small">
+          Dialog with blur button
+    </Button>
+  </Dialog.Trigger>
+  <Dialog.Content overlayBlur={true} close>
+    <Text size="5" style={{ fontWeight: 500, marginBottom: '12px' }}>
+          Dialog Heading
+    </Text>
+    <Text size="3" style={{ lineHeight: '25px' }}>
+          There are 5 variants to choose from. Use is for positive states. This
+          is a link Traditional business literature won’t help you solve it-
+          most of that stuff is focused on life after product/market fit, after
+          the Trough of Sorrow.
+    </Text>
+  </Dialog.Content>
+</Dialog>
+
 `} border />
 </LiveProvider>
diff --git a/packages/raystack/dialog/dialog.module.css b/packages/raystack/dialog/dialog.module.css
@@ -15,6 +15,10 @@
   border: 1px solid var(--border-subtle);
 }
 
+.overlayBlur {
+  backdrop-filter: blur(2px);
+}
+
 .dialogContent:focus {
   outline: none;
 }

diff --git a/packages/raystack/dialog/dialog.tsx b/packages/raystack/dialog/dialog.tsx
@@ -22,15 +22,16 @@ export const DialogContent = forwardRef<
     close?: boolean;
     overlayStyle?: React.CSSProperties;
     overlayClassname?: string;
+    overlayBlur?: boolean;
   }
 >(
   (
-    { className, children, close, overlayStyle, overlayClassname, ...props },
+    { className, children, close, overlayStyle, overlayClassname, overlayBlur, ...props },
     forwardedRef
   ) => {
     return (
       <DialogPrimitive.Portal>
-        <Overlay className={overlayClassname} style={overlayStyle}>
+        <Overlay className={overlayClassname} style={overlayStyle} blur={overlayBlur}>
           <DialogPrimitive.Content
             {...props}
             ref={forwardedRef}
@@ -49,18 +50,24 @@ export const DialogContent = forwardRef<
   }
 );
 
-const overlay = cva(styles.overlay);
+const overlay = cva(styles.overlay, {
+  variants: {
+    blur: {
+      true: styles.overlayBlur,
+    },
+  },
+});
 export interface OverlayProps
   extends ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>,
     VariantProps<typeof overlay> {}
 
 const Overlay = forwardRef<
   ElementRef<typeof DialogPrimitive.Overlay>,
   OverlayProps
->(({ className, ...props }, ref) => (
+>(({ className, blur, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-    className={overlay({ className })}
+    className={overlay({ className, blur })}
     {...props}
   />
 ));