context menu: Adjust item disabled state when there is docs aside (#25860)

Danilo Leal created

When a context menu item has a documentation aside element attached to
it, we're now hiding the keybinding (which wouldn't trigger anything
anyway) to make room for displaying an info icon, with the purpose of
indicating the existence of the docs aside, which will typically explain
the reason why the itemโ€™s disabled in the first place.

Also, changed the label color to use the `Disabled` token; more
appropriate for this, and just slightly darker, which is great!

<img
src="https://github.com/user-attachments/assets/a7f9f022-16d1-41d5-b1b5-3cbcc9630cc8"
width="500px"/>

Release Notes:

- N/A

Change summary

crates/ui/src/components/context_menu.rs | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)

Detailed changes

crates/ui/src/components/context_menu.rs ๐Ÿ”—

@@ -614,7 +614,7 @@ impl Render for ContextMenu {
                                             };
 
                                             let label_color = if *disabled {
-                                                Color::Muted
+                                                Color::Disabled
                                             } else {
                                                 Color::Default
                                             };
@@ -659,7 +659,7 @@ impl Render for ContextMenu {
                                             div()
                                                 .id(("context-menu-child", ix))
                                                 .when_some(
-                                                    documentation_aside_callback,
+                                                    documentation_aside_callback.clone(),
                                                     |this, documentation_aside_callback| {
                                                         this.occlude().on_hover(cx.listener(
                                                             move |menu, hovered, _, cx| {
@@ -732,10 +732,16 @@ impl Render for ContextMenu {
                                                                     })
                                                                     .map(|binding| {
                                                                         div().ml_4().child(binding)
+                                                                            .when(*disabled && documentation_aside_callback.is_some(), |parent| {
+                                                                                parent.invisible()
+                                                                            })
                                                                     })
                                                                         },
                                                                     ),
-                                                                ),
+                                                                )
+                                                                .when(*disabled && documentation_aside_callback.is_some(), |parent| {
+                                                                    parent.child(Icon::new(IconName::Info).size(IconSize::XSmall).color(Color::Muted))
+                                                                }),
                                                         )
                                                         .on_click({
                                                             let context =