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

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

Menu Migration

v8

• A menu can be displayed by passing menuProps to Button, or by showing/hiding a ContextualMenu. In both cases, the menu items are specified as an IContextualMenuItem array passed in props.
• Different types of menu items are created by setting the IContextualMenuItem.itemType property.

v9

• A menu can be displayed by creating a hierarchy of children under Menu.
• There are children that act as containers and coordinate behavior including MenuTrigger, MenuPopover, MenuList, and MenuGroup.
• There are individual components for different types of items including MenuItem, MenuDivider, MenuItemCheckbox, MenuItemRadio, MenuGroup, and MenuSplitGroup.

Types -> Component props

v8 menu type	v9 props
IContextualMenuProps	MenuProps, MenuListProps (for submenus)
IContextualMenuItemProps, IContextualMenuItem	MenuItemProps
IContextualMenuItem itemType=Normal	MenuItemProps
IContextualMenuItem itemType=Divider	MenuDividerProps
IContextualMenuItem itemType=Header	MenuGroupHeaderProps
IContextualMenuItem itemType=Section	MenuGroupProps
IContextualMenuProps.hidden	MenuTrigger, MenuPopover
Button menuProps={'...'}	MenuButton

IContextualMenuProps -> MenuProps

v8 IContextualMenuProps	v9 MenuProps (replacements)
alignTargetEdge
ariaLabel
beakWidth
bounds
className
componentRef
contextualMenuItemAs
coverTarget
delayUpdateFocusOnHover
directionalHint	positioning
directionalHintFixed
directionalHintForRTL
focusZoneAs
focusZoneProps
gapSpace
getMenuClassNames
hidden
id
labelElementId
isBeakVisible
isSubMenu
items
onDismiss
onItemClick
onRenderMenuList
onRenderSubMenu
onRestoreFocus
doNotLayer
onMenuOpened
onMenuDismissed
calloutProps
shouldFocusOnMount
shouldFocusOnContainer
shouldUpdateWhenHidden
styles
subMenuHoverDelay
target
theme
title
useTargetAsMinWidth
useTargetWidth

IContextualMenuItem -> MenuItemProps

v8 IContextualMenuItem	v9 MenuItemProps+
ariaDescribedBy	(removed)
ariaDescription	(removed)
ariaLabel	HTML aria-label
canCheck	(use MenuItemRadio, MenuItemCheckbox)
checked	(use MenuItemRadio, MenuItemCheckbox)
className	className
componentRef	ref
customOnRenderListLength
data
disabled	disabled
getItemClassNames
getSplitButtonVerticalDividerClassNames
href
iconProps	icon (slot)
inactive	(removed)
itemProps	(use makeStyles and className)
items	children
itemType	children (MenuDivider, MenuGroup, MenuGroupHeader, MenuSplitGroup)
key
keytipProps
name (deprecated)	name & value (MenuItemCheckbox, MenuItemRadio)
onClick	onClick
onMouseDown	onMouseDown
onRender	children
onRenderContent	children
onRenderIcon	icon (slot)
preferMenuTargetAsEventTarget
primaryDisabled
rel
role	(removed - set by component)
secondaryText	secondaryContent (slot)
sectionProps	(MenuGroup, MenuGroupHeader)
split	children (MenuSplitGroup)
style	(use makeStyles and className)
subMenuIconProps
subMenuProps	children (Menu), hasSubmenu
target
text	children
title	title
[propertyName: string]	(removed)

IContextualMenuSection -> MenuGroupProps

v8 IContextualMenuSection	v9 MenuGroupProps, MenuGroupHeaderProps
items	(use MenuGroup children)
title	(use MenuGroupHeader children)
topDivider	(removed)
bottomDivider	(removed)