ContextQMD
Back to Fluentui

Menu component Migration guide

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.mdx

4.40.2-hotfix25.5 KB
Original Source

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Migration/from v0/Components/Menu Migration" />

Menu component Migration guide

Overview:

Menu component is a replacement for MenuButton.

Before:

tsx
import { MenuButton, Button } from '@fluentui/react-northstar';
const Component = () => <MenuButton trigger={<Button content="Open" title="Open" />} menu={['1', '2', '3']} />;

After:

tsx
import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Button } from '@fluentui/react-components';

export const Component = () => {
  <Menu>
    <MenuTrigger>
      <Button>Open</Button>
    </MenuTrigger>
    <MenuPopover>
      <MenuList>
        <MenuItem>1</MenuItem>
        <MenuItem>2</MenuItem>
        <MenuItem>3</MenuItem>
      </MenuList>
    </MenuPopover>
  </Menu>;
};

How to migrate props:

`MenuButton` propsmigrate guide
as, classNamekeep it as is
variables, styles, designsee [Migrate style overrides](#migrate-style-overrides) in this document
accessibilitysee [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--docs)
ref, keykeep it as is
contextMenuuse `openOnContext` instead
menusee [Migrate menu and trigger props](#./Migrate-`menu`-and-`trigger`-props) in this document
mouseLeaveDelayreplace with `hoverDelay`
onreplace `on='hover'` with `openOnHover`; `on='context'` with `openOnContext`
onMenuItemClickuse `onClick` with each `MenuItem` instead
defaultOpenkeep it as is
onOpenChangekeep it as is
openkeep it as is
triggersee [Migrate menu and trigger props](#./Migrate-`menu`-and-`trigger`-props) in this document

Postioning props: align, autoSize, flipBoundary, offset,overflowBoundary,popperRef,position,positionFixed,target, unstable_disableTether, unstable_pinned are now attributes of the positioning prop. v9 positioning shorthand is recommended when only positon or/and align is used: <MenuButton position="below" align="end" /> can be migrate to a string like <Menu positioning="below-end" />. See Migrate positioning props for more.

Migrate style overrides

⚠️ If this is your first migration, please read the general guide on how to migrate styles.

Example for migrate boolean variables:

Before:

tsx
// in COMPONENT_NAME.tsx
import { MenuButton, Button } from '@fluentui/react-northstar';

export const Component = () => (
  <MenuButton
    trigger={<Button content="Open" />}
    menu={['1']}
    variables={{ isBreakoutRoomsAssignmentMenuButton: true }}
  />
);

// in menu-button-styles.ts
export const menuButtonStyles = {
  root: ({ variables: { isBreakoutRoomsAssignmentMenuButton } }) => ({
    ...(isBreakoutRoomsAssignmentMenuButton && {
      width: '100%',
    }),
  }),
};

After:

tsx
// in COMPONENT_NAME.tsx
import { useStyles } from './COMPONENT_NAME.styles.ts';
import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Button } from '@fluentui/react-components';

export const Component = () => {
  const classes = useStyles();
  return (
    <Menu className={classes.breakoutRoomsAssignmentMenuButton}>
      <MenuTrigger>
        <Button>Open</Button>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItem>1</MenuItem>
        </MenuList>
      </MenuPopover>
    </Menu>
  );
};

// in COMPONENT_NAME.styles.ts
import { makeStyles } from '@fluentui/react-components';

export const useStyles = makeStyles({
  breakoutRoomsAssignmentMenuButton: {
    width: '100%',
  },
});

Migrate menu and trigger props

menu and trigger props were moved to JSX children using MenuTrigger and MenuItem components:

Before:

tsx
import { MenuButton, Button } from '@fluentui/react-northstar';
const Component = () => <MenuButton trigger={<Button content="Open" />} menu={['1. menu item', '2. menu item']} />;

After:

tsx
import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Button } from '@fluentui/react-components';

export const Component = () => {
  <Menu>
    <MenuTrigger>
      <Button>Open</Button>
    </MenuTrigger>
    <MenuPopover>
      <MenuList>
        <MenuItem>1. menu item</MenuItem>
        <MenuItem>2. menu item</MenuItem>
      </MenuList>
    </MenuPopover>
  </Menu>;
};