v3: Menu is using ListItem

apps/storybook/src/ComboBox.test.ts

@@ -24,7 +24,7 @@ describe('ComboBox', () => {
       cy.compareSnapshot(`${testName} (Closed)`);
       cy.get('input').focus();
       if (testName === 'Multiple Select') {
-        cy.get('.iui-menu-item').then((els) => {
+        cy.get('.iui-list-item').then((els) => {
           const items = Array.from(els, (el) => el);
           items[3].click();
         });

apps/storybook/src/DropdownMenu.stories.tsx

@@ -79,13 +79,17 @@ export const WithIcons: Story<DropdownMenuProps> = (args) => {
     close();
   };
   const dropdownMenuItems = (close: () => void) => [
-    <MenuItem key={1} onClick={onClick('Crop', close)} icon={<SvgCrop />}>
+    <MenuItem key={1} onClick={onClick('Crop', close)} startIcon={<SvgCrop />}>
       Crop
     </MenuItem>,
-    <MenuItem key={2} onClick={onClick('Paste', close)} icon={<SvgClipboard />}>
+    <MenuItem
+      key={2}
+      onClick={onClick('Paste', close)}
+      startIcon={<SvgClipboard />}
+    >
       Paste
     </MenuItem>,
-    <MenuItem key={3} onClick={onClick('Move', close)} icon={<SvgMove />}>
+    <MenuItem key={3} onClick={onClick('Move', close)} startIcon={<SvgMove />}>
       Move
     </MenuItem>,
   ];
@@ -109,17 +113,17 @@ export const WithBadges: Story<DropdownMenuProps> = (args) => {
     close();
   };
   const dropdownMenuItems = (close: () => void) => [
-    <MenuItem key={1} onClick={onClick('Crop', close)} badge={<SvgCrop />}>
+    <MenuItem key={1} onClick={onClick('Crop', close)} endIcon={<SvgCrop />}>
       Crop
     </MenuItem>,
     <MenuItem
       key={2}
       onClick={onClick('Paste', close)}
-      badge={<SvgClipboard />}
+      endIcon={<SvgClipboard />}
     >
       Paste
     </MenuItem>,
-    <MenuItem key={3} onClick={onClick('Move', close)} badge={<SvgMove />}>
+    <MenuItem key={3} onClick={onClick('Move', close)} endIcon={<SvgMove />}>
       Move
     </MenuItem>,
   ];
@@ -146,23 +150,23 @@ export const WithSublabels: Story<DropdownMenuProps> = (args) => {
     <MenuItem
       key={1}
       onClick={onClick(1, close)}
-      icon={<SvgPlaceholder />}
+      startIcon={<SvgPlaceholder />}
       sublabel='Sublabel #1'
     >
       Item #1
     </MenuItem>,
     <MenuItem
       key={2}
       onClick={onClick(2, close)}
-      icon={<SvgPlaceholder />}
+      startIcon={<SvgPlaceholder />}
       sublabel='Sublabel #2'
     >
       Item #2
     </MenuItem>,
     <MenuItem
       key={3}
       onClick={onClick(3, close)}
-      icon={<SvgPlaceholder />}
+      startIcon={<SvgPlaceholder />}
       sublabel='Sublabel #3'
     >
       Item #3

apps/storybook/src/DropdownMenu.test.ts

@@ -22,7 +22,7 @@ describe('DropdownMenu', () => {
       cy.get('.iui-button').click();
 
       if (testName === 'Submenu') {
-        cy.get('.iui-menu-item').last().trigger('mouseenter');
+        cy.get('.iui-list-item').last().trigger('mouseenter');
       }
 
       cy.compareSnapshot(`${testName} (Open)`);

apps/storybook/src/Select.test.ts

@@ -38,13 +38,13 @@ describe('Select', () => {
       cy.compareSnapshot(`${testName} (Open)`);
 
       if (testName.includes('Multi')) {
-        cy.get('.iui-menu-item').first().click();
-        cy.get('.iui-menu-item').eq(1).click();
+        cy.get('.iui-list-item').first().click();
+        cy.get('.iui-list-item').eq(1).click();
         cy.compareSnapshot(`${testName} (Multi selected)`);
       }
 
       if (testName === 'Custom') {
-        cy.get('.iui-menu-item').first().click();
+        cy.get('.iui-list-item').first().click();
         cy.compareSnapshot(`${testName} (Closed With Value)`);
       }
     });

apps/website/src/examples/ButtonGroup.overflow.tsx

@@ -38,7 +38,7 @@ export default () => {
                     close();
                   };
                   return (
-                    <MenuItem key={index} onClick={onClick} icon={<SvgPlaceholder />}>
+                    <MenuItem key={index} onClick={onClick} startIcon={<SvgPlaceholder />}>
                       Button #{index}
                     </MenuItem>
                   );

apps/website/src/examples/DropdownMenu.badge.tsx

@@ -8,13 +8,13 @@ import { SvgMore, SvgCrop, SvgClipboard, SvgMove } from '@itwin/itwinui-icons-re
 
 export default () => {
   const dropdownMenuItems = (close: () => void) => [
-    <MenuItem key={1} onClick={() => close()} badge={<SvgCrop />}>
+    <MenuItem key={1} onClick={() => close()} endIcon={<SvgCrop />}>
       Crop
     </MenuItem>,
-    <MenuItem key={2} onClick={() => close()} badge={<SvgClipboard />}>
+    <MenuItem key={2} onClick={() => close()} endIcon={<SvgClipboard />}>
       Paste
     </MenuItem>,
-    <MenuItem key={3} onClick={() => close()} badge={<SvgMove />}>
+    <MenuItem key={3} onClick={() => close()} endIcon={<SvgMove />}>
       Move
     </MenuItem>,
   ];

apps/website/src/examples/DropdownMenu.icon.tsx

@@ -8,13 +8,13 @@ import { SvgMore, SvgCrop, SvgClipboard, SvgMove } from '@itwin/itwinui-icons-re
 
 export default () => {
   const dropdownMenuItems = (close: () => void) => [
-    <MenuItem key={1} onClick={() => close()} icon={<SvgCrop />}>
+    <MenuItem key={1} onClick={() => close()} startIcon={<SvgCrop />}>
       Crop
     </MenuItem>,
-    <MenuItem key={2} onClick={() => close()} icon={<SvgClipboard />}>
+    <MenuItem key={2} onClick={() => close()} startIcon={<SvgClipboard />}>
       Paste
     </MenuItem>,
-    <MenuItem key={3} onClick={() => close()} icon={<SvgMove />}>
+    <MenuItem key={3} onClick={() => close()} startIcon={<SvgMove />}>
       Move
     </MenuItem>,
   ];

apps/website/src/examples/DropdownMenu.sublabel.tsx

@@ -8,13 +8,13 @@ import { SvgMore, SvgPlaceholder } from '@itwin/itwinui-icons-react';
 
 export default () => {
   const dropdownMenuItems = (close: () => void) => [
-    <MenuItem key={1} onClick={() => close()} icon={<SvgPlaceholder />} sublabel='Sublabel #1'>
+    <MenuItem key={1} onClick={() => close()} startIcon={<SvgPlaceholder />} sublabel='Sublabel #1'>
       Item #1
     </MenuItem>,
-    <MenuItem key={2} onClick={() => close()} icon={<SvgPlaceholder />} sublabel='Sublabel #2'>
+    <MenuItem key={2} onClick={() => close()} startIcon={<SvgPlaceholder />} sublabel='Sublabel #2'>
       Item #2
     </MenuItem>,
-    <MenuItem key={3} onClick={() => close()} icon={<SvgPlaceholder />} sublabel='Sublabel #3'>
+    <MenuItem key={3} onClick={() => close()} startIcon={<SvgPlaceholder />} sublabel='Sublabel #3'>
       Item #3
     </MenuItem>,
   ];