Skip to content

Commit

Permalink
Document popper changes (#437)
Browse files Browse the repository at this point in the history 
* Update changelog

* Document prop changes

* Update demos with props

* Update live demos

* Add missing portals

* Update deps

* Revert "Update live demos"

This reverts commit 981d20a.

* 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
  • Loading branch information
@benoitgrelard
benoitgrelard authored Jul 20, 2022
1 parent 1b57132 commit 646186a
Show file tree
Hide file tree
Showing 15 changed files with 1,358 additions and 1,971 deletions.
28 changes: 26 additions & 2 deletions components/DocCodeBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
6 changes: 3 additions & 3 deletions components/demos/DropdownMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@ const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
fill: 'white',
});

function Content({ children, arrowOffset, ...props }) {
function Content({ children, ...props }) {
return (
<DropdownMenuPrimitive.Portal>
<StyledContent {...props}>
{children}
<StyledArrow offset={arrowOffset} />
<StyledArrow />
</StyledContent>
</DropdownMenuPrimitive.Portal>
);
Expand Down Expand Up @@ -190,7 +190,7 @@ export const DropdownMenuDemo = () => {
</IconButton>
</DropdownMenuTrigger>

<DropdownMenuContent sideOffset={5} arrowOffset={12}>
<DropdownMenuContent sideOffset={5}>
<DropdownMenuItem>
New Tab <RightSlot>⌘+T</RightSlot>
</DropdownMenuItem>
Expand Down
2 changes: 1 addition & 1 deletion components/marketing/DeveloperExperienceSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,7 @@ export const DeploymentPopover = ({ children }) => {
<Popover.Portal>
<PopoverContent
align="start"
collisionTolerance={10}
collisionPadding={10}
onOpenAutoFocus={(event) => {
// Focus the close button when popover opens
popoverCloseButton.current?.focus();
Expand Down
133 changes: 61 additions & 72 deletions components/marketing/MainHeroDropdownMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,82 +85,71 @@ export function MainHeroDropdownMenu() {
</DemoButton>
</DropdownMenuPrimitive.Trigger>

<Box
// Position it manually because iOS Safari is buggy
// with transforms and horizontal scroll containers
css={{
'[data-radix-popper-content-wrapper]': {
left: '50% !important',
transform: 'translate(-50%, 155px) !important',
},
<DropdownMenuContent
ref={contentRef}
sideOffset={5}
avoidCollisions={false}
onEscapeKeyDown={(event) => {
event.preventDefault();
if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) {
setOpen(false);
}
}}
>
<DropdownMenuContent
ref={contentRef}
sideOffset={5}
avoidCollisions={false}
onEscapeKeyDown={(event) => {
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;
}
}}
>
<DropdownMenuArrow />
<DropdownMenuItem>New Tab</DropdownMenuItem>
<DropdownMenuItem>New Window</DropdownMenuItem>
<DropdownMenuSeparator />
initialAutoFocusPrevented.current = true;
}
}}
>
<DropdownMenuArrow />
<DropdownMenuItem>New Tab</DropdownMenuItem>
<DropdownMenuItem>New Window</DropdownMenuItem>
<DropdownMenuSeparator />

<DropdownMenuPrimitive.Sub>
<DropdownMenuSubTrigger>
Favorites
<CaretRightIcon style={{ marginLeft: 'auto', marginRight: -5 }} />
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>
<GitHubLogoIcon style={{ marginLeft: -15, marginRight: 10 }} />
GitHub
</DropdownMenuItem>
<DropdownMenuItem>
<StitchesLogoIcon style={{ marginLeft: -15, marginRight: 10 }} />
Stitches
</DropdownMenuItem>
<DropdownMenuItem>
<TwitterLogoIcon style={{ marginLeft: -15, marginRight: 10 }} />
Twitter
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPrimitive.Sub>
<DropdownMenuPrimitive.Sub>
<DropdownMenuSubTrigger>
Favorites
<CaretRightIcon style={{ marginLeft: 'auto', marginRight: -5 }} />
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>
<GitHubLogoIcon style={{ marginLeft: -15, marginRight: 10 }} />
GitHub
</DropdownMenuItem>
<DropdownMenuItem>
<StitchesLogoIcon style={{ marginLeft: -15, marginRight: 10 }} />
Stitches
</DropdownMenuItem>
<DropdownMenuItem>
<TwitterLogoIcon style={{ marginLeft: -15, marginRight: 10 }} />
Twitter
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPrimitive.Sub>

<DropdownMenuItem>Downloads</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon style={{ marginLeft: -18, marginRight: 0 }} />
</DropdownMenuPrimitive.ItemIndicator>
Show Toolbar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem checked={showUrls} onCheckedChange={setShowUrls}>
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon style={{ marginLeft: -18, marginRight: 0 }} />
</DropdownMenuPrimitive.ItemIndicator>
Show Full URLs
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</Box>
<DropdownMenuItem>Downloads</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon style={{ marginLeft: -18, marginRight: 0 }} />
</DropdownMenuPrimitive.ItemIndicator>
Show Toolbar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem checked={showUrls} onCheckedChange={setShowUrls}>
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon style={{ marginLeft: -18, marginRight: 0 }} />
</DropdownMenuPrimitive.ItemIndicator>
Show Full URLs
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenuPrimitive.Root>
);
}
109 changes: 49 additions & 60 deletions components/marketing/MainHeroPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,73 +36,62 @@ export function MainHeroPopover() {
<DemoButton css={{ mb: 120 }}>Dimensions</DemoButton>
</PopoverPrimitive.Trigger>

<Box
css={{
// Position it manually because iOS Safari is buggy
// with transforms and horizontal scroll containers
'[data-radix-popper-content-wrapper]': {
left: '50% !important',
transform: 'translate(-50%, 155px) !important',
},
<PopoverContent
ref={contentRef}
side="bottom"
sideOffset={5}
avoidCollisions={false}
onInteractOutside={(event) => event.preventDefault()}
onEscapeKeyDown={(event) => {
event.preventDefault();
if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) {
setOpen(false);
}
}}
>
<PopoverContent
ref={contentRef}
side="bottom"
sideOffset={5}
avoidCollisions={false}
onInteractOutside={(event) => 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();
}
}
}}
>
<PopoverArrow />
}
}}
>
<PopoverArrow />

