Add checkbox implem to Menu

change/@fluentui-react-examples-ee4c87f1-4801-40b7-8c39-fbd92ec8ca6d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add checkbox story for Menu",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-04281faf-a371-42db-8ee1-6ec9abe65a84.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add checkbox implementation for menu item",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -101,6 +101,8 @@
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
     "eslint": "^7.1.0",
+    "//": "pretty-format contains typing only supported by TS 3.8+ remove when support in this repo is available",
+    "@testing-library/dom": "7.22.3",
     "copy-to-clipboard": "3.2.0"
   },
   "syncpack": {

packages/react-examples/.storybook/preview.js

@@ -6,7 +6,7 @@ import { withInfo } from '@storybook/addon-info';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withPerformance } from 'storybook-addon-performance';
-import { withKeytipLayer, withStrictMode, withCompatThemeProvider } from '@fluentui/storybook';
+import { withKeytipLayer, withStrictMode, withCompatThemeProvider, withFluentProvider } from '@fluentui/storybook';
 
 addDecorator(withPerformance);
 addDecorator(withInfo());
@@ -29,6 +29,10 @@ if (
   addDecorator(withCompatThemeProvider);
   addDecorator(withStrictMode);
 }
+if (['react-menu'].includes('PACKAGE_NAME')) {
+  addDecorator(withFluentProvider);
+  addDecorator(withStrictMode);
+}
 
 addParameters({
   a11y: {

packages/react-examples/src/react-menu/MenuList/MenuList.stories.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 
-import { MenuList, MenuItem } from '@fluentui/react-menu';
-import { teamsLightTheme } from '@fluentui/react-theme';
-import { FluentProvider } from '@fluentui/react-provider';
-import { CutIcon, PasteIcon, EditIcon } from '@fluentui/react-icons-mdl2';
+import { MenuList, MenuItem, MenuItemCheckbox, MenuItemRadio } from '@fluentui/react-menu';
+import { CutIcon, PasteIcon, EditIcon, AcceptIcon } from '@fluentui/react-icons-mdl2';
 import { makeStyles } from '@fluentui/react-make-styles';
 
 const useContainerStyles = makeStyles([
@@ -27,25 +25,69 @@ const Container: React.FC = props => {
 };
 
 export const MenuListExample = () => (
-  <FluentProvider theme={teamsLightTheme}>
+  <Container>
+    <MenuList>
+      <MenuItem>Item</MenuItem>
+      <MenuItem>Item</MenuItem>
+      <MenuItem>Item</MenuItem>
+    </MenuList>
+  </Container>
+);
+
+export const MenuListWithIconsExample = () => (
+  <Container>
+    <MenuList>
+      <MenuItem icon={<CutIcon />}>Item</MenuItem>
+      <MenuItem icon={<PasteIcon />}>Item</MenuItem>
+      <MenuItem icon={<EditIcon />}>Item</MenuItem>
+    </MenuList>
+  </Container>
+);
+
+export const MenuListWithCheckboxes = () => {
+  const checkmark = <AcceptIcon />;
+  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ checkbox: ['2'] });
+  const onChange = (e: React.SyntheticEvent, name: string, items: string[]) => {
+    setCheckedValues(s => ({ ...s, [name]: items }));
+  };
+
+  return (
     <Container>
-      <MenuList>
-        <MenuItem>Item</MenuItem>
-        <MenuItem>Item</MenuItem>
-        <MenuItem>Item</MenuItem>
+      <MenuList checkedValues={checkedValues} onCheckedValueChange={onChange}>
+        <MenuItemCheckbox icon={<CutIcon />} name="checkbox" value="1" checkmark={checkmark}>
+          Item
+        </MenuItemCheckbox>
+        <MenuItemCheckbox icon={<PasteIcon />} name="checkbox" value="2" checkmark={checkmark}>
+          Item
+        </MenuItemCheckbox>
+        <MenuItemCheckbox icon={<EditIcon />} name="checkbox" value="3" checkmark={checkmark}>
+          Item
+        </MenuItemCheckbox>
       </MenuList>
     </Container>
-  </FluentProvider>
-);
+  );
+};
 
-export const MenuListWithIconsExample = () => (
-  <FluentProvider theme={teamsLightTheme}>
+export const MenuListWithRadios = () => {
+  const checkmark = <AcceptIcon />;
+  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ checkbox: ['2'] });
+  const onChange = (e: React.SyntheticEvent, name: string, items: string[]) => {
+    setCheckedValues(s => ({ ...s, [name]: items }));
+  };
+
+  return (
     <Container>
-      <MenuList>
-        <MenuItem icon={<CutIcon />}>Item</MenuItem>
-        <MenuItem icon={<PasteIcon />}>Item</MenuItem>
-        <MenuItem icon={<EditIcon />}>Item</MenuItem>
+      <MenuList checkedValues={checkedValues} onCheckedValueChange={onChange}>
+        <MenuItemRadio icon={<CutIcon />} name="checkbox" value="1" checkmark={checkmark}>
+          Item
+        </MenuItemRadio>
+        <MenuItemRadio icon={<PasteIcon />} name="checkbox" value="2" checkmark={checkmark}>
+          Item
+        </MenuItemRadio>
+        <MenuItemRadio icon={<EditIcon />} name="checkbox" value="3" checkmark={checkmark}>
+          Item
+        </MenuItemRadio>
       </MenuList>
     </Container>
-  </FluentProvider>
-);
+  );
+};

packages/react-menu/etc/react-menu.api.md

@@ -12,11 +12,57 @@ import { ShorthandProps } from '@fluentui/react-utils';
 // @public
 export const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLElement>>;
 
+// @public
+export const MenuItemCheckbox: React.ForwardRefExoticComponent<MenuItemCheckboxProps & React.RefAttributes<HTMLElement>>;
+
+// Warning: (ae-forgotten-export) The symbol "MenuItemSelectableProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export interface MenuItemCheckboxProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemProps, MenuItemSelectableProps {
+    checkmark?: ShorthandProps<HTMLElement>;
+    icon?: ShorthandProps<HTMLElement>;
+}
+
+// @public
+export const menuItemCheckboxShorthandProps: string[];
+
+// Warning: (ae-forgotten-export) The symbol "MenuItemSelectableState" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export interface MenuItemCheckboxState extends MenuItemCheckboxProps, MenuItemState, MenuItemSelectableState {
+    checkmark: ObjectShorthandProps<HTMLElement>;
+    icon?: ObjectShorthandProps<HTMLElement>;
+    // (undocumented)
+    ref: React.MutableRefObject<HTMLElement>;
+}
+
 // @public (undocumented)
 export interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
     icon?: ShorthandProps<HTMLElement>;
 }
 
+// @public
+export const MenuItemRadio: React.ForwardRefExoticComponent<MenuItemRadioProps & React.RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export interface MenuItemRadioProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemSelectableProps {
+    // (undocumented)
+    checkmark?: ShorthandProps<HTMLElement>;
+    // (undocumented)
+    icon?: ShorthandProps<HTMLElement>;
+}
+
+// @public
+export const menuItemRadioShorthandProps: string[];
+
+// @public (undocumented)
+export interface MenuItemRadioState extends MenuItemRadioProps, MenuItemSelectableState {
+    checkmark: ObjectShorthandProps<HTMLElement>;
+    icon?: ObjectShorthandProps<HTMLElement>;
+    // (undocumented)
+    ref: React.MutableRefObject<HTMLElement>;
+}
+
 // @public
 export const menuItemShorthandProps: string[];
 
@@ -31,6 +77,8 @@ export const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.Ref
 
 // @public (undocumented)
 export interface MenuListProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
+    checkedValues?: Record<string, string[]>;
+    onCheckedValueChange?: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;
 }
 
 // @public (undocumented)
@@ -41,6 +89,12 @@ export interface MenuListState extends MenuListProps {
 // @public
 export const renderMenuItem: (state: MenuItemState) => JSX.Element;
 
+// @public
+export const renderMenuItemCheckbox: (state: MenuItemCheckboxState) => JSX.Element;
+
+// @public
+export const renderMenuItemRadio: (state: MenuItemRadioState) => JSX.Element;
+
 // @public
 export const renderMenuList: (state: MenuListState) => JSX.Element;
 
@@ -50,6 +104,12 @@ export const useIconStyles: (selectors: MenuItemState) => string;
 // @public
 export const useMenuItem: (props: MenuItemProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemProps | undefined) => MenuItemState;
 
+// @public
+export const useMenuItemCheckbox: (props: MenuItemCheckboxProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemCheckboxProps | undefined) => MenuItemCheckboxState;
+
+// @public
+export const useMenuItemRadio: (props: MenuItemRadioProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemRadioProps | undefined) => MenuItemRadioState;
+
 // @public
 export const useMenuItemStyles: (state: MenuItemState) => void;
 

packages/react-menu/package.json

@@ -26,9 +26,10 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/react-conformance": "^1.0.0",
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",
+    "@fluentui/react-conformance": "^1.0.0",
     "@fluentui/scripts": "^1.0.0",
+    "@testing-library/react": "^10.4.9",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/jest": "~24.9.0",
@@ -44,12 +45,14 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
+    "@fluentui/keyboard-key": "^0.2.13",
     "@fluentui/react-hooks": "^8.0.0-beta.11",
     "@fluentui/react-make-styles": "^0.2.5-0",
     "@fluentui/react-theme": "^0.3.1",
     "@fluentui/react-theme-provider": "^1.0.0-beta.22",
     "@fluentui/react-utils": "^0.3.1-0",
     "@fluentui/set-version": "^8.0.0-beta.1",
+    "@testing-library/react-hooks": "^5.0.3",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {

packages/react-menu/src/MenuItemCheckbox.ts

@@ -0,0 +1 @@
+export * from './components/MenuItemCheckbox/index';

packages/react-menu/src/MenuItemRadio.ts

@@ -0,0 +1 @@
+export * from './components/MenuItemRadio/index';

packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts

@@ -19,10 +19,12 @@ export const useRootStyles = makeStyles<MenuItemState>([
 
       ':hover': {
         backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,
+        color: theme.alias.color.neutral.neutralForeground2Hover,
       },
 
       ':focus': {
         backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,
+        color: theme.alias.color.neutral.neutralForeground2Hover,
       },
     }),
   ],