From 8795fd3ecf20474c8fd9af7ff51579ad81350c5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Gr=C3=A9lard?= Date: Wed, 8 Jun 2022 18:12:01 +0100 Subject: [PATCH 1/4] Document new Portal parts --- data/primitives/overview/releases.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/data/primitives/overview/releases.mdx b/data/primitives/overview/releases.mdx index b8901423d..f16caae1e 100644 --- a/data/primitives/overview/releases.mdx +++ b/data/primitives/overview/releases.mdx @@ -25,6 +25,7 @@ metaDescription: Radix Primitives releases and their changelogs. - Add `data-highlighted` attribute to support styling - [**Breaking**] Improve indirect nesting of context menus. Submenus must now be created using explicit parts. - [**Breaking**] Move `allowPinchZoom` to root. +- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering. @@ -37,6 +38,11 @@ metaDescription: Radix Primitives releases and their changelogs. - [**Breaking**] Improve indirect nesting of dropdown menus. Submenus must now be created using explicit parts. - [**Breaking**] Move `allowPinchZoom` to root - Prevent escape key from exiting fullscreen mode in Firefox & Safari +- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering. + + + +- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering. @@ -46,6 +52,7 @@ metaDescription: Radix Primitives releases and their changelogs. - [**Breaking**] Move `allowPinchZoom` to root +- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering. @@ -83,6 +90,7 @@ metaDescription: Radix Primitives releases and their changelogs. - Improve layering of tooltip with other primitives - Fix tooltip closing when transforming/animation trigger +- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering. ## February 28, 2022 From 35cfd6a98074202b50dead809cc5e043486b6b94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Gr=C3=A9lard?= Date: Wed, 8 Jun 2022 18:38:16 +0100 Subject: [PATCH 2/4] Document changes --- .../components/context-menu/0.1.7.mdx | 81 ++++++++++++----- .../components/dropdown-menu/0.1.7.mdx | 87 ++++++++++++------- .../components/hover-card/0.1.6.mdx | 47 +++++++--- data/primitives/components/popover/0.1.7.mdx | 49 +++++++---- data/primitives/components/tooltip/0.1.8.mdx | 55 +++++++++--- 5 files changed, 223 insertions(+), 96 deletions(-) diff --git a/data/primitives/components/context-menu/0.1.7.mdx b/data/primitives/components/context-menu/0.1.7.mdx index d06c7670b..0c036a0af 100644 --- a/data/primitives/components/context-menu/0.1.7.mdx +++ b/data/primitives/components/context-menu/0.1.7.mdx @@ -54,31 +54,35 @@ export default () => ( - - - - - + + + - - - - + + + - - + - - + - - - - + + + + + - - + + + + + + + + + + ); ``` @@ -171,6 +175,33 @@ The area that opens the context menu. Wrap it around the target you want the con ]} /> +### Portal + +When used, portals the content part into the `body`. + + + Used to force mounting when more control is needed. Useful when + controlling animation with React animation libraries. If used on this + part, it will be inherited by ContextMenu.Content and{' '} + ContextMenu.SubContent respectively. + + ), + }, + { + name: 'container', + type: 'HTMLElement', + default: 'document.body', + description: 'Specify a container element to portal the content into.', + }, + ]} +/> + ### Content The component that pops out in an open context menu. @@ -258,8 +289,13 @@ The component that pops out in an open context menu. { name: 'forceMount', type: 'boolean', - description: - 'Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.', + description: ( + + Used to force mounting when more control is needed. Useful when + controlling animation with React animation libraries. It inherits from{' '} + ContextMenu.Portal. + + ), }, { name: 'alignOffset', @@ -770,7 +806,8 @@ The component that pops out when a submenu is open. Must be rendered inside `Con description: ( Used to force mounting when more control is needed. Useful when - controlling animation with React animation libraries. + controlling animation with React animation libraries. It inherits from{' '} + ContextMenu.Portal. ), }, diff --git a/data/primitives/components/dropdown-menu/0.1.7.mdx b/data/primitives/components/dropdown-menu/0.1.7.mdx index 1e6bab030..b5faab3a8 100644 --- a/data/primitives/components/dropdown-menu/0.1.7.mdx +++ b/data/primitives/components/dropdown-menu/0.1.7.mdx @@ -55,32 +55,36 @@ export default () => ( - - - - - + + + - - - - + + + - - + - - + + + + + + + - - - - + + + + + + - - - + + + + ); ``` @@ -194,6 +198,33 @@ The button that toggles the dropdown menu. By default, the `DropdownMenu.Content ]} /> +### Portal + +When used, portals the content part into the `body`. + + + Used to force mounting when more control is needed. Useful when + controlling animation with React animation libraries. If used on this + part, it will be inherited by DropdownMenu.Content and{' '} + DropdownMenu.SubContent respectively. + + ), + }, + { + name: 'container', + type: 'HTMLElement', + default: 'document.body', + description: 'Specify a container element to portal the content into.', + }, + ]} +/> + ### Content The component that pops out when the dropdown menu is open. @@ -278,23 +309,14 @@ The component that pops out when the dropdown menu is open. ), }, - { - name: 'portalled', - type: 'boolean', - default: 'true', - description: ( - - Whether to render in a Portal when open. - - ), - }, { name: 'forceMount', type: 'boolean', description: ( Used to force mounting when more control is needed. Useful when - controlling animation with React animation libraries. + controlling animation with React animation libraries. It inherits from{' '} + DropdownMenu.Portal. ), }, @@ -841,7 +863,8 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro description: ( Used to force mounting when more control is needed. Useful when - controlling animation with React animation libraries. + controlling animation with React animation libraries. It inherits from{' '} + DropdownMenu.Portal. ), }, diff --git a/data/primitives/components/hover-card/0.1.6.mdx b/data/primitives/components/hover-card/0.1.6.mdx index e8013fddd..ab532546a 100644 --- a/data/primitives/components/hover-card/0.1.6.mdx +++ b/data/primitives/components/hover-card/0.1.6.mdx @@ -47,9 +47,11 @@ import * as HoverCard from '@radix-ui/react-hover-card'; export default () => ( - - - + + + + + ); ``` @@ -126,6 +128,32 @@ The link that opens the hover card when hovered. ]} /> +### Portal + +When used, portals the content part into the `body`. + + + Used to force mounting when more control is needed. Useful when + controlling animation with React animation libraries. If used on this + part, it will be inherited by HoverCard.Content. + + ), + }, + { + name: 'container', + type: 'HTMLElement', + default: 'document.body', + description: 'Specify a container element to portal the content into.', + }, + ]} +/> + ### Content The component that pops out when the hover card is open. @@ -146,17 +174,8 @@ The component that pops out when the hover card is open. description: ( Used to force mounting when more control is needed. Useful when - controlling animation with React animation libraries. - - ), - }, - { - name: 'portalled', - type: 'boolean', - default: 'true', - description: ( - - Whether to render in a Portal when open. + controlling animation with React animation libraries. It inherits from{' '} + HoverCard.Portal. ), }, diff --git a/data/primitives/components/popover/0.1.7.mdx b/data/primitives/components/popover/0.1.7.mdx index 9d1da68bd..d911d8297 100644 --- a/data/primitives/components/popover/0.1.7.mdx +++ b/data/primitives/components/popover/0.1.7.mdx @@ -49,10 +49,12 @@ export default () => ( - - - - + + + + + + ); ``` @@ -170,6 +172,32 @@ An optional element to position the `Popover.Content` against. If this part is n ]} /> +### Portal + +When used, portals the content part into the `body`. + + + Used to force mounting when more control is needed. Useful when + controlling animation with React animation libraries. If used on this + part, it will be inherited by Popover.Content. + + ), + }, + { + name: 'container', + type: 'HTMLElement', + default: 'document.body', + description: 'Specify a container element to portal the content into.', + }, + ]} +/> + ### Content The component that pops out when the popover is open. @@ -254,23 +282,14 @@ The component that pops out when the popover is open. ), }, - { - name: 'portalled', - type: 'boolean', - default: 'true', - description: ( - - Whether to render in a Portal when open. - - ), - }, { name: 'forceMount', type: 'boolean', description: ( Used to force mounting when more control is needed. Useful when - controlling animation with React animation libraries. + controlling animation with React animation libraries. It inherits from{' '} + Popover.Portal. ), }, diff --git a/data/primitives/components/tooltip/0.1.8.mdx b/data/primitives/components/tooltip/0.1.8.mdx index 39567dba5..e627b61ce 100644 --- a/data/primitives/components/tooltip/0.1.8.mdx +++ b/data/primitives/components/tooltip/0.1.8.mdx @@ -48,9 +48,11 @@ export default () => ( - - - + + + + + ); @@ -144,6 +146,32 @@ The button that toggles the tooltip. By default, the `Tooltip.Content` will posi ]} /> +### Portal + +When used, portals the content part into the `body`. + + + Used to force mounting when more control is needed. Useful when + controlling animation with React animation libraries. If used on this + part, it will be inherited by Tooltip.Content. + + ), + }, + { + name: 'container', + type: 'HTMLElement', + default: 'document.body', + description: 'Specify a container element to portal the content into.', + }, + ]} +/> + ### Content The component that pops out when the tooltip is open. @@ -170,16 +198,6 @@ The component that pops out when the tooltip is open. ), }, - { - name: 'portalled', - type: 'boolean', - default: 'true', - description: ( - - Whether to render in a Portal when open. - - ), - }, { name: 'onEscapeKeyDown', type: '(event: KeyboardEvent) => void', @@ -203,6 +221,17 @@ The component that pops out when the tooltip is open. ), }, + { + name: 'forceMount', + type: 'boolean', + description: ( + + Used to force mounting when more control is needed. Useful when + controlling animation with React animation libraries. It inherits from{' '} + Tooltip.Portal. + + ), + }, { name: 'side', type: '"top" | "right" | "bottom" | "left"', From 3611ecd361248a5ce6f341c969045d41b70af4d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Gr=C3=A9lard?= Date: Wed, 8 Jun 2022 19:00:11 +0100 Subject: [PATCH 3/4] Update demos --- components/demos/ContextMenu.jsx | 21 +- components/demos/DropdownMenu.jsx | 36 +- components/demos/HoverCard.jsx | 15 +- components/demos/Popover.jsx | 15 +- components/demos/Tooltip.jsx | 18 +- components/marketing/MainHeroDropdownMenu.tsx | 1 - components/marketing/MainHeroPopover.tsx | 1 - package.json | 10 +- yarn.lock | 406 +++++++++++++----- 9 files changed, 378 insertions(+), 145 deletions(-) diff --git a/components/demos/ContextMenu.jsx b/components/demos/ContextMenu.jsx index 9e7d0cf4e..819aaf121 100644 --- 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 ( + + + + ); +} + const StyledSubContent = styled(ContextMenuPrimitive.SubContent, { ...contentStyles }); +function SubContent(props) { + return ( + + + + ); +} + 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 index efa1d42c1..c33884c71 100644 --- 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 ( + + + {children} + + + + ); +} + const StyledSubContent = styled(DropdownMenuPrimitive.SubContent, { ...contentStyles }); +function SubContent(props) { + return ( + + + + ); +} + const itemStyles = { all: 'unset', fontSize: 13, @@ -110,14 +134,10 @@ 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; @@ -125,10 +145,9 @@ 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 = () => { - + New Tab ⌘+T @@ -230,7 +249,6 @@ export const DropdownMenuDemo = () => { Colm Tuite - diff --git a/components/demos/HoverCard.jsx b/components/demos/HoverCard.jsx index 42d527f72..8571810d9 100644 --- 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 ( + + + {children} + + + + ); +} + // 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 = () => ( - ); diff --git a/components/demos/Popover.jsx b/components/demos/Popover.jsx index c855ae6e0..b7ffd41f8 100644 --- 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 ( + + + {children} + + + + ); +} + 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 = () => ( - diff --git a/components/demos/Tooltip.jsx b/components/demos/Tooltip.jsx index afcf5236d..946d80558 100644 --- 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 ( + + + {children} + + + + ); +} + // 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 = () => { - + Add to library - - + ); }; diff --git a/components/marketing/MainHeroDropdownMenu.tsx b/components/marketing/MainHeroDropdownMenu.tsx index 02da46e8f..6bf8b902b 100644 --- a/components/marketing/MainHeroDropdownMenu.tsx +++ b/components/marketing/MainHeroDropdownMenu.tsx @@ -98,7 +98,6 @@ export function MainHeroDropdownMenu() { { event.preventDefault(); diff --git a/components/marketing/MainHeroPopover.tsx b/components/marketing/MainHeroPopover.tsx index 331372a16..a25baee46 100644 --- a/components/marketing/MainHeroPopover.tsx +++ b/components/marketing/MainHeroPopover.tsx @@ -48,7 +48,6 @@ export function MainHeroPopover() { > Date: Thu, 9 Jun 2022 12:18:21 +0100 Subject: [PATCH 4/4] Update DeveloperExperienceSection.tsx --- .../marketing/DeveloperExperienceSection.tsx | 73 ++++++++++--------- 1 file changed, 39 insertions(+), 34 deletions(-) diff --git a/components/marketing/DeveloperExperienceSection.tsx b/components/marketing/DeveloperExperienceSection.tsx index 2ee1d7fcd..65e6b66b3 100644 --- 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 }) => { - - - {label} - + + + + {label} + + ); };`, @@ -430,21 +432,22 @@ export const DeploymentPopover = ({ children }) => { return ( View deployment - { - // Focus the close button when popover opens - event.preventDefault(); - popoverCloseButton.current?.focus(); - }} - > - {children} - - Close - - + + { + // Focus the close button when popover opens + popoverCloseButton.current?.focus(); + event.preventDefault(); + }} + > + {children} + + Close + + + ); };`, @@ -456,18 +459,20 @@ export const InfoDialog = ({ children }) => { View details - { - // Focus the close button when dialog opens - event.preventDefault(); - dialogCloseButton.current?.focus(); - }} - > - {children} - - Close - - + + { + // Focus the close button when dialog opens + dialogCloseButton.current?.focus(); + event.preventDefault(); + }} + > + {children} + + Close + + + ); };`,