fixup! fixup! feat(react-keytips): draft implementation

microsoft · Sep 2, 2024 · c48aedd · c48aedd
1 parent 129cb22
commit c48aedd
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 24 deletions.
diff --git a/packages/react-keytips/src/components/Keytip/Keytip.types.ts b/packages/react-keytips/src/components/Keytip/Keytip.types.ts
@@ -16,19 +16,17 @@ export type KeytipSlots = {
   content: NonNullable<Slot<'div'>>;
 };
 
-export type ExecuteKeytipEventHandler<E = PositioningProps['target']> =
-  EventHandler<
-    EventData<'keydown', KeyboardEvent> & {
-      targetElement: E;
-    }
-  >;
+export type ExecuteKeytipEventHandler<E = HTMLElement> = EventHandler<
+  EventData<'keydown', KeyboardEvent> & {
+    targetElement: E;
+  }
+>;
 
-export type ReturnKeytipEventHandler<E = PositioningProps['target']> =
-  EventHandler<
-    EventData<'keydown', KeyboardEvent> & {
-      targetElement: E;
-    }
-  >;
+export type ReturnKeytipEventHandler<E = HTMLElement> = EventHandler<
+  EventData<'keydown', KeyboardEvent> & {
+    targetElement: E;
+  }
+>;
 
 export type OnVisibleChangeData = {
   visible: boolean;

diff --git a/packages/react-keytips/src/components/Keytip/useKeytipStyles.styles.ts b/packages/react-keytips/src/components/Keytip/useKeytipStyles.styles.ts
@@ -13,15 +13,15 @@ const useStyles = makeStyles({
   root: {
     display: 'none',
     boxSizing: 'border-box',
-    maxWidth: '240px',
+    maxWidth: '40px',
+    minWidth: '24px',
+    textAlign: 'center',
     cursor: 'default',
     fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase200,
     lineHeight: tokens.lineHeightBase200,
-    overflowWrap: 'break-word',
     borderRadius: tokens.borderRadiusMedium,
-    border: `1px solid ${tokens.colorTransparentStroke}`,
-    padding: '4px 11px 6px 11px', // '5px 12px 7px 12px' minus the border width '1px'
+    padding: tokens.spacingHorizontalXS,
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground1,
 

diff --git a/packages/react-keytips/src/hooks/useTree.ts b/packages/react-keytips/src/hooks/useTree.ts
@@ -3,15 +3,14 @@ import * as React from 'react';
 import { sequencesToID, createNode } from '../utilities';
 import { KTP_ROOT_ID } from '../constants';
 import { useFluent } from '@fluentui/react-components';
-import { PositioningProps } from '@fluentui/react-components';
 
 export type KeytipTreeNode = Pick<
   KeytipProps,
   'keySequences' | 'onExecute' | 'onReturn' | 'dynamic'
 > & {
   id: string;
   uniqueId: string;
-  target: PositioningProps['target'];
+  target: HTMLElement | null;
   parent: string;
   children: Set<string>;
 };

diff --git a/packages/react-keytips/src/utilities/createNode.ts b/packages/react-keytips/src/utilities/createNode.ts
@@ -30,7 +30,7 @@ export const createNode = ({
   const node: KeytipTreeNode = {
     id,
     uniqueId,
-    target: positioning?.target || null,
+    target: positioning?.target as HTMLElement,
     parent,
     children,
     keySequences: keySequences.map((key) => key.toLowerCase()),

diff --git a/packages/react-keytips/stories/Dynamic.stories.tsx b/packages/react-keytips/stories/Dynamic.stories.tsx
@@ -32,7 +32,7 @@ export const DynamicStory = (props: KeytipsProps) => {
   }, [currentButton]);
 
   const onExecute: ExecuteKeytipEventHandler = (_, { targetElement }) => {
-    if (targetElement) targetElement.click();
+    if (targetElement) targetElement?.click();
   };
 
   const firstButton = useKeytipRef({

diff --git a/packages/react-keytips/stories/WithTabs.stories.tsx b/packages/react-keytips/stories/WithTabs.stories.tsx
@@ -41,7 +41,7 @@ const useStyles = makeStyles({
 });
 
 const btnExecute: ExecuteKeytipEventHandler = (_, el) => {
-  el.targetElement.click();
+  el.targetElement?.click();
 };
 
 export const WithTabsStory = (props: KeytipsProps) => {
@@ -55,15 +55,15 @@ export const WithTabsStory = (props: KeytipsProps) => {
 
   const refFirstTab = useKeytipRef({
     keySequences: ['a'],
-    content: 'A',
-    hasDynamicChildren: true,
+    content: 'A23',
+    dynamic: true,
     onExecute: btnExecute,
   });
 
   const refSecondTab = useKeytipRef({
     keySequences: ['b'],
     content: 'B',
-    hasDynamicChildren: true,
+    dynamic: true,
     onExecute: btnExecute,
   });