gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-21 01:53:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update DropdownMenu styling (#3787)

Browse Source
This commit is contained in:
Zeno Kapitein
2025-11-05 08:40:53 +01:00
committed by GitHub
parent 6d56df7c10
commit 2aa4f2e0b8
2 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/early-cobras-raise.md
+5
View File
@@ -0,0 +1,5 @@
---
"gitbook": patch
---
Update dropdown menu styling
packages/gitbook/src/components/primitives/DropdownMenu.tsx
+10 -12
View File
@@ -24,6 +24,11 @@ const DropdownMenuContext = createContext<{
setOpen: () => {},
});
const DROPDOWN_CONTENT_OUTER_CLASS =
'z-50 flex max-h-(--radix-dropdown-menu-content-available-height) min-w-28 xs:min-w-40 max-w-(--radix-dropdown-menu-content-available-width) origin-top animate-scale-in flex-col pt-2 data-[state=closed]:animate-scale-out';
const DROPDOWN_CONTENT_INNER_CLASS =
'flex flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg';
/**
* Button with a dropdown.
*/
@@ -82,14 +87,9 @@ export function DropdownMenu(props: {
onMouseLeave={() => setHovered(false)}
align={align}
side={side}
className="z-50 animate-scale-in border-tint pt-2"
className={DROPDOWN_CONTENT_OUTER_CLASS}
>
<div
className={tcls(
'flex max-h-[30rem] min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg sm:min-w-52 sm:max-w-80',
className
)}
>
<div className={tcls(DROPDOWN_CONTENT_INNER_CLASS, className)}>
{children}
</div>
</RadixDropdownMenu.Content>
@@ -162,7 +162,7 @@ export function DropdownMenuItem(
} = props;
const itemClassName = tcls(
'rounded-xs straight-corners:rounded-xs circular-corners:rounded-lg px-3 py-1 text-sm flex gap-2 items-center',
'rounded-sm straight-corners:rounded-none circular-corners:rounded-lg px-3 py-1 text-sm flex gap-2 items-center',
active
? 'bg-primary text-primary-strong data-highlighted:bg-primary-hover'
: 'data-highlighted:bg-tint-hover',
@@ -214,11 +214,9 @@ export function DropdownSubMenu(props: { children: React.ReactNode; label: React
<RadixDropdownMenu.SubContent
hideWhenDetached
collisionPadding={8}
className="z-50 animate-present"
className={DROPDOWN_CONTENT_OUTER_CLASS}
>
<div className="flex max-h-96 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto rounded-lg straight-corners:rounded-sm bg-tint-base p-2 shadow-lg ring-1 ring-tint-subtle sm:min-w-52 sm:max-w-80">
{children}
</div>
<div className={DROPDOWN_CONTENT_INNER_CLASS}>{children}</div>
</RadixDropdownMenu.SubContent>
</RadixDropdownMenu.Portal>
</RadixDropdownMenu.Sub>