Show shortcuts on hover only

Author: djhi

packages/ra-ui-materialui/src/layout/Menu.stories.tsx

@@ -27,7 +27,7 @@ import ExpandMore from '@mui/icons-material/ExpandMore';
 import QrCode from '@mui/icons-material/QrCode';
 import { Route } from 'react-router-dom';
 
-import { Layout, Menu, Title } from '.';
+import { Layout, Menu, MenuItemLinkClasses, Title } from '.';
 
 export default { title: 'ra-ui-materialui/layout/Menu' };
 
@@ -173,7 +173,7 @@ export const WithKeyboardShortcuts = () => {
             <Menu.Item
                 to="/customers"
                 leftIcon={<PeopleOutlined />}
-                primaryText="Customers"
+                primaryText="Customers very long"
                 keyboardShortcut="G>C"
             />
             <Menu.ResourceItem
@@ -225,7 +225,7 @@ export const WithCustomKeyboardShortcutRepresentation = () => {
             <Menu.Item
                 to="/customers"
                 leftIcon={<PeopleOutlined />}
-                primaryText="Customers"
+                primaryText="Customers very long"
                 keyboardShortcut="ctrl+alt+C"
                 keyboardShortcutRepresentation="ctrl+alt+C"
             />
@@ -262,6 +262,80 @@ export const WithCustomKeyboardShortcutRepresentation = () => {
     );
 };
 
+export const WithCustomKeyboardShortcutRepresentationUsingMenuItemClasses =
+    () => {
+        const CustomMenu = () => (
+            <Menu>
+                <Menu.DashboardItem
+                    keyboardShortcut="ctrl+alt+D"
+                    keyboardShortcutRepresentation={
+                        <div className={MenuItemLinkClasses.shortcut}>
+                            ctrl+alt+D
+                        </div>
+                    }
+                />
+                <Menu.Item
+                    to="/sales"
+                    leftIcon={<PieChartOutlined />}
+                    primaryText="Sales"
+                    keyboardShortcut="ctrl+alt+S"
+                    keyboardShortcutRepresentation={
+                        <div className={MenuItemLinkClasses.shortcut}>
+                            ctrl+alt+S
+                        </div>
+                    }
+                />
+                <Menu.Item
+                    to="/customers"
+                    leftIcon={<PeopleOutlined />}
+                    primaryText="Customers very long"
+                    keyboardShortcut="ctrl+alt+C"
+                    keyboardShortcutRepresentation={
+                        <div className={MenuItemLinkClasses.shortcut}>
+                            ctrl+alt+C
+                        </div>
+                    }
+                />
+                <Menu.ResourceItem
+                    name="products"
+                    leftIcon={<Inventory />}
+                    keyboardShortcut="ctrl+alt+P"
+                    keyboardShortcutRepresentation={
+                        <div className={MenuItemLinkClasses.shortcut}>
+                            ctrl+alt+P
+                        </div>
+                    }
+                />
+            </Menu>
+        );
+        const CustomLayout = ({ children }) => (
+            <Layout menu={CustomMenu}>{children}</Layout>
+        );
+
+        const Dashboard = () => <Page title="Dashboard" />;
+        return (
+            <TestMemoryRouter initialEntries={['/']}>
+                <Admin
+                    dataProvider={testDataProvider()}
+                    layout={CustomLayout}
+                    dashboard={Dashboard}
+                >
+                    <Resource
+                        name="products"
+                        list={<Page title="Products" />}
+                    />
+                    <CustomRoutes>
+                        <Route path="/sales" element={<Page title="Sales" />} />
+                        <Route
+                            path="/customers"
+                            element={<Page title="Customers" />}
+                        />
+                    </CustomRoutes>
+                </Admin>
+            </TestMemoryRouter>
+        );
+    };
+
 const Page = ({ title }) => (
     <>
         <Typography variant="h5" mt={2}>

packages/ra-ui-materialui/src/layout/MenuItemLink.tsx

@@ -21,7 +21,7 @@ import {
     useMediaQuery,
     Theme,
     useForkRef,
-    Box,
+    Typography,
 } from '@mui/material';
 import { useTranslate, useBasename, useEvent } from 'ra-core';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -133,7 +133,7 @@ export const MenuItemLink = forwardRef<any, MenuItemLinkProps>(
         const renderMenuItem = () => {
             return (
                 <StyledMenuItem
-                    className={clsx(className, {
+                    className={clsx(className, MenuItemLinkClasses.root, {
                         [MenuItemLinkClasses.active]: !!match,
                     })}
                     // @ts-ignore
@@ -143,27 +143,24 @@ export const MenuItemLink = forwardRef<any, MenuItemLinkProps>(
                     {...rest}
                     onClick={handleMenuTap}
                 >
-                    <Box
-                        sx={{
-                            flexGrow: 1,
-                            display: 'flex',
-                            alignItems: 'center',
-                        }}
-                    >
-                        {leftIcon && (
-                            <ListItemIcon className={MenuItemLinkClasses.icon}>
-                                {leftIcon}
-                            </ListItemIcon>
-                        )}
+                    {leftIcon && (
+                        <ListItemIcon className={MenuItemLinkClasses.icon}>
+                            {leftIcon}
+                        </ListItemIcon>
+                    )}
+                    <Typography variant="inherit" noWrap sx={{ flexGrow: 1 }}>
                         {children
                             ? children
                             : typeof primaryText === 'string'
-                              ? translate(primaryText, { _: primaryText })
+                              ? translate(primaryText, {
+                                    _: primaryText,
+                                })
                               : primaryText}
-                    </Box>
+                    </Typography>
                     {keyboardShortcut
                         ? keyboardShortcutRepresentation ?? (
                               <KeyboardShortcut
+                                  className={MenuItemLinkClasses.shortcut}
                                   keyboardShortcut={keyboardShortcut}
                               />
                           )
@@ -210,17 +207,34 @@ export type MenuItemLinkProps = Omit<
 const PREFIX = 'RaMenuItemLink';
 
 export const MenuItemLinkClasses = {
+    root: `${PREFIX}-root`,
     active: `${PREFIX}-active`,
     icon: `${PREFIX}-icon`,
+    shortcut: `${PREFIX}-shortcut`,
 };
 
 const StyledMenuItem = styled(MenuItem, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
     color: (theme.vars || theme).palette.text.secondary,
-    justifyContent: 'space-between',
-    gap: theme.spacing(1),
+
+    [`& .${MenuItemLinkClasses.icon}`]: {
+        color: (theme.vars || theme).palette.text.secondary,
+    },
+
+    [`& .${MenuItemLinkClasses.shortcut}`]: {
+        color: (theme.vars || theme).palette.text.secondary,
+        fontSize: theme.typography.body2.fontSize,
+        opacity: 0,
+        display: 'none',
+        transition: 'opacity 0.3s',
+    },
+
+    [`&:hover .${MenuItemLinkClasses.shortcut}`]: {
+        opacity: 0.7,
+        display: 'inline-flex',
+    },
 
     [`&.${MenuItemLinkClasses.active}`]: {
         color: (theme.vars || theme).palette.text.primary,
@@ -238,19 +252,19 @@ const LinkRef = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {
-        RaMenuItemLink: 'root' | 'active' | 'icon';
+        [PREFIX]: 'root' | 'active' | 'icon' | 'shortcut';
     }
 
     interface ComponentsPropsList {
-        RaMenuItemLink: Partial<MenuItemLinkProps>;
+        [PREFIX]: Partial<MenuItemLinkProps>;
     }
 
     interface Components {
-        RaMenuItemLink?: {
-            defaultProps?: ComponentsPropsList['RaMenuItemLink'];
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
             styleOverrides?: ComponentsOverrides<
                 Omit<Theme, 'components'>
-            >['RaMenuItemLink'];
+            >[typeof PREFIX];
         };
     }
 }