<Text as="h2" size="3" css={{ fontWeight: '500', mb: '$2', lineHeight: 1.2 }}>
Dimensions
</Text>
<Text as="h2" size="3" css={{ fontWeight: '500', mb: '$2', lineHeight: 1.2 }}>
Dimensions
</Text>

<Grid
align="center"
css={{ gridTemplateColumns: 'auto 100px', columnGap: '$5', rowGap: '$1' }}
>
<Text size="1">Width</Text>
<TextField defaultValue="100%" />
<Text size="1">Height</Text>
<TextField defaultValue="20vh" />
<Text size="1">Margin</Text>
<TextField defaultValue="0" />
<Text size="1">Padding</Text>
<TextField defaultValue="10%" />
</Grid>
<Grid
align="center"
css={{ gridTemplateColumns: 'auto 100px', columnGap: '$5', rowGap: '$1' }}
>
<Text size="1">Width</Text>
<TextField defaultValue="100%" />
<Text size="1">Height</Text>
<TextField defaultValue="20vh" />
<Text size="1">Margin</Text>
<TextField defaultValue="0" />
<Text size="1">Padding</Text>
<TextField defaultValue="10%" />
</Grid>

<PopoverPrimitive.Close asChild>
<DemoIconButton>
<Cross2Icon />
</DemoIconButton>
</PopoverPrimitive.Close>
</PopoverContent>
</Box>
<PopoverPrimitive.Close asChild>
<DemoIconButton>
<Cross2Icon />
</DemoIconButton>
</PopoverPrimitive.Close>
</PopoverContent>
</PopoverPrimitive.Root>
);
}
4 changes: 2 additions & 2 deletions data/blog/under-the-spotlight-popover.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading

0 comments on commit 646186a

Please sign in to comment.