fix: e2e tests and remove sheet portal

gregermendle · Oct 23, 2024 · d3f8e4e · d3f8e4e
1 parent 77ef3c5
commit d3f8e4e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git a/apps/example/@/components/ui/sheet.tsx b/apps/example/@/components/ui/sheet.tsx
@@ -54,7 +54,7 @@ const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
+  <>
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
@@ -67,7 +67,7 @@ const SheetContent = React.forwardRef<
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
-  </SheetPortal>
+  </>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 

diff --git a/apps/example/cypress/e2e/preview-browser.cy.ts b/apps/example/cypress/e2e/preview-browser.cy.ts
@@ -24,15 +24,15 @@ describe("PreviewBrowser", () => {
       expect(loc.search).to.eq("?preview=loginCode&view=mobile");
     });
     cy.findByTitle("loginCode preview")
-      .should("have.class", "max-w-[375px]")
-      .should("have.class", "max-h-[667px]");
+      .should("have.class", "rm-max-w-[375px]")
+      .should("have.class", "rm-max-h-[667px]");
     cy.get('[aria-label="view desktop resolution"]').click();
     cy.location().should((loc) => {
       expect(loc.search).to.eq("?preview=loginCode&view=desktop");
     });
     cy.findByTitle("loginCode preview")
-      .should("not.have.class", "max-w-[375px]")
-      .should("not.have.class", "max-h-[667px]");
+      .should("not.have.class", "rm-max-w-[375px]")
+      .should("not.have.class", "rm-max-h-[667px]");
   });
 
   it("should show a hamburger menu on small resolutions", () => {

diff --git a/packages/remix-mailer/src/components/sheet.tsx b/packages/remix-mailer/src/components/sheet.tsx
@@ -12,16 +12,14 @@ const SheetTrigger = SheetPrimitive.Trigger;
 
 const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal;
-
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
       "rm-fixed rm-inset-0 rm-z-50 rm-bg-black/80 rm- data-[state=open]:rm-animate-in data-[state=closed]:rm-animate-out data-[state=closed]:rm-fade-out-0 data-[state=open]:rm-fade-in-0",
-      className,
+      className
     )}
     {...props}
     ref={ref}
@@ -45,7 +43,7 @@ const sheetVariants = cva(
     defaultVariants: {
       side: "right",
     },
-  },
+  }
 );
 
 interface SheetContentProps
@@ -56,7 +54,7 @@ const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
+  <>
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
@@ -69,7 +67,7 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close>
       {children}
     </SheetPrimitive.Content>
-  </SheetPortal>
+  </>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
@@ -80,7 +78,7 @@ const SheetHeader = ({
   <div
     className={cn(
       "rm-flex rm-flex-col rm-space-y-2 rm-text-center sm:rm-text-left",
-      className,
+      className
     )}
     {...props}
   />
@@ -94,7 +92,7 @@ const SheetFooter = ({
   <div
     className={cn(
       "rm-flex rm-flex-col-reverse sm:rm-flex-row sm:rm-justify-end sm:rm-space-x-2",
-      className,
+      className
     )}
     {...props}
   />
@@ -127,7 +125,6 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
-  SheetPortal,
   SheetOverlay,
   SheetTrigger,
   SheetClose,