Document new Portal parts (#413)

* Document new Portal parts * Document changes * Update demos * Update DeveloperExperienceSection.tsx
radix-ui · Jun 13, 2022 · f359f33 · f359f33
1 parent 4925960
commit f359f33
Show file tree

Hide file tree

Showing 16 changed files with 648 additions and 275 deletions.
diff --git a/components/demos/ContextMenu.jsx b/components/demos/ContextMenu.jsx
@@ -15,8 +15,25 @@ const contentStyles = {
 };
 
 const StyledContent = styled(ContextMenuPrimitive.Content, { ...contentStyles });
+
+function Content(props) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <StyledContent {...props} />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
 const StyledSubContent = styled(ContextMenuPrimitive.SubContent, { ...contentStyles });
 
+function SubContent(props) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <StyledSubContent {...props} />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
 const itemStyles = {
   all: 'unset',
   fontSize: 13,
@@ -78,7 +95,7 @@ const StyledItemIndicator = styled(ContextMenuPrimitive.ItemIndicator, {
 // Exports
 export const ContextMenu = ContextMenuPrimitive.Root;
 export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-export const ContextMenuContent = StyledContent;
+export const ContextMenuContent = Content;
 export const ContextMenuItem = StyledItem;
 export const ContextMenuCheckboxItem = StyledCheckboxItem;
 export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
@@ -88,7 +105,7 @@ export const ContextMenuLabel = StyledLabel;
 export const ContextMenuSeparator = StyledSeparator;
 export const ContextMenuSub = ContextMenuPrimitive.Sub;
 export const ContextMenuSubTrigger = StyledSubTrigger;
-export const ContextMenuSubContent = StyledSubContent;
+export const ContextMenuSubContent = SubContent;
 
 // Your app...
 const Box = styled('div', {});

diff --git a/components/demos/DropdownMenu.jsx b/components/demos/DropdownMenu.jsx
@@ -50,8 +50,32 @@ const contentStyles = {
 };
 
 const StyledContent = styled(DropdownMenuPrimitive.Content, { ...contentStyles });
+
+const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
+  fill: 'white',
+});
+
+function Content({ children, arrowOffset, ...props }) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <StyledContent {...props}>
+        {children}
+        <StyledArrow offset={arrowOffset} />
+      </StyledContent>
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
 const StyledSubContent = styled(DropdownMenuPrimitive.SubContent, { ...contentStyles });
 
+function SubContent(props) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <StyledSubContent {...props} />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
 const itemStyles = {
   all: 'unset',
   fontSize: 13,
@@ -110,25 +134,20 @@ const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
   justifyContent: 'center',
 });
 
-const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
-  fill: 'white',
-});
-
 // Exports
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-export const DropdownMenuContent = StyledContent;
+export const DropdownMenuContent = Content;
 export const DropdownMenuItem = StyledItem;
 export const DropdownMenuCheckboxItem = StyledCheckboxItem;
 export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 export const DropdownMenuRadioItem = StyledRadioItem;
 export const DropdownMenuItemIndicator = StyledItemIndicator;
 export const DropdownMenuLabel = StyledLabel;
 export const DropdownMenuSeparator = StyledSeparator;
-export const DropdownMenuArrow = StyledArrow;
 export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 export const DropdownMenuSubTrigger = StyledSubTrigger;
-export const DropdownMenuSubContent = StyledSubContent;
+export const DropdownMenuSubContent = SubContent;
 
 // Your app...
 const Box = styled('div', {});
@@ -171,7 +190,7 @@ export const DropdownMenuDemo = () => {
           </IconButton>
         </DropdownMenuTrigger>
 
-        <DropdownMenuContent sideOffset={5}>
+        <DropdownMenuContent sideOffset={5} arrowOffset={12}>
           <DropdownMenuItem>
             New Tab <RightSlot>⌘+T</RightSlot>
           </DropdownMenuItem>
@@ -230,7 +249,6 @@ export const DropdownMenuDemo = () => {
               Colm Tuite
             </DropdownMenuRadioItem>
           </DropdownMenuRadioGroup>
-          <DropdownMenuArrow offset={12} />
         </DropdownMenuContent>
       </DropdownMenu>
     </Box>

diff --git a/components/demos/HoverCard.jsx b/components/demos/HoverCard.jsx
@@ -46,11 +46,21 @@ const StyledArrow = styled(HoverCardPrimitive.Arrow, {
   fill: 'white',
 });
 
+function Content({ children, ...props }) {
+  return (
+    <HoverCardPrimitive.Portal>
+      <StyledContent {...props}>
+        {children}
+        <StyledArrow />
+      </StyledContent>
+    </HoverCardPrimitive.Portal>
+  );
+}
+
 // Exports
 export const HoverCard = HoverCardPrimitive.Root;
 export const HoverCardTrigger = HoverCardPrimitive.Trigger;
-export const HoverCardContent = StyledContent;
-export const HoverCardArrow = StyledArrow;
+export const HoverCardContent = Content;
 
 // Your app...
 const Flex = styled('div', { display: 'flex' });
@@ -124,7 +134,6 @@ const HoverCardDemo = () => (
           </Flex>
         </Flex>
       </Flex>
-      <HoverCardArrow />
     </HoverCardContent>
   </HoverCard>
 );

diff --git a/components/demos/Popover.jsx b/components/demos/Popover.jsx
@@ -49,6 +49,17 @@ const StyledArrow = styled(PopoverPrimitive.Arrow, {
   fill: 'white',
 });
 
+function Content({ children, ...props }) {
+  return (
+    <PopoverPrimitive.Portal>
+      <StyledContent {...props}>
+        {children}
+        <StyledArrow />
+      </StyledContent>
+    </PopoverPrimitive.Portal>
+  );
+}
+
 const StyledClose = styled(PopoverPrimitive.Close, {
   all: 'unset',
   fontFamily: 'inherit',
@@ -70,8 +81,7 @@ const StyledClose = styled(PopoverPrimitive.Close, {
 // Exports
 export const Popover = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;
-export const PopoverContent = StyledContent;
-export const PopoverArrow = StyledArrow;
+export const PopoverContent = Content;
 export const PopoverClose = StyledClose;
 
 // Your app...
@@ -167,7 +177,6 @@ const PopoverDemo = () => (
           <Input id="maxHeight" defaultValue="none" />
         </Fieldset>
       </Flex>
-      <PopoverArrow />
       <PopoverClose aria-label="Close">
         <Cross2Icon />
       </PopoverClose>

diff --git a/components/demos/Tooltip.jsx b/components/demos/Tooltip.jsx
@@ -49,11 +49,22 @@ const StyledArrow = styled(TooltipPrimitive.Arrow, {
   fill: 'white',
 });
 
+function Content({ children, ...props }) {
+  return (
+    <TooltipPrimitive.Portal>
+      <StyledContent {...props}>
+        {children}
+        <StyledArrow />
+      </StyledContent>
+    </TooltipPrimitive.Portal>
+  );
+}
+
 // Exports
 export const Provider = TooltipPrimitive.Provider;
 export const Tooltip = TooltipPrimitive.Root;
 export const TooltipTrigger = TooltipPrimitive.Trigger;
-export const TooltipContent = StyledContent;
+export const TooltipContent = Content;
 
 // Your app...
 const IconButton = styled('button', {
@@ -80,10 +91,9 @@ const TooltipDemo = () => {
           <PlusIcon />
         </IconButton>
       </TooltipTrigger>
-      <StyledContent sideOffset={5} className={`${theme}`}>
+      <TooltipContent sideOffset={5} className={`${theme}`}>
         Add to library
-        <StyledArrow />
-      </StyledContent>
+      </TooltipContent>
     </Tooltip>
   );
 };

diff --git a/components/marketing/DeveloperExperienceSection.tsx b/components/marketing/DeveloperExperienceSection.tsx
@@ -17,9 +17,9 @@ import { CodeDemo } from './CodeDemo';
 
 enum Highlights {
   Unstyled = '1-18',
-  Composable = '20-36',
-  Customizable = '37-51',
-  Consistent = '52-68',
+  Composable = '20-37',
+  Customizable = '39-55',
+  Consistent = '57-74',
 }
 
 export const DeveloperExperienceSection = () => {
@@ -416,10 +416,12 @@ export const StatusTooltip = ({ state, label }) => {
           <Status variant={state} />
         </Text>
       </Tooltip.Trigger>
-      <TooltipContent>
-        <Tooltip.Arrow />
-        {label}
-      </TooltipContent>
+      <Tooltip.Portal>
+        <TooltipContent>
+          <Tooltip.Arrow />
+          {label}
+        </TooltipContent>
+      </Tooltip.Portal>
     </Tooltip.Root>
   );
 };`,
@@ -430,21 +432,22 @@ export const DeploymentPopover = ({ children }) => {
   return (
     <Popover.Root>
       <Popover.Trigger>View deployment</Popover.Trigger>
-      <PopoverContent
-        align="start"
-        collisionTolerance={10}
-        portalled={false}
-        onOpenAutoFocus={(event) => {
-          // Focus the close button when popover opens
-          event.preventDefault();
-          popoverCloseButton.current?.focus();
-        }}
-      >
-        {children}
-        <Popover.Close ref={popoverCloseButton}>
-          Close
-        </Popover.Close>
-      </PopoverContent>
+      <Popover.Portal>
+        <PopoverContent
+          align="start"
+          collisionTolerance={10}
+          onOpenAutoFocus={(event) => {
+            // Focus the close button when popover opens
+            popoverCloseButton.current?.focus();
+            event.preventDefault();
+          }}
+        >
+          {children}
+          <Popover.Close ref={popoverCloseButton}>
+            Close
+          </Popover.Close>
+        </PopoverContent>
+      </Popover.Portal>
     </Popover.Root>
   );
 };`,
@@ -456,18 +459,20 @@ export const InfoDialog = ({ children }) => {
     <Dialog.Root>
       <Dialog.Trigger>View details</Dialog.Trigger>
       <Dialog.Overlay />
-      <DialogContent
-        onOpenAutoFocus={(event) => {
-          // Focus the close button when dialog opens
-          event.preventDefault();
-          dialogCloseButton.current?.focus();
-        }}
-      >
-        {children}
-        <Dialog.Close ref={dialogCloseButton}>
-          Close
-        </Dialog.Close>
-      </DialogContent>
+      <Dialog.Portal>
+        <DialogContent
+          onOpenAutoFocus={(event) => {
+            // Focus the close button when dialog opens
+            dialogCloseButton.current?.focus();
+            event.preventDefault();
+          }}
+        >
+          {children}
+          <Dialog.Close ref={dialogCloseButton}>
+            Close
+          </Dialog.Close>
+        </DialogContent>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };`,

diff --git a/components/marketing/MainHeroDropdownMenu.tsx b/components/marketing/MainHeroDropdownMenu.tsx
@@ -98,7 +98,6 @@ export function MainHeroDropdownMenu() {
         <DropdownMenuContent
           ref={contentRef}
           sideOffset={5}
-          portalled={false}
           avoidCollisions={false}
           onEscapeKeyDown={(event) => {
             event.preventDefault();

diff --git a/components/marketing/MainHeroPopover.tsx b/components/marketing/MainHeroPopover.tsx
@@ -48,7 +48,6 @@ export function MainHeroPopover() {
       >
         <PopoverContent
           ref={contentRef}
-          portalled={false}
           side="bottom"
           sideOffset={5}
           avoidCollisions={false}