[Menu] Migrate to emotion, polish (#25368)

mui · Mar 14, 2021 · f9f5983 · f9f5983
1 parent d3eca29
commit f9f5983
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 30 deletions.
diff --git a/docs/pages/api-docs/menu.json b/docs/pages/api-docs/menu.json
@@ -24,7 +24,7 @@
     }
   },
   "name": "Menu",
-  "styles": { "classes": ["paper", "list"], "globalClasses": {}, "name": "MuiMenu" },
+  "styles": { "classes": ["root", "paper", "list"], "globalClasses": {}, "name": "MuiMenu" },
   "spread": true,
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/material-ui/src/Menu/Menu.js",

diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json
@@ -16,6 +16,7 @@
     "variant": "The variant to use. Use <code>menu</code> to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element."
   },
   "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
     "paper": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Paper component"

diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts
@@ -28,6 +28,8 @@ export interface MenuProps extends StandardProps<PopoverProps & Partial<Transiti
    * Override or extend the styles applied to the component.
    */
   classes?: {
+    /** Styles applied to the root element. */
+    root?: string;
     /** Styles applied to the Paper component. */
     paper?: string;
     /** Styles applied to the List component via `MenuList`. */

diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
@@ -23,30 +23,33 @@ const LTR_ORIGIN = {
 };
 
 const overridesResolver = (props, styles) => {
-  return deepmerge(styles.popover || {}, {
-    [`& .${menuClasses.paper}`]: styles.paper,
-    [`& .${menuClasses.list}`]: styles.list,
-  });
+  return deepmerge(
+    {
+      [`& .${menuClasses.paper}`]: styles.paper,
+      [`& .${menuClasses.list}`]: styles.list,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {
   const { classes } = styleProps;
 
   const slots = {
-    popover: ['popover'],
+    root: ['root'],
     paper: ['paper'],
     list: ['list'],
   };
 
   return composeClasses(slots, getMenuUtilityClass, classes);
 };
 
-const MenuPopover = experimentalStyled(
+const MenuRoot = experimentalStyled(
   Popover,
   { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' },
   {
     name: 'MuiMenu',
-    slot: 'Popover',
+    slot: 'Root',
     overridesResolver,
   },
 )({});
@@ -93,8 +96,8 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
     PaperProps = {},
     PopoverClasses,
     transitionDuration = 'auto',
-    variant = 'selectedMenu',
     TransitionProps: { onEntering, ...TransitionProps } = {},
+    variant = 'selectedMenu',
     ...other
   } = props;
 
@@ -103,11 +106,11 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
     autoFocus,
     disableAutoFocusItem,
     MenuListProps,
+    onEntering,
     PaperProps,
     transitionDuration,
-    variant,
-    onEntering,
     TransitionProps,
+    variant,
   };
 
   const classes = useUtilityClasses(styleProps);
@@ -117,8 +120,6 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
   const menuListActionsRef = React.useRef(null);
   const contentAnchorRef = React.useRef(null);
 
-  const getContentAnchorEl = () => contentAnchorRef.current;
-
   const handleEntering = (element, isAppearing) => {
     if (menuListActionsRef.current) {
       menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
@@ -187,8 +188,8 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
   });
 
   return (
-    <MenuPopover
-      getContentAnchorEl={getContentAnchorEl}
+    <MenuRoot
+      getContentAnchorEl={() => contentAnchorRef.current}
       classes={PopoverClasses}
       onClose={onClose}
       anchorOrigin={isRtl ? RTL_ORIGIN : LTR_ORIGIN}
@@ -201,6 +202,7 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
           root: classes.paper,
         },
       }}
+      className={classes.root}
       open={open}
       ref={ref}
       transitionDuration={transitionDuration}
@@ -219,7 +221,7 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
       >
         {items}
       </MenuMenuList>
-    </MenuPopover>
+    </MenuRoot>
   );
 });
 

diff --git a/packages/material-ui/src/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js
@@ -25,15 +25,14 @@ describe('<Menu />', () => {
     muiName: 'MuiMenu',
     refInstanceof: window.HTMLDivElement,
     testDeepOverrides: { slotName: 'list', slotClassName: classes.list },
-    testRootOverrides: { slotName: 'popover', slotClassName: classes.popover },
+    testRootOverrides: { slotName: 'root', slotClassName: classes.root },
     testVariantProps: { variant: 'menu' },
     skip: [
+      'rootClass', // the root is portal
       'componentProp',
       'componentsProp',
-      // react-transition-group issue
-      'reactTestRenderer',
-      'themeDefaultProps',
-      'themeStyleOverrides',
+      'reactTestRenderer', // react-transition-group issue
+      'themeDefaultProps', // the root is portal
     ],
   }));
 

diff --git a/packages/material-ui/src/Menu/index.d.ts b/packages/material-ui/src/Menu/index.d.ts
@@ -1,2 +1,5 @@
 export { default } from './Menu';
 export * from './Menu';
+
+export { default as menuClasses } from './menuClasses';
+export * from './menuClasses';
diff --git a/packages/material-ui/src/Menu/menuClasses.js b/packages/material-ui/src/Menu/menuClasses.js
@@ -4,6 +4,6 @@ export function getMenuUtilityClass(slot) {
   return generateUtilityClass('MuiMenu', slot);
 }
 
-const menuClasses = generateUtilityClasses('MuiMenu', ['paper', 'list']);
+const menuClasses = generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
 export default menuClasses;
diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js
@@ -43,14 +43,12 @@ describe('<Modal />', () => {
       refInstanceof: window.HTMLDivElement,
       testVariantProps: { hideBackdrop: true },
       skip: [
-        'rootClass',
+        'rootClass', // the root is portal
         'componentProp',
         'componentsProp',
-        // Can not test this because everything is applied to second element
-        'themeDefaultProps',
+        'themeDefaultProps', // the root is portal
         'themeStyleOverrides',
-        // https://github.com/facebook/react/issues/11565
-        'reactTestRenderer',
+        'reactTestRenderer', // https://github.com/facebook/react/issues/11565
       ],
     }),
   );

diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
@@ -72,11 +72,10 @@ describe('<Popover />', () => {
     skip: [
       'componentProp',
       'componentsProp',
-      'themeDefaultProps',
+      'themeDefaultProps', // the root is portal
       'themeStyleOverrides',
       'themeVariants',
-      // react-transition-group issue
-      'reactTestRenderer',
+      'reactTestRenderer', // react-transition-group issue
     ],
   }));