feat!: dialog export content without close icon

traefik · Mar 16, 2022 · 92f3c39 · 92f3c39
1 parent 097fcbf
commit 92f3c39
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/components/Dialog/Dialog.stories.tsx b/components/Dialog/Dialog.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Dialog, DialogContent, DialogTrigger, DialogClose } from './Dialog';
+import { Dialog, DialogContent, DialogTrigger, StyledContent } from './Dialog';
 import { Text } from '../Text';
 import { useState } from 'react';
 import { Button } from '../Button';
@@ -91,4 +91,33 @@ const Customize: ComponentStory<any> = (args) => {
       </DialogContent>
     </Dialog>
   );
-};
+};
+
+export const NoCloseIcon: ComponentStory<any> = (args) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => setOpen(isOpen)}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      </DialogTrigger>
+
+      <Box>
+        {[...Array(10)].map((_, i) => (
+          <Text key={i} css={{ my: '$1' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+          </Text>
+        ))}
+      </Box>
+
+      <StyledContent>
+        <Content />
+      </StyledContent>
+    </Dialog>
+  );
+};
diff --git a/components/Dialog/Dialog.tsx b/components/Dialog/Dialog.tsx
@@ -28,7 +28,7 @@ export function Dialog({ children, ...props }: DialogProps) {
   );
 }
 
-const StyledContent = styled(DialogPrimitive.Content, Card, {
+export const StyledContent = styled(DialogPrimitive.Content, Card, {
   position: 'fixed',
   top: '50%',
   left: '50%',
@@ -84,4 +84,4 @@ export const DialogContent = React.forwardRef<
 ));
 
 export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogClose = DialogPrimitive.Close;
+export const DialogClose = StyledCloseButton;
diff --git a/index.ts b/index.ts
@@ -21,7 +21,7 @@ export { Checkbox } from './components/Checkbox';
 export { Container } from './components/Container';
 export { Elevation, elevationVariants } from './components/Elevation';
 export { FaencyProvider } from './components/FaencyProvider';
-export { Dialog, DialogClose, DialogContent, DialogTrigger } from './components/Dialog';
+export { Dialog, DialogClose, DialogContent, StyledContent, DialogTrigger } from './components/Dialog';
 export {
   DropdownMenu,
   DropdownMenuTrigger,