fixup! fixup! docs(react-keytips): add more detailed Overflow example

microsoft · Dec 27, 2024 · f37a6b5 · f37a6b5
1 parent 442bba4
commit f37a6b5
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 117 deletions.
diff --git a/packages/react-keytips/stories/Overflow/Help/index.tsx b/packages/react-keytips/stories/Overflow/Help/index.tsx
@@ -7,10 +7,11 @@ import {
 import {
   SettingsRegular,
   PersonCallRegular,
+  PeopleCallRegular,
   FlagRegular,
   HeadsetRegular,
 } from '@fluentui/react-icons';
-import { keytipsMap } from './keytipsMap';
+import { helpKeytips as keytipsMap } from '../keytipsMap';
 import { OverflowItemCustom } from '../OverflowItemCustom';
 import { useStyles } from '../useStyles';
 import { OverflowMenu } from '../OverflowMenu';
@@ -42,7 +43,7 @@ const menuItems = [
     disabled: false,
     name: 'Feedback',
     keytipProps: keytipsMap.feedback,
-    // icon: <NotepadPersonIcon />,
+    icon: <PeopleCallRegular />,
   },
   {
     id: '5',

diff --git a/packages/react-keytips/stories/Overflow/Help/keytipsMap.ts b/packages/react-keytips/stories/Overflow/Help/keytipsMap.ts
diff --git a/packages/react-keytips/stories/Overflow/Home/EmailMenuButton.tsx b/packages/react-keytips/stories/Overflow/Home/EmailMenuButton.tsx
@@ -3,13 +3,13 @@ import {
   Menu,
   useMergedRefs,
   mergeCallbacks,
-  MenuButtonProps,
   MenuList,
   MenuItem,
   MenuPopover,
   MenuTrigger,
   SplitButton,
-  SplitButtonProps,
+  type SplitButtonProps,
+  type MenuButtonProps,
 } from '@fluentui/react-components';
 import { MailRegular } from '@fluentui/react-icons';
 import { keytipsMap } from './keytipsMap';
@@ -42,20 +42,20 @@ export const EmailMenu = React.forwardRef<
   SplitButtonProps & { isOverflowing?: boolean }
 >((props, ref) => {
   const keytipRef = useKeytipRef(keytipsMap.newMail);
-  const mergedRefs = useMergedRefs(ref, keytipRef);
 
   return (
     <Menu positioning="below-end">
       <MenuTrigger disableButtonEnhancement>
-        {(triggerProps: MenuButtonProps) => (
+        {(
+          triggerProps: MenuButtonProps & { ref: React.Ref<HTMLButtonElement> }
+        ) => (
           <SplitButton
-            ref={mergedRefs}
+            ref={ref}
             appearance="primary"
             icon={<MailRegular />}
             menuButton={{
               ...triggerProps,
-              // @ts-expect-error TODO
-              ref: mergeCallbacks(triggerProps.ref, keytipRef),
+              ref: useMergedRefs(triggerProps.ref, keytipRef),
             }}
             {...props}
           >

diff --git a/packages/react-keytips/stories/Overflow/Home/index.tsx b/packages/react-keytips/stories/Overflow/Home/index.tsx
@@ -17,7 +17,7 @@ import {
   MailUnreadRegular,
 } from '@fluentui/react-icons';
 import { EmailMenu } from './EmailMenuButton';
-import { keytipsMap } from './keytipsMap';
+import { homeKeytips as keytipsMap } from '../keytipsMap';
 import { OverflowItemCustom } from '../OverflowItemCustom';
 import { useStyles } from '../useStyles';
 import { OverflowMenu } from '../OverflowMenu';

diff --git a/packages/react-keytips/stories/Overflow/Overflow.stories.tsx b/packages/react-keytips/stories/Overflow/Overflow.stories.tsx
@@ -106,11 +106,3 @@ export const OverflowStory = () => {
     </div>
   );
 };
-
-OverflowStory.parameters = {
-  docs: {
-    description: {
-      story: '',
-    },
-  },
-};
diff --git a/packages/react-keytips/stories/Overflow/View/index.tsx b/packages/react-keytips/stories/Overflow/View/index.tsx
@@ -13,7 +13,7 @@ import {
   FolderRegular,
   TextDensityRegular,
 } from '@fluentui/react-icons';
-import { keytipsMap, onExecute } from './keytipsMap';
+import { viewKeytips as keytipsMap, onExecute } from '../keytipsMap';
 import { OverflowItemCustom } from '../OverflowItemCustom';
 import { useStyles } from '../useStyles';
 import { OverflowMenu } from '../OverflowMenu';

diff --git a/packages/react-keytips/stories/Overflow/View/keytipsMap.ts b/packages/react-keytips/stories/Overflow/View/keytipsMap.ts
diff --git a/...ytips/stories/Overflow/Home/keytipsMap.ts → ...ct-keytips/stories/Overflow/keytipsMap.ts b/...ytips/stories/Overflow/Home/keytipsMap.ts → ...ct-keytips/stories/Overflow/keytipsMap.ts
@@ -8,7 +8,41 @@ export const onExecute: ExecuteKeytipEventHandler = (_, { targetElement }) => {
   }
 };
 
-export const keytipsMap = {
+export const helpKeytips = {
+  help: {
+    content: 'H',
+    keySequences: ['e', 'h'],
+    onExecute,
+  },
+  tips: {
+    content: 'P',
+    keySequences: ['e', 'p'],
+    onExecute,
+  },
+  support: {
+    content: 'U',
+    keySequences: ['e', 'u'],
+    onExecute,
+  },
+  feedback: {
+    content: 'F',
+    keySequences: ['e', 'f'],
+    onExecute,
+  },
+  rollout: {
+    content: 'R',
+    keySequences: ['e', 'r'],
+    onExecute,
+  },
+  overflowButton: {
+    dynamic: true,
+    content: '00',
+    keySequences: ['e', '00'],
+    onExecute,
+  },
+};
+
+export const homeKeytips = {
   newMail: {
     content: 'N',
     keySequences: ['h', 'n'],
@@ -110,3 +144,48 @@ export const keytipsMap = {
     onExecute,
   },
 };
+
+export const viewKeytips = {
+  viewSettings: {
+    content: 'V',
+    keySequences: ['v', 'v'],
+    onExecute,
+  },
+  messages: {
+    content: 'M',
+    keySequences: ['v', 'm'],
+    onExecute,
+  },
+  zoom: {
+    content: 'Z',
+    keySequences: ['v', 'z'],
+    onExecute,
+  },
+  sync: {
+    content: 'S',
+    keySequences: ['v', 's'],
+    onExecute,
+  },
+  layout: {
+    content: 'A',
+    keySequences: ['v', 'a'],
+    dynamic: true,
+    onExecute,
+  },
+  folderPane: {
+    content: 'F',
+    keySequences: ['v', 'f'],
+    onExecute,
+  },
+  density: {
+    content: 'D',
+    keySequences: ['v', 'd'],
+    onExecute,
+  },
+  overflowButton: {
+    dynamic: true,
+    content: '00',
+    keySequences: ['v', '00'],
+    onExecute,
+  },
+};