fix: Revert MenuItem root slot to support only div

Follow up of #26257
microsoft · Jan 9, 2023 · 45afaea · 45afaea
1 parent 55c6dc1
commit 45afaea
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 23 deletions.
diff --git a/packages/react-components/react-menu/etc/react-menu.api.md b/packages/react-components/react-menu/etc/react-menu.api.md
@@ -162,7 +162,7 @@ export type MenuItemSelectableState = MenuItemSelectableProps & {
 
 // @public (undocumented)
 export type MenuItemSlots = {
-    root: Slot<'div', 'button'>;
+    root: Slot<'div'>;
     icon?: Slot<'span'>;
     checkmark?: Slot<'span'>;
     submenuIndicator?: Slot<'span'>;
@@ -171,9 +171,7 @@ export type MenuItemSlots = {
 };
 
 // @public (undocumented)
-export type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
-    isNativeButton: boolean;
-};
+export type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
 
 // @public
 export const MenuList: ForwardRefComponent<MenuListProps>;

diff --git a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts
@@ -1,7 +1,7 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type MenuItemSlots = {
-  root: Slot<'div', 'button'>;
+  root: Slot<'div'>;
 
   /**
    * Icon slot rendered before children content
@@ -55,6 +55,4 @@ export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
 };
 
 export type MenuItemState = ComponentState<MenuItemSlots> &
-  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
-    isNativeButton: boolean;
-  };
+  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
@@ -46,7 +46,6 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
       content: 'span',
       secondaryContent: 'span',
     },
-    isNativeButton: as === 'button',
     root: getNativeElementProps(
       as,
       useARIAButtonProps(as, {

diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -19,19 +19,6 @@ export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
 const useStyles = makeStyles({
   focusIndicator: createFocusOutlineStyle(),
   // TODO: this should be extracted to another package
-  resetButton: {
-    boxSizing: 'content-box',
-    backgroundColor: 'inherit',
-    color: 'inherit',
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    lineHeight: 'normal',
-    ...shorthands.borderColor('transparent'),
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
-    WebkitAppearance: 'button',
-    textAlign: 'unset',
-  },
   root: {
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     position: 'relative',
@@ -115,7 +102,6 @@ export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
     menuItemClassNames.root,
-    state.isNativeButton && styles.resetButton,
     styles.root,
     styles.focusIndicator,
     state.disabled && styles.disabled,