separator, margins, min-width

concrete-utopia · Jul 15, 2024 · ac4a20f · ac4a20f
1 parent 2daecfa
commit ac4a20f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx b/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx
@@ -94,6 +94,7 @@ import {
   DropdownItem,
   DropdownMenuContainer,
   DropdownMenuItemList,
+  Separator,
 } from '../../../uuiui/radix-components'
 import { ContextMenuWrapper_DEPRECATED } from '../../context-menu-wrapper'
 import type { ContextMenuItem } from '../../context-menu-items'
@@ -975,7 +976,7 @@ export const ComponentPickerDropDown = React.memo<ComponentPickerDropDownProps>(
         return (
           <>
             <DropdownMenuItemList items={preferredChildItems} />
-            <div>----</div>
+            <Separator />
             <DropdownItem
               onSelect={showFullPicker}
               shouldShowCheckboxes={false}
@@ -1004,7 +1005,15 @@ export const ComponentPickerDropDown = React.memo<ComponentPickerDropDownProps>(
     }
   }, [allInsertableComponents, onItemClickFn, page, preferredChildItems, showFullPicker])
 
-  return <DropdownMenuContainer opener={props.opener} contents={contents} onClose={resetPage} />
+  return (
+    <DropdownMenuContainer
+      style={{ minWidth: 280 }}
+      sideOffset={4}
+      opener={props.opener}
+      contents={contents}
+      onClose={resetPage}
+    />
+  )
 })
 
 function contextMenuItemsFromVariants(

diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
@@ -5,9 +5,15 @@ import { colorTheme } from './styles/theme'
 import { Icons } from './icons'
 import { when } from '../utils/react-conditionals'
 
+export const Separator = styled('div', {
+  height: 1,
+  margin: 5,
+  backgroundColor: colorTheme.contextMenuSeparator.value,
+})
+
 const DropdownMenuItemContainer = styled('div', {
   minWidth: 128,
-  padding: '4px 8px',
+  padding: '6px 8px',
   cursor: 'pointer',
   color: colorTheme.contextMenuForeground.value,
   '[data-highlighted] > &': {
@@ -189,11 +195,14 @@ export const DropdownMenu = React.memo<DropdownMenuProps>((props) => {
       e.stopPropagation()
     }
   }, [])
+
+  const opener = React.useMemo(() => props.opener(open), [open, props])
+
   const onEscapeKeyDown = React.useCallback((e: KeyboardEvent) => e.stopPropagation(), [])
   return (
     <RadixDropdownMenu.Root open={open} onOpenChange={onOpen}>
       <RadixDropdownMenu.Trigger style={{ background: 'none', border: 'none' }}>
-        {props.opener(open)}
+        {opener}
       </RadixDropdownMenu.Trigger>
       <RadixDropdownMenu.Portal>
         <RadixDropdownContent
@@ -217,6 +226,7 @@ export interface DropdownMenuContainerProps {
   onClose?: () => void
   sideOffset?: number
   alignOffset?: number
+  style?: React.CSSProperties
 }
 
 export const DropdownMenuContainer = React.memo<DropdownMenuContainerProps>((props) => {
@@ -252,6 +262,7 @@ export const DropdownMenuContainer = React.memo<DropdownMenuContainerProps>((pro
           collisionPadding={{ top: -4 }}
           align='start'
           alignOffset={props.alignOffset}
+          style={{ ...props.style }}
         >
           {props.contents}
         </RadixDropdownContent>