[Menu][base-ui] Focus Menu Items on hover (#40755)

Co-authored-by: zanivan <victorzanivan@gmail.com>
mui · Jan 29, 2024 · 147db41 · 147db41
1 parent 2b751cf
commit 147db41
Show file tree

Hide file tree

Showing 26 changed files with 68 additions and 103 deletions.
diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.js b/docs/data/base/components/menu/MenuIntroduction/css/index.js
@@ -111,7 +111,7 @@ function Styles() {
       border-bottom: none;
     }
 
-    .CustomMenuIntroduction--item.${menuItemClasses.focusVisible} {
+    .CustomMenuIntroduction--item:focus {
       outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
       background-color: ${isDarkMode ? grey[800] : grey[100]};
       color: ${isDarkMode ? grey[300] : grey[900]};
@@ -121,11 +121,6 @@ function Styles() {
       color: ${isDarkMode ? grey[700] : grey[400]};
     }
 
-    .CustomMenuIntroduction--item:hover:not(.${menuItemClasses.disabled}) {
-      background-color: ${isDarkMode ? cyan[800] : cyan[50]};
-      color: ${isDarkMode ? grey[300] : grey[900]};
-    }
-
     .TriggerButtonIntroduction {
       font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;

diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx
@@ -111,7 +111,7 @@ function Styles() {
       border-bottom: none;
     }
 
-    .CustomMenuIntroduction--item.${menuItemClasses.focusVisible} {
+    .CustomMenuIntroduction--item:focus {
       outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
       background-color: ${isDarkMode ? grey[800] : grey[100]};
       color: ${isDarkMode ? grey[300] : grey[900]};
@@ -121,11 +121,6 @@ function Styles() {
       color: ${isDarkMode ? grey[700] : grey[400]};
     }
 
-    .CustomMenuIntroduction--item:hover:not(.${menuItemClasses.disabled}) {
-      background-color: ${isDarkMode ? cyan[800] : cyan[50]};
-      color: ${isDarkMode ? grey[300] : grey[900]};
-    }
-
     .TriggerButtonIntroduction {
       font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;

diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.js b/docs/data/base/components/menu/MenuIntroduction/system/index.js
@@ -83,7 +83,7 @@ const MenuItem = styled(BaseMenuItem)(
     border-bottom: none;
   }
 
-  &.${menuItemClasses.focusVisible} {
+  &:focus {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -92,11 +92,6 @@ const MenuItem = styled(BaseMenuItem)(
   &.${menuItemClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
-
-  &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
-    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
-  }
   `,
 );
 

diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
@@ -83,7 +83,7 @@ const MenuItem = styled(BaseMenuItem)(
     border-bottom: none;
   }
 
-  &.${menuItemClasses.focusVisible} {
+  &:focus {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -92,11 +92,6 @@ const MenuItem = styled(BaseMenuItem)(
   &.${menuItemClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
-
-  &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
-    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
-  }
   `,
 );
 

diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
@@ -119,7 +119,7 @@ const MenuItem = React.forwardRef((props, ref) => {
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300',
+        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}

diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx
@@ -103,7 +103,7 @@ const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>((props, ref) =>
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300',
+        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}

diff --git a/docs/data/base/components/menu/MenuSimple/css/index.js b/docs/data/base/components/menu/MenuSimple/css/index.js
@@ -113,7 +113,7 @@ function Styles() {
       border-bottom: none;
     }
 
-    .CustomMenuSimple--item.${menuItemClasses.focusVisible} {
+    .CustomMenuSimple--item:focus {
       outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
       background-color: ${isDarkMode ? grey[800] : grey[100]};
       color: ${isDarkMode ? grey[300] : grey[900]};
@@ -123,11 +123,6 @@ function Styles() {
       color: ${isDarkMode ? grey[700] : grey[400]};
     }
 
-    .CustomMenuSimple--item:hover:not(.${menuItemClasses.disabled}) {
-      background-color: ${isDarkMode ? cyan[800] : cyan[50]};
-      color: ${isDarkMode ? grey[300] : grey[900]};
-    }
-
     .TriggerButtonSimple {
       font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;

diff --git a/docs/data/base/components/menu/MenuSimple/css/index.tsx b/docs/data/base/components/menu/MenuSimple/css/index.tsx
@@ -113,7 +113,7 @@ function Styles() {
       border-bottom: none;
     }
 
-    .CustomMenuSimple--item.${menuItemClasses.focusVisible} {
+    .CustomMenuSimple--item:focus {
       outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
       background-color: ${isDarkMode ? grey[800] : grey[100]};
       color: ${isDarkMode ? grey[300] : grey[900]};
@@ -123,11 +123,6 @@ function Styles() {
       color: ${isDarkMode ? grey[700] : grey[400]};
     }
 
-    .CustomMenuSimple--item:hover:not(.${menuItemClasses.disabled}) {
-      background-color: ${isDarkMode ? cyan[800] : cyan[50]};
-      color: ${isDarkMode ? grey[300] : grey[900]};
-    }
-
     .TriggerButtonSimple {
       font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;

diff --git a/docs/data/base/components/menu/MenuSimple/system/index.js b/docs/data/base/components/menu/MenuSimple/system/index.js
@@ -85,7 +85,7 @@ const MenuItem = styled(BaseMenuItem)(
     border-bottom: none;
   }
 
-  &.${menuItemClasses.focusVisible} {
+  &:focus {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -94,11 +94,6 @@ const MenuItem = styled(BaseMenuItem)(
   &.${menuItemClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
-
-  &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
-    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
-  }
   `,
 );
 

diff --git a/docs/data/base/components/menu/MenuSimple/system/index.tsx b/docs/data/base/components/menu/MenuSimple/system/index.tsx
@@ -85,7 +85,7 @@ const MenuItem = styled(BaseMenuItem)(
     border-bottom: none;
   }
 
-  &.${menuItemClasses.focusVisible} {
+  &:focus {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -94,11 +94,6 @@ const MenuItem = styled(BaseMenuItem)(
   &.${menuItemClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
-
-  &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
-    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
-  }
   `,
 );
 

diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js
@@ -119,7 +119,7 @@ const MenuItem = React.forwardRef((props, ref) => {
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300',
+        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}

diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
@@ -103,7 +103,7 @@ const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>((props, ref) =>
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300',
+        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}

diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
@@ -160,13 +160,13 @@ function Styles() {
       border-bottom: none;
     }
 
-    .menu-item.focus-visible {
+    .menu-item:focus {
       background-color: ${grey[100]};
       color: ${grey[900]};
       outline: 0;
     }
 
-    .mode-dark .menu-item.focus-visible {
+    .mode-dark .menu-item:focus {
       background-color: ${grey[800]};
       color: ${grey[300]};
     }
@@ -175,19 +175,9 @@ function Styles() {
       color: ${grey[400]};
     }
 
-    .mode-dark .menu-item.disabled {
-      color: ${grey[700]};
-    }
-
-    .menu-item:hover:not(.disabled) {
-      background-color: ${grey[100]};
-      color: ${grey[900]};
-    }
-
-    .mode-dark .menu-item:hover:not(.disabled) {
-      background-color: ${grey[800]};
-      color: ${grey[300]};
-    }
+  .mode-dark .menu-item.disabled {
+    color: ${grey[700]};
+  }
 
     .button {
       font-family: 'IBM Plex Sans', sans-serif;

diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
@@ -159,13 +159,13 @@ function Styles() {
       border-bottom: none;
     }
 
-    .menu-item.focus-visible {
+    .menu-item:focus {
       background-color: ${grey[100]};
       color: ${grey[900]};
       outline: 0;
     }
 
-    .mode-dark .menu-item.focus-visible {
+    .mode-dark .menu-item:focus {
       background-color: ${grey[800]};
       color: ${grey[300]};
     }
@@ -174,19 +174,9 @@ function Styles() {
       color: ${grey[400]};
     }
 
-    .mode-dark .menu-item.disabled {
-      color: ${grey[700]};
-    }
-
-    .menu-item:hover:not(.disabled) {
-      background-color: ${grey[100]};
-      color: ${grey[900]};
-    }
-
-    .mode-dark .menu-item:hover:not(.disabled) {
-      background-color: ${grey[800]};
-      color: ${grey[300]};
-    }
+  .mode-dark .menu-item.disabled {
+    color: ${grey[700]};
+  }
 
     .button {
       font-family: 'IBM Plex Sans', sans-serif;

diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -113,7 +113,7 @@ const MenuItem = styled(BaseMenuItem)(
     border-bottom: none;
   }
 
-  &.${menuItemClasses.focusVisible} {
+  &:focus {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -122,11 +122,6 @@ const MenuItem = styled(BaseMenuItem)(
   &.${menuItemClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
-
-  &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  }
   `,
 );
 

diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -107,7 +107,7 @@ const MenuItem = styled(BaseMenuItem)(
     border-bottom: none;
   }
 
-  &.${menuItemClasses.focusVisible} {
+  &:focus {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -116,11 +116,6 @@ const MenuItem = styled(BaseMenuItem)(
   &.${menuItemClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
-
-  &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  }
   `,
 );
 

diff --git a/docs/pages/base-ui/api/menu-item.json b/docs/pages/base-ui/api/menu-item.json
@@ -1,6 +1,7 @@
 {
   "props": {
     "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "disableFocusOnHover": { "type": { "name": "bool" }, "default": "false" },
     "label": { "type": { "name": "string" } },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },

diff --git a/docs/pages/base-ui/api/use-menu-item.json b/docs/pages/base-ui/api/use-menu-item.json
@@ -5,6 +5,10 @@
       "required": true
     },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
+    "disableFocusOnHover": {
+      "type": { "name": "boolean", "description": "boolean" },
+      "default": "false"
+    },
     "id": { "type": { "name": "string", "description": "string" } },
     "label": { "type": { "name": "string", "description": "string" } },
     "onClick": {

diff --git a/docs/public/static/components-gallery/base-theme.css b/docs/public/static/components-gallery/base-theme.css
@@ -428,7 +428,7 @@
   border-bottom: none;
 }
 
-.GalleryMenu-item.base--focusVisible {
+.GalleryMenu-item:focus {
   outline: none;
   box-shadow: var(--shadow-interactive-focus-visible);
   background-color: var(--bg-soft);
@@ -439,11 +439,6 @@
   color: var(--font-color-soft);
 }
 
-.GalleryMenu-item:hover:not(.base--disabled) {
-  background-color: var(--bg-soft);
-  color: var(--font-color-soft);
-}
-
 .GalleryMenu {
   z-index: 1;
 }

diff --git a/docs/translations/api-docs-base/menu-item/menu-item.json b/docs/translations/api-docs-base/menu-item/menu-item.json
@@ -2,6 +2,9 @@
   "componentDescription": "An unstyled menu item to be used within a Menu.",
   "propDescriptions": {
     "disabled": { "description": "If <code>true</code>, the menu item will be disabled." },
+    "disableFocusOnHover": {
+      "description": "If <code>true</code>, the menu item won&#39;t receive focus when the mouse moves over it."
+    },
     "label": {
       "description": "A text representation of the menu item&#39;s content. Used for keyboard text navigation matching."
     },

diff --git a/docs/translations/api-docs/use-menu-item/use-menu-item.json b/docs/translations/api-docs/use-menu-item/use-menu-item.json
@@ -1,6 +1,10 @@
 {
   "hookDescription": "",
-  "parametersDescriptions": {},
+  "parametersDescriptions": {
+    "disableFocusOnHover": {
+      "description": "If <code>true</code>, the menu item won&#39;t receive focus when the mouse moves over it."
+    }
+  },
   "returnValueDescriptions": {
     "disabled": { "description": "If <code>true</code>, the component is disabled." },
     "focusVisible": {

diff --git a/packages/mui-base/src/MenuItem/MenuItem.tsx b/packages/mui-base/src/MenuItem/MenuItem.tsx
@@ -114,6 +114,12 @@ MenuItem.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, the menu item won't receive focus when the mouse moves over it.
+   *
+   * @default false
+   */
+  disableFocusOnHover: PropTypes.bool,
   /**
    * A text representation of the menu item's content.
    * Used for keyboard text navigation matching.