excalidraw Redesign Context menu 🔥

The context menu is becoming bigger and overloaded with more and more options so we need to revamp it.

Let's discuss the ideas here on how we can improve it

Nov 16 '22 11:11 ad1992

Hi, @ad1992

An idea:

Or the "copy/paste as..." actions could be all grouped together, as Figma does:

Schermata 2022-11-27 alle 11 09 52

Nov 27 '22 10:11 adarkforce

@adarkforce yes, this is what we'll want to do. Probably best to use https://www.radix-ui.com/docs/primitives/components/context-menu for this.

But, before we do that, this should land first: https://github.com/excalidraw/excalidraw/issues/5926 (in progress)

Nov 27 '22 17:11 dwelle

Should be implemented using @radix-ui/react-context-menu, or possibly reuse @radix-ui/react-dropdown-menu (we'll soon be using for main menu) if it turns out that the contextmenu adds too much size on top of their dropdownmenu.

Jun 16 '23 15:06 dwelle

Hi, looks like #5926 has been merged. Can I work on this one?

Jul 30 '23 04:07 jamiecjm

Hi @jamiecjm, sure thing!

I'll send you the design spec tomorrow.

Implementation-wise, let's use the @radix-ui/react-dropdown-menu package we're using in https://github.com/excalidraw/excalidraw/pull/6483 (you don't need to wait for the PR to be merged and just install it directly).

Jul 30 '23 22:07 dwelle

Thanks! What's the reason of not using @radix-ui/react-context-menu? Seems to be more straightforward implementation wise and the size is around 26.55 kB

Jul 30 '23 23:07 jamiecjm

@jamiecjm the size seems too large for context menu, implementation wise I am hoping it should be similar using the menu as well. However if you want you can check how much bundle size is getting increased with context-menu by running yarn size in src/packages/excalidraw depending on our usage and based on that we can decide.

Jul 31 '23 03:07 ad1992

Tested this using #6483

With react-dropdown-menu:

With react-context-menu:

I can use react-dropdown-menu, I'm just curious.

Jul 31 '23 05:07 jamiecjm

so almost ~17kB increased, lets go ahead dropdown then @jamiecjm :)

Effort wise I am hoping it would be similar ?

Jul 31 '23 10:07 ad1992

Yeah it should be similar

Jul 31 '23 21:07 jamiecjm

@jamiecjm here's the context menu design spec:

https://www.figma.com/file/EvavjRtXUmHjrcNIBTAMxI/Public-components?type=design&node-id=9%3A649&mode=design&t=nawGicyIY1jpomIp-1

Aug 01 '23 08:08 dwelle

How does it look in dark mode? Does using the variables/design token adjust to dark/light mode automatically?

Aug 02 '23 06:08 jamiecjm

How does it look in dark mode? Does using the variables/design token adjust to dark/light mode automatically?

@jamiecjm yes the css variables will take care of dark mode, there are equivalent values in dark mode https://github.com/excalidraw/excalidraw/blob/master/src/css/theme.scss#L138

Aug 02 '23 10:08 ad1992

@jamiecjm I've added the dark mode.

And by mistake the figma design I posted above was using a color scheme we will deploy later and does not reflect the current one in production. I've updated the file: https://www.figma.com/file/EvavjRtXUmHjrcNIBTAMxI/Public-components?type=design&node-id=32%3A4746&mode=design&t=yqNXPLjBOd49aMhh-1

Aug 02 '23 13:08 dwelle

What should the hover state of Delete look like? The current behaviour has a red background on hover