From 646186a0353443b3acbc4b776f22ecba317fb725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Gr=C3=A9lard?= Date: Wed, 20 Jul 2022 12:58:51 +0100 Subject: [PATCH] Document popper changes (#437) * Update changelog * Document prop changes * Update demos with props * Update live demos * Add missing portals * Update deps * Revert "Update live demos" This reverts commit 981d20ab265715069d9005c1f007ad1ddb4f1892. * Update deps * Update codesandbox css * Remove portal in marketing hero demos * Document new boundary prop * Missing changelog + add portal back on subs * PR feedback * PR feedback --- components/DocCodeBlock.tsx | 28 +- components/demos/DropdownMenu.jsx | 6 +- .../marketing/DeveloperExperienceSection.tsx | 2 +- components/marketing/MainHeroDropdownMenu.tsx | 133 +- components/marketing/MainHeroPopover.tsx | 109 +- data/blog/under-the-spotlight-popover.mdx | 4 +- .../components/context-menu/0.1.7.mdx | 333 ++- .../components/dropdown-menu/0.1.7.mdx | 353 ++- .../components/hover-card/0.1.6.mdx | 71 +- data/primitives/components/popover/0.1.7.mdx | 71 +- data/primitives/components/tooltip/0.1.8.mdx | 73 +- data/primitives/overview/releases.mdx | 19 +- .../utilities/direction-provider/0.1.0.mdx | 2 +- package.json | 60 +- yarn.lock | 2065 +++++------------ 15 files changed, 1358 insertions(+), 1971 deletions(-) diff --git a/components/DocCodeBlock.tsx b/components/DocCodeBlock.tsx index e00d7853d..2233b1fd0 100644 --- a/components/DocCodeBlock.tsx +++ b/components/DocCodeBlock.tsx @@ -158,8 +158,32 @@ export function DocCodeBlock({ } const makeCodeSandboxParams = (name, code) => { - const css = - '*{box-sizing:border-box;margin:0;padding:0;}body{font-family:system-ui;width:100vw;height:100vh;background-image:linear-gradient(330deg, hsl(272,53%,50%) 0%, hsl(226,68%,56%) 100%);display:flex;align-items:flex-start;justify-content:center;}body>div{padding-top:120px}svg{display:block;}'; + const css = ` +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: system-ui; + width: 100vw; + height: 100vh; + background-image: linear-gradient( + 330deg, + hsl(272, 53%, 50%) 0%, + hsl(226, 68%, 56%) 100% + ); + display: flex; + align-items: flex-start; + justify-content: center; + margin-top: 120px; +} + +svg { + display: block; +} +`; const parameters = getParameters({ files: { diff --git a/components/demos/DropdownMenu.jsx b/components/demos/DropdownMenu.jsx index c33884c71..f180a47dc 100644 --- a/components/demos/DropdownMenu.jsx +++ b/components/demos/DropdownMenu.jsx @@ -55,12 +55,12 @@ const StyledArrow = styled(DropdownMenuPrimitive.Arrow, { fill: 'white', }); -function Content({ children, arrowOffset, ...props }) { +function Content({ children, ...props }) { return ( {children} - + ); @@ -190,7 +190,7 @@ export const DropdownMenuDemo = () => { - + New Tab ⌘+T diff --git a/components/marketing/DeveloperExperienceSection.tsx b/components/marketing/DeveloperExperienceSection.tsx index 65e6b66b3..0ae9f1318 100644 --- a/components/marketing/DeveloperExperienceSection.tsx +++ b/components/marketing/DeveloperExperienceSection.tsx @@ -435,7 +435,7 @@ export const DeploymentPopover = ({ children }) => { { // Focus the close button when popover opens popoverCloseButton.current?.focus(); diff --git a/components/marketing/MainHeroDropdownMenu.tsx b/components/marketing/MainHeroDropdownMenu.tsx index 6bf8b902b..e8faf1611 100644 --- a/components/marketing/MainHeroDropdownMenu.tsx +++ b/components/marketing/MainHeroDropdownMenu.tsx @@ -85,82 +85,71 @@ export function MainHeroDropdownMenu() { - { + event.preventDefault(); + if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) { + setOpen(false); + } }} - > - { + onInteractOutside={(event) => { + if (event.target !== triggerRef.current) { + event.preventDefault(); + } + }} + onOpenAutoFocus={(event) => { + // We prevent the initial auto focus because it's a demo rather than a real UI, + // so the parent page focus is not stolen. + if (initialAutoFocusPrevented.current === false) { event.preventDefault(); - if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) { - setOpen(false); - } - }} - onInteractOutside={(event) => { - if (event.target !== triggerRef.current) { - event.preventDefault(); - } - }} - onOpenAutoFocus={(event) => { - // We prevent the initial auto focus because it's a demo rather than a real UI, - // so the parent page focus is not stolen. - if (initialAutoFocusPrevented.current === false) { - event.preventDefault(); - initialAutoFocusPrevented.current = true; - } - }} - > - - New Tab - New Window - + initialAutoFocusPrevented.current = true; + } + }} + > + + New Tab + New Window + - - - Favorites - - - - - - GitHub - - - - Stitches - - - - Twitter - - - + + + Favorites + + + + + + GitHub + + + + Stitches + + + + Twitter + + + - Downloads - - - - - - Show Toolbar - - - - - - Show Full URLs - - - + Downloads + + + + + + Show Toolbar + + + + + + Show Full URLs + + ); } diff --git a/components/marketing/MainHeroPopover.tsx b/components/marketing/MainHeroPopover.tsx index a25baee46..6a22cbe85 100644 --- a/components/marketing/MainHeroPopover.tsx +++ b/components/marketing/MainHeroPopover.tsx @@ -36,73 +36,62 @@ export function MainHeroPopover() { Dimensions - event.preventDefault()} + onEscapeKeyDown={(event) => { + event.preventDefault(); + if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) { + setOpen(false); + } }} - > - event.preventDefault()} - onEscapeKeyDown={(event) => { + onOpenAutoFocus={(event) => { + // We prevent the initial auto focus because it's a demo rather than a real UI, + // so that the parent page focus is not stolen. + if (initialAutoFocusPrevented.current === false) { event.preventDefault(); - if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) { - setOpen(false); - } - }} - onOpenAutoFocus={(event) => { - // We prevent the initial auto focus because it's a demo rather than a real UI, - // so that the parent page focus is not stolen. - if (initialAutoFocusPrevented.current === false) { + initialAutoFocusPrevented.current = true; + } else { + // There's a brutal scroll shift bug with iOS Safari that we need to investigate. + // Cancelling input focus on open until we figure it out. Not related to the small input font size. + if ( + /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && + navigator.maxTouchPoints > 0 + ) { event.preventDefault(); - initialAutoFocusPrevented.current = true; - } else { - // There's a brutal scroll shift bug with iOS Safari that we need to investigate. - // Cancelling input focus on open until we figure it out. Not related to the small input font size. - if ( - /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && - navigator.maxTouchPoints > 0 - ) { - event.preventDefault(); - } } - }} - > - + } + }} + > + - - Dimensions - + + Dimensions + - - Width - - Height - - Margin - - Padding - - + + Width + + Height + + Margin + + Padding + + - - - - - - - + + + + + + ); } diff --git a/data/blog/under-the-spotlight-popover.mdx b/data/blog/under-the-spotlight-popover.mdx index ff56b0ade..eaa5d6b84 100644 --- a/data/blog/under-the-spotlight-popover.mdx +++ b/data/blog/under-the-spotlight-popover.mdx @@ -87,11 +87,11 @@ Our Popover component exposes its transform origin via a CSS Custom Property. Th ### Nesting -Some advanced interfaces, such as design tools, may require nesting of Popovers. The Radix Popover ensures you can customise its layering and dismissing behaviour. +Some advanced interfaces, such as design tools, may require nesting of Popovers. The Radix Popover ensures you can customise its layering and dismissing behavior. ### Highly customizable -You can configure many different behaviours, such as dismissing and layering, portal rendering, auto focus and collisions. +You can configure many different behaviors, such as dismissing and layering, portal rendering, auto focus and collisions. ### Styling diff --git a/data/primitives/components/context-menu/0.1.7.mdx b/data/primitives/components/context-menu/0.1.7.mdx index c9cc21bb7..c196bca17 100644 --- a/data/primitives/components/context-menu/0.1.7.mdx +++ b/data/primitives/components/context-menu/0.1.7.mdx @@ -75,9 +75,9 @@ export default () => ( - + - + @@ -296,18 +296,58 @@ The component that pops out in an open context menu. description: ( When true, overrides the side and - align preferences to prevent collisions with window edges. + align preferences to prevent collisions with boundary edges. ), }, { - name: 'collisionTolerance', - type: 'number', + name: 'collisionBoundary', + type: 'Element | null | Array', + typeSimple: 'Boundary', + default: '[]', + description: ( + + The element used as the collision boundary. By default this is the + viewport, though you can provide additional element(s) to be included + in this check. + + ), + }, + { + name: 'collisionPadding', + type: 'number | Partial>', + typeSimple: 'number | Padding', default: '0', description: ( - The distance in pixels from window edges where collision detection - should occur. + The distance in pixels from the boundary edges where collision + detection should occur. Accepts a number (same for all sides), or a + partial padding object, for example: {`{ top: 20, left: 20 }`} + . + + ), + }, + { + name: 'sticky', + type: '"partial" | "always"', + typeSimple: 'enum', + default: '"partial"', + description: ( + + The sticky behavior on the align axis. "partial" will + keep the content in the boundary as long as the trigger is at least + partially in the boundary whilst "always" will keep the + content in the boundary regardless. + + ), + }, + { + name: 'hideWhenDetached', + type: 'boolean', + default: 'false', + description: ( + + Whether to hide the content when the trigger becomes fully occluded. ), }, @@ -371,17 +411,6 @@ An optional arrow element to render alongside a submenu. This can be used to hel default: 5, description: The height of the arrow in pixels., }, - { - name: 'offset', - type: 'number', - default: 0, - description: ( - - The distance in pixels to render from the{' '} - ContextMenu.Content edge. - - ), - }, ]} /> @@ -923,18 +952,70 @@ The component that pops out when a submenu is open. Must be rendered inside `Con description: ( When true, overrides the side and - align preferences to prevent collisions with window edges. + align preferences to prevent collisions with boundary edges. + + ), + }, + { + name: 'collisionBoundary', + type: 'Element | null | Array', + typeSimple: 'Boundary', + default: '[]', + description: ( + + The element used as the collision boundary. By default this is the + viewport, though you can provide additional element(s) to be included + in this check. ), }, { - name: 'collisionTolerance', + name: 'collisionPadding', + type: 'number | Partial>', + typeSimple: 'number | Padding', + default: '0', + description: ( + + The distance in pixels from the boundary edges where collision + detection should occur. Accepts a number (same for all sides), or a + partial padding object, for example: {`{ top: 20, left: 20 }`} + . + + ), + }, + { + name: 'arrowPadding', type: 'number', default: '0', description: ( - The distance in pixels from window edges where collision detection - should occur. + The padding between the arrow and the edges of the content. If your + content has border-radius, this will prevent it from + overflowing the corners. + + ), + }, + { + name: 'sticky', + type: '"partial" | "always"', + typeSimple: 'enum', + default: '"partial"', + description: ( + + The sticky behavior on the align axis. "partial" will + keep the content in the boundary as long as the trigger is at least + partially in the boundary whilst "always" will keep the + content in the boundary regardless. + + ), + }, + { + name: 'hideWhenDetached', + type: 'boolean', + default: 'false', + description: ( + + Whether to hide the content when the trigger becomes fully occluded. ), }, @@ -964,24 +1045,28 @@ The component that pops out when a submenu is open. Must be rendered inside `Con You can create submenus by using `ContextMenu.Sub` in combination with its parts. -```jsx line=7-14 +```jsx line=8-17 … - - … - … - - - Sub menu → - - Sub menu item - Sub menu item - - - - - … - + + + … + … + + + Sub menu → + + + Sub menu item + Sub menu item + + + + + + … + + ``` @@ -989,7 +1074,7 @@ You can create submenus by using `ContextMenu.Sub` in combination with its parts You can add special styles to disabled items via the `data-disabled` attribute. -```jsx line=4-6,12 +```jsx line=4-6,13 import { styled } from '@stitches/react'; import * as ContextMenu from '@radix-ui/react-context-menu'; @@ -1000,11 +1085,13 @@ const StyledItem = styled(ContextMenu.Item, { export default () => ( … - - … - … - … - + + + … + … + … + + ); ``` @@ -1013,16 +1100,18 @@ export default () => ( Use the `Separator` part to add a separator between items. -```jsx line=5,7 +```jsx line=6,8 … - - … - - … - - … - + + + … + + … + + … + + ``` @@ -1030,15 +1119,17 @@ Use the `Separator` part to add a separator between items. Use the `Label` part to help label a section. -```jsx line=4 +```jsx line=5 … - - Label - … - … - … - + + + Label + … + … + … + + ``` @@ -1046,7 +1137,7 @@ Use the `Label` part to help label a section. Use the `CheckboxItem` part to add an item that can be checked. -```jsx line=6,15-20 +```jsx line=6,16-21 import React from 'react'; import { CheckIcon } from '@radix-ui/react-icons'; import * as ContextMenu from '@radix-ui/react-context-menu'; @@ -1057,20 +1148,22 @@ export default () => { return ( … - - … - … - - - - - - Checkbox item - - + + + … + … + + + + + + Checkbox item + + + ); }; @@ -1080,7 +1173,7 @@ export default () => { Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others. -```jsx line=6,12-31 +```jsx line=6,13-32 import React from 'react'; import { CheckIcon } from '@radix-ui/react-icons'; import * as ContextMenu from '@radix-ui/react-context-menu'; @@ -1091,28 +1184,30 @@ export default () => { return ( … - - - - - - - Red - - - - - - Blue - - - - - - Green - - - + + + + + + + + Red + + + + + + Blue + + + + + + Green + + + + ); }; @@ -1122,7 +1217,7 @@ export default () => { You can add extra decorative elements in the `Item` parts, such as images. -```jsx line=4-7,14,18,22 +```jsx line=4-7,15,19,23 import { styled } from '@stitches/react'; import * as ContextMenu from '@radix-ui/react-context-menu'; @@ -1134,20 +1229,22 @@ const Image = styled('img', { export default () => ( … - - - - Adolfo Hess - - - - Miyah Myles - - - - Sylvia Reynolds - - + + + + + Adolfo Hess + + + + Miyah Myles + + + + Sylvia Reynolds + + + ); ``` @@ -1156,7 +1253,7 @@ export default () => ( We expose a CSS custom property `--radix-context-menu-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions. -```jsx line=4-7,9-12,17 +```jsx line=4-7,9-12,18 import { styled, keyframes } from '@stitches/react'; import * as ContextMenu from '@radix-ui/react-context-menu'; @@ -1173,7 +1270,9 @@ const StyledContent = styled(ContextMenu.Content, { export default () => ( … - … + + … + ); ``` @@ -1182,7 +1281,7 @@ export default () => ( We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations. -```jsx line=4-7,9,12-14-19,24 +```jsx line=4-7,9-12,14-19,25 import { styled, keyframes } from '@stitches/react'; import * as ContextMenu from '@radix-ui/react-context-menu'; @@ -1206,7 +1305,9 @@ const StyledContent = styled(ContextMenu.Content, { export default () => ( … - … + + … + ); ``` diff --git a/data/primitives/components/dropdown-menu/0.1.7.mdx b/data/primitives/components/dropdown-menu/0.1.7.mdx index c3c405a4b..b5a2cb263 100644 --- a/data/primitives/components/dropdown-menu/0.1.7.mdx +++ b/data/primitives/components/dropdown-menu/0.1.7.mdx @@ -76,9 +76,9 @@ export default () => ( - + - + @@ -357,18 +357,70 @@ The component that pops out when the dropdown menu is open. description: ( When true, overrides the side and - align preferences to prevent collisions with window edges. + align preferences to prevent collisions with boundary edges. ), }, { - name: 'collisionTolerance', + name: 'collisionBoundary', + type: 'Element | null | Array', + typeSimple: 'Boundary', + default: '[]', + description: ( + + The element used as the collision boundary. By default this is the + viewport, though you can provide additional element(s) to be included + in this check. + + ), + }, + { + name: 'collisionPadding', + type: 'number | Partial>', + typeSimple: 'number | Padding', + default: '0', + description: ( + + The distance in pixels from the boundary edges where collision + detection should occur. Accepts a number (same for all sides), or a + partial padding object, for example: {`{ top: 20, left: 20 }`} + . + + ), + }, + { + name: 'arrowPadding', type: 'number', default: '0', description: ( - The distance in pixels from window edges where collision detection - should occur. + The padding between the arrow and the edges of the content. If your + content has border-radius, this will prevent it from + overflowing the corners. + + ), + }, + { + name: 'sticky', + type: '"partial" | "always"', + typeSimple: 'enum', + default: '"partial"', + description: ( + + The sticky behavior on the align axis. "partial" will + keep the content in the boundary as long as the trigger is at least + partially in the boundary whilst "always" will keep the + content in the boundary regardless. + + ), + }, + { + name: 'hideWhenDetached', + type: 'boolean', + default: 'false', + description: ( + + Whether to hide the content when the trigger becomes fully occluded. ), }, @@ -436,17 +488,6 @@ An optional arrow element to render alongside the dropdown menu. This can be use default: 5, description: The height of the arrow in pixels., }, - { - name: 'offset', - type: 'number', - default: 0, - description: ( - - The distance in pixels to render from the{' '} - DropdownMenu.Content edge. - - ), - }, ]} /> @@ -992,18 +1033,70 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro description: ( When true, overrides the side and - align preferences to prevent collisions with window edges. + align preferences to prevent collisions with boundary edges. ), }, { - name: 'collisionTolerance', + name: 'collisionBoundary', + type: 'Element | null | Array', + typeSimple: 'Boundary', + default: '[]', + description: ( + + The element used as the collision boundary. By default this is the + viewport, though you can provide additional element(s) to be included + in this check. + + ), + }, + { + name: 'collisionPadding', + type: 'number | Partial>', + typeSimple: 'number | Padding', + default: '0', + description: ( + + The distance in pixels from the boundary edges where collision + detection should occur. Accepts a number (same for all sides), or a + partial padding object, for example: {`{ top: 20, left: 20 }`} + . + + ), + }, + { + name: 'arrowPadding', type: 'number', default: '0', description: ( - The distance in pixels from window edges where collision detection - should occur. + The padding between the arrow and the edges of the content. If your + content has border-radius, this will prevent it from + overflowing the corners. + + ), + }, + { + name: 'sticky', + type: '"partial" | "always"', + typeSimple: 'enum', + default: '"partial"', + description: ( + + The sticky behavior on the align axis. "partial" will + keep the content in the boundary as long as the trigger is at least + partially in the boundary whilst "always" will keep the + content in the boundary regardless. + + ), + }, + { + name: 'hideWhenDetached', + type: 'boolean', + default: 'false', + description: ( + + Whether to hide the content when the trigger becomes fully occluded. ), }, @@ -1037,24 +1130,28 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro You can create submenus by using `DropdownMenu.Sub` in combination with its parts. -```jsx line=7-14 +```jsx line=8-17 … - - … - … - - - Sub menu → - - Sub menu item - Sub menu item - - - - - … - + + + … + … + + + Sub menu → + + + Sub menu item + Sub menu item + + + + + + … + + ``` @@ -1062,7 +1159,7 @@ You can create submenus by using `DropdownMenu.Sub` in combination with its part You can add special styles to disabled items via the `data-disabled` attribute. -```jsx line=4-6,12 +```jsx line=4-6,13 import { styled } from '@stitches/react'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; @@ -1073,11 +1170,13 @@ const StyledItem = styled(DropdownMenu.Item, { export default () => ( … - - … - … - … - + + + … + … + … + + ); ``` @@ -1086,16 +1185,18 @@ export default () => ( Use the `Separator` part to add a separator between items. -```jsx line=5,7 +```jsx line=6,8 … - - … - - … - - … - + + + … + + … + + … + + ``` @@ -1103,15 +1204,17 @@ Use the `Separator` part to add a separator between items. Use the `Label` part to help label a section. -```jsx line=4 +```jsx line=5 … - - Label - … - … - … - + + + Label + … + … + … + + ``` @@ -1119,7 +1222,7 @@ Use the `Label` part to help label a section. Use the `CheckboxItem` part to add an item that can be checked. -```jsx line=6,15-20 +```jsx line=6,16-21 import React from 'react'; import { CheckIcon } from '@radix-ui/react-icons'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; @@ -1130,20 +1233,22 @@ export default () => { return ( … - - … - … - - - - - - Checkbox item - - + + + … + … + + + + + + Checkbox item + + + ); }; @@ -1153,7 +1258,7 @@ export default () => { Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others. -```jsx line=6,12-31 +```jsx line=6,13-32 import React from 'react'; import { CheckIcon } from '@radix-ui/react-icons'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; @@ -1164,28 +1269,30 @@ export default () => { return ( … - - - - - - - Red - - - - - - Blue - - - - - - Green - - - + + + + + + + + Red + + + + + + Blue + + + + + + Green + + + + ); }; @@ -1193,7 +1300,7 @@ export default () => { ### With complex items -```jsx line=4-7,14,18,22 +```jsx line=4-7,15,19,23 import { styled } from '@stitches/react'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; @@ -1205,20 +1312,22 @@ const Image = styled('img', { export default () => ( … - - - - Adolfo Hess - - - - Miyah Myles - - - - Sylvia Reynolds - - + + + + + Adolfo Hess + + + + Miyah Myles + + + + Sylvia Reynolds + + + ); ``` @@ -1227,7 +1336,7 @@ export default () => ( We expose a CSS custom property `--radix-dropdown-menu-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions. -```jsx line=4-7,9-12,17 +```jsx line=4-7,9-12,18 import { styled, keyframes } from '@stitches/react'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; @@ -1244,7 +1353,9 @@ const StyledContent = styled(DropdownMenu.Content, { export default () => ( … - … + + … + ); ``` @@ -1253,7 +1364,7 @@ export default () => ( We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations. -```jsx line=4-7,9,12-14-19,24 +```jsx line=4-7,9-12,14-19,25 import { styled, keyframes } from '@stitches/react'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; @@ -1277,7 +1388,9 @@ const StyledContent = styled(DropdownMenu.Content, { export default () => ( … - … + + … + ); ``` @@ -1406,10 +1519,12 @@ export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; export const DropdownMenuContent = React.forwardRef( ({ children, ...props }, forwardedRef) => { return ( - - {children} - - + + + {children} + + + ); } ); diff --git a/data/primitives/components/hover-card/0.1.6.mdx b/data/primitives/components/hover-card/0.1.6.mdx index 21b210dc9..ae1876a25 100644 --- a/data/primitives/components/hover-card/0.1.6.mdx +++ b/data/primitives/components/hover-card/0.1.6.mdx @@ -241,18 +241,70 @@ The component that pops out when the hover card is open. description: ( When true, overrides the side and - align preferences to prevent collisions with window edges. + align preferences to prevent collisions with boundary edges. ), }, { - name: 'collisionTolerance', + name: 'collisionBoundary', + type: 'Element | null | Array', + typeSimple: 'Boundary', + default: '[]', + description: ( + + The element used as the collision boundary. By default this is the + viewport, though you can provide additional element(s) to be included + in this check. + + ), + }, + { + name: 'collisionPadding', + type: 'number | Partial>', + typeSimple: 'number | Padding', + default: '0', + description: ( + + The distance in pixels from the boundary edges where collision + detection should occur. Accepts a number (same for all sides), or a + partial padding object, for example: {`{ top: 20, left: 20 }`} + . + + ), + }, + { + name: 'arrowPadding', type: 'number', default: '0', description: ( - The distance in pixels from window edges where collision detection - should occur. + The padding between the arrow and the edges of the content. If your + content has border-radius, this will prevent it from + overflowing the corners. + + ), + }, + { + name: 'sticky', + type: '"partial" | "always"', + typeSimple: 'enum', + default: '"partial"', + description: ( + + The sticky behavior on the align axis. "partial" will + keep the content in the boundary as long as the trigger is at least + partially in the boundary whilst "always" will keep the + content in the boundary regardless. + + ), + }, + { + name: 'hideWhenDetached', + type: 'boolean', + default: 'false', + description: ( + + Whether to hide the content when the trigger becomes fully occluded. ), }, @@ -316,17 +368,6 @@ An optional arrow element to render alongside the hover card. This can be used t default: 5, description: The height of the arrow in pixels., }, - { - name: 'offset', - type: 'number', - default: 0, - description: ( - - The distance in pixels to render from the{' '} - HoverCard.Content edge. - - ), - }, ]} /> diff --git a/data/primitives/components/popover/0.1.7.mdx b/data/primitives/components/popover/0.1.7.mdx index 3a27f8bdf..ac4e66c50 100644 --- a/data/primitives/components/popover/0.1.7.mdx +++ b/data/primitives/components/popover/0.1.7.mdx @@ -326,18 +326,70 @@ The component that pops out when the popover is open. description: ( When true, overrides the side and - align preferences to prevent collisions with window edges. + align preferences to prevent collisions with boundary edges. ), }, { - name: 'collisionTolerance', + name: 'collisionBoundary', + type: 'Element | null | Array', + typeSimple: 'Boundary', + default: '[]', + description: ( + + The element used as the collision boundary. By default this is the + viewport, though you can provide additional element(s) to be included + in this check. + + ), + }, + { + name: 'collisionPadding', + type: 'number | Partial>', + typeSimple: 'number | Padding', + default: '0', + description: ( + + The distance in pixels from the boundary edges where collision + detection should occur. Accepts a number (same for all sides), or a + partial padding object, for example: {`{ top: 20, left: 20 }`} + . + + ), + }, + { + name: 'arrowPadding', type: 'number', default: '0', description: ( - The distance in pixels from window edges where collision detection - should occur. + The padding between the arrow and the edges of the content. If your + content has border-radius, this will prevent it from + overflowing the corners. + + ), + }, + { + name: 'sticky', + type: '"partial" | "always"', + typeSimple: 'enum', + default: '"partial"', + description: ( + + The sticky behavior on the align axis. "partial" will + keep the content in the boundary as long as the trigger is at least + partially in the boundary whilst "always" will keep the + content in the boundary regardless. + + ), + }, + { + name: 'hideWhenDetached', + type: 'boolean', + default: 'false', + description: ( + + Whether to hide the content when the trigger becomes fully occluded. ), }, @@ -401,17 +453,6 @@ An optional arrow element to render alongside the popover. This can be used to h default: 5, description: The height of the arrow in pixels., }, - { - name: 'offset', - type: 'number', - default: 0, - description: ( - - The distance in pixels to render from the Popover.Content{' '} - edge. - - ), - }, ]} /> diff --git a/data/primitives/components/tooltip/0.1.8.mdx b/data/primitives/components/tooltip/0.1.8.mdx index 7fe8dd112..813bd6607 100644 --- a/data/primitives/components/tooltip/0.1.8.mdx +++ b/data/primitives/components/tooltip/0.1.8.mdx @@ -316,18 +316,70 @@ The component that pops out when the tooltip is open. description: ( When true, overrides the side and - align preferences to prevent collisions with window edges. + align preferences to prevent collisions with boundary edges. ), }, { - name: 'collisionTolerance', + name: 'collisionBoundary', + type: 'Element | null | Array', + typeSimple: 'Boundary', + default: '[]', + description: ( + + The element used as the collision boundary. By default this is the + viewport, though you can provide additional element(s) to be included + in this check. + + ), + }, + { + name: 'collisionPadding', + type: 'number | Partial>', + typeSimple: 'number | Padding', + default: '0', + description: ( + + The distance in pixels from the boundary edges where collision + detection should occur. Accepts a number (same for all sides), or a + partial padding object, for example: {`{ top: 20, left: 20 }`} + . + + ), + }, + { + name: 'arrowPadding', type: 'number', default: '0', description: ( - The distance in pixels from window edges where collision detection - should occur. + The padding between the arrow and the edges of the content. If your + content has border-radius, this will prevent it from + overflowing the corners. + + ), + }, + { + name: 'sticky', + type: '"partial" | "always"', + typeSimple: 'enum', + default: '"partial"', + description: ( + + The sticky behavior on the align axis. "partial" will + keep the content in the boundary as long as the trigger is at least + partially in the boundary whilst "always" will keep the + content in the boundary regardless. + + ), + }, + { + name: 'hideWhenDetached', + type: 'boolean', + default: 'false', + description: ( + + Whether to hide the content when the trigger becomes fully occluded. ), }, @@ -391,17 +443,6 @@ An optional arrow element to render alongside the tooltip. This can be used to h default: 5, description: The height of the arrow in pixels., }, - { - name: 'offset', - type: 'number', - default: 0, - description: ( - - The distance in pixels to render from the Tooltip.Content{' '} - edge. - - ), - }, ]} /> @@ -599,7 +640,7 @@ export function Tooltip({ {content} - + ); diff --git a/data/primitives/overview/releases.mdx b/data/primitives/overview/releases.mdx index 7f59e5401..a2b23459f 100644 --- a/data/primitives/overview/releases.mdx +++ b/data/primitives/overview/releases.mdx @@ -32,6 +32,9 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast - [**Breaking**] Remove `allowPinchZoom` prop, now defaults to `true` - [**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. - Add `data-state` attribute to `Trigger` part +- [**Breaking**] Remove `offset` on `Arrow` part +- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object +- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part @@ -46,10 +49,16 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast - [**Breaking**] Remove `allowPinchZoom` prop, now defaults to `true` - 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**] Remove `offset` on `Arrow` part +- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object +- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part - [**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**] Remove `offset` on `Arrow` part +- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object +- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part @@ -60,6 +69,9 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast - [**Breaking**] Remove `allowPinchZoom` prop, now defaults to `true` - [**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**] Remove `offset` on `Arrow` part +- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object +- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part @@ -108,6 +120,9 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast - [**Breaking**] By default `Tooltip.Content` will remain open when hovering (WCAG 2.1 Content on Hover compliance). `disableHoverableContent` can be supplied to `Tooltip.Provider` to restore previous behavior - [**Breaking**] `side` on `Tooltip.Content` now defaults to `top` - [**Breaking**] `Tooltip.Provider` is now required, you must wrap your app to avoid regressions. +- [**Breaking**] Remove `offset` on `Arrow` part +- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object +- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part ## February 28, 2022 @@ -420,7 +435,7 @@ This release focuses on React 18 support and introduces a number breaking change - Ensure only one click is needed to toggle a single controlled toggle group -- Ensure focus behaviour is consistent on Safari +- Ensure focus behavior is consistent on Safari @@ -435,7 +450,7 @@ This release focuses on React 18 support and introduces a number breaking change - [**Breaking**] Rename `Accordion.Button` to `Accordion.Trigger` - [**Breaking**] Rename `Accordion.Panel` to `Accordion.Content` - [**Breaking**] Rename custom property accordingly (`--radix-accordion-content-height`) -- [**Breaking**] `type=“single”` `Accordion` now has a new `collapsible` prop which is `false` by default. This means that the default behaviour has now changed. By default a user cannot close all items. +- [**Breaking**] `type=“single”` `Accordion` now has a new `collapsible` prop which is `false` by default. This means that the default behavior has now changed. By default a user cannot close all items. diff --git a/data/primitives/utilities/direction-provider/0.1.0.mdx b/data/primitives/utilities/direction-provider/0.1.0.mdx index e8427954d..dd09536f4 100644 --- a/data/primitives/utilities/direction-provider/0.1.0.mdx +++ b/data/primitives/utilities/direction-provider/0.1.0.mdx @@ -34,7 +34,7 @@ export default () => ; ### DirectionProvider -When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `DirectionProvider` component to ensure all of the primitives adjust their behaviour based on the `dir` prop. +When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `DirectionProvider` component to ensure all of the primitives adjust their behavior based on the `dir` prop.