Add alwaysShowToolTip prop to Menu items (#2984)

* show tooltip * alwaysShowToolTip prop * Fix platforms * Change files * Spec changes * Fix test * Prettier fix * Update and remove from spec * Uncomment tests * Remove from types files * Fix test --------- Co-authored-by: Roy Fang <[email protected]>
microsoft · Nov 30, 2023 · b9867d7 · b9867d7
1 parent 712e676
commit b9867d7
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 4 deletions.
diff --git a/change/@fluentui-react-native-button-00ccd513-e11f-44fd-8152-fc4c6d2bc3aa.json b/change/@fluentui-react-native-button-00ccd513-e11f-44fd-8152-fc4c6d2bc3aa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "alwaysShowToolTip prop",
+  "packageName": "@fluentui-react-native/button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-menu-1b3990ef-54d6-4d90-83d2-4d4d7f699614.json b/change/@fluentui-react-native-menu-1b3990ef-54d6-4d90-83d2-4d4d7f699614.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "alwaysShowToolTip prop",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-9b1df892-71f0-47a0-a54e-3d6a12fd1b91.json b/change/@fluentui-react-native-tester-9b1df892-71f0-47a0-a54e-3d6a12fd1b91.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "alwaysShowToolTip prop",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/components/Menu/src/MenuItem/MenuItem.tsx b/packages/components/Menu/src/MenuItem/MenuItem.tsx
@@ -56,7 +56,7 @@ export const MenuItem = compose<MenuItemType>({
             </Slots.iconPlaceholder>
           )}
           {children && (
-            <Slots.content accessible={false} tooltip={tooltipResult}>
+            <Slots.content accessible={false} tooltip={tooltipResult} {...(tooltipResult && { alwaysShowToolTip: true })}>
               {children}
             </Slots.content>
           )}

diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx
@@ -76,7 +76,7 @@ export const menuItemFinalRender = (
           </Slots.iconPlaceholder>
         )}
         {children && (
-          <Slots.content accessible={false} tooltip={tooltipResult}>
+          <Slots.content accessible={false} tooltip={tooltipResult} {...(tooltipResult && { alwaysShowToolTip: true })}>
             {children}
           </Slots.content>
         )}

diff --git a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx
@@ -67,7 +67,7 @@ export const menuItemRadioFinalRender = (
           </Slots.iconPlaceholder>
         )}
         {children && (
-          <Slots.content accessible={false} tooltip={tooltipResult}>
+          <Slots.content accessible={false} tooltip={tooltipResult} {...(tooltipResult && { alwaysShowToolTip: true })}>
             {children}
           </Slots.content>
         )}

diff --git a/packages/components/Menu/src/MenuList/MenuList.tsx b/packages/components/Menu/src/MenuList/MenuList.tsx
@@ -73,6 +73,7 @@ export const MenuList = compose<MenuListType>({
             {
               accessibilityPositionInSet: child.props.accessibilityPositionInSet ?? itemPosition, // win32
               accessibilitySetSize: child.props.accessibilitySetSize ?? itemCount, //win32
+              ...(child.props.tooltip && { alwaysShowToolTip: true }),
             } as any,
           );
         }

diff --git a/packages/components/Menu/src/MenuTrigger/MenuTrigger.tsx b/packages/components/Menu/src/MenuTrigger/MenuTrigger.tsx
@@ -17,7 +17,10 @@ export const MenuTrigger: React.FunctionComponent<MenuTriggerProps> = (props: Me
   // In order to properly support accessibility without erasing props set on the
   // child component which may affect accessibility, we need to modify the
   // state in the inner render so we can access the child component and its props.
-  const revised = React.cloneElement(props.children, menuTrigger.props);
+  const revised = React.cloneElement(props.children, {
+    ...(props.children.props.tooltip && { alwaysShowToolTip: true }),
+    ...menuTrigger.props,
+  });
 
   return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
 };

diff --git a/packages/components/Menu/src/__tests__/Menu.test.tsx b/packages/components/Menu/src/__tests__/Menu.test.tsx
@@ -180,6 +180,33 @@ describe('Menu component tests', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  // Note the capital T the "Tip" (in the snapshot)
+  // It is intentional as it matches the same prop in NetUI
+  it('Menu alwaysShowToolTip', () => {
+    const tree = renderer
+      .create(
+        <Menu>
+          <MenuTrigger>
+            <Button tooltip="A Tooltip">Button</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem>Test</MenuItem>
+              <MenuItem tooltip="Second">With Tooltip</MenuItem>
+              <MenuItemRadio name="Radio" tooltip="Third">
+                Radio Tooltip
+              </MenuItemRadio>
+              <MenuItemCheckbox name="Check" tooltip="Fourth">
+                Checkbox Tooltip
+              </MenuItemCheckbox>
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 it('Menu open menu group and menu header', () => {

diff --git a/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -1,5 +1,112 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Menu component tests Menu alwaysShowToolTip 1`] = `
+<View
+  accessibilityActions={
+    [
+      {
+        "name": "Expand",
+      },
+      {
+        "name": "Collapse",
+      },
+    ]
+  }
+  accessibilityLabel="Button"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": false,
+      "multiselectable": undefined,
+      "required": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  alwaysShowToolTip={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    [
+      {
+        "key": " ",
+      },
+      {
+        "key": "Enter",
+      },
+    ]
+  }
+  onAccessibilityAction={[Function]}
+  onAccessibilityTap={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onLayout={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+  tooltip="A Tooltip"
+>
+  <Text
+    accessible={false}
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Button
+  </Text>
+</View>
+`;
+
 exports[`Menu component tests Menu default 1`] = `
 <View
   accessibilityActions={