Publish Initial Tooltip Package

apps/E2E/src/Tooltip/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_TOOLTIP_BUTTON = 'Homepage_Tooltip_Button';
+export const TOOLTIP_TESTPAGE = 'Tooltip_TestPage';

apps/E2E/src/index.consts.ts

@@ -40,4 +40,5 @@ export * from './TabsV1/consts';
 export * from './TextLegacy/consts';
 export * from './TextV1/consts';
 export * from './Theme/consts';
+export * from './Tooltip/consts';
 export * from './VibrancyView/consts';

apps/fluent-tester/package.json

@@ -78,6 +78,7 @@
     "@fluentui-react-native/theme-types": ">=0.33.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.6.0",
     "@fluentui-react-native/theming-utils": ">=0.25.0 <1.0.0",
+    "@fluentui-react-native/tooltip": "0.1.0",
     "@fluentui-react-native/vibrancy-view": ">=0.1.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.28.0 <1.0.0",
     "@fluentui/react-native": ">=0.39.0 <1.0.0",

apps/fluent-tester/src/TestComponents/Tooltip/TooltipDefault.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 } from '@fluentui-react-native/button';
+import { Tooltip } from '@fluentui-react-native/tooltip';
+
+export const TooltipDefault: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Tooltip content="Tooltip should show under mouse cursor">
+        <ButtonV1>Test</ButtonV1>
+      </Tooltip>
+    </View>
+  );
+};

apps/fluent-tester/src/TestComponents/Tooltip/TooltipPosition.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 } from '@fluentui-react-native/button';
+import { Tooltip } from '@fluentui-react-native/tooltip';
+
+export const TooltipPosition: React.FunctionComponent = () => {
+  const topCenterRef = React.useRef<View>(null);
+
+  return (
+    <View>
+      <Tooltip content="Test" positioning="topCenter">
+        <ButtonV1>No Target + TopCenter</ButtonV1>
+      </Tooltip>
+      <Tooltip content="Test" positioning="topCenter" target={topCenterRef}>
+        <ButtonV1 componentRef={topCenterRef}>Target + TopCenter</ButtonV1>
+      </Tooltip>
+      {/* Adding more tests as follow-up*/}
+    </View>
+  );
+};

apps/fluent-tester/src/TestComponents/Tooltip/TooltipTest.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { TOOLTIP_TESTPAGE } from '../../../../E2E/src/Tooltip/consts';
+import { TooltipDefault } from './TooltipDefault';
+import { TooltipPosition } from './TooltipPosition';
+import { Test } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+
+const tooltipSections: TestSection[] = [
+  {
+    name: 'Default',
+    testID: TOOLTIP_TESTPAGE,
+    component: TooltipDefault,
+  },
+  {
+    name: 'Target + Positioning',
+    testID: TOOLTIP_TESTPAGE,
+    component: TooltipPosition,
+  },
+];
+
+export const TooltipTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'A Tooltip component displays additional information about another component. Tooltip is not expected to handle interactive content.';
+
+  return <Test name="Tooltip Test" description={description} sections={tooltipSections} status={status} />;
+};

apps/fluent-tester/src/TestComponents/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './TooltipTest';

apps/fluent-tester/src/testPages.ts

@@ -44,6 +44,7 @@ import { TabsV1Test } from './TestComponents/TabsV1';
 import { TextLegacyTest } from './TestComponents/TextLegacy';
 import { TextV1Test } from './TestComponents/TextV1';
 import { ThemeTest } from './TestComponents/Theme';
+import { TooltipTest } from './TestComponents/Tooltip';
 import { VibrancyViewTest } from './TestComponents/VibrancyView';
 import * as Constants from '../../E2E/src/index.consts';
 
@@ -331,6 +332,12 @@ export const tests: TestDescription[] = [
     testPageButton: Constants.HOMEPAGE_THEME_BUTTON,
     platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
+  {
+    name: 'Tooltip',
+    component: TooltipTest,
+    testPageButton: Constants.HOMEPAGE_TOOLTIP_BUTTON,
+    platforms: ['win32'],
+  },
   {
     name: 'Vibrancy View',
     component: VibrancyViewTest,

change/@fluentui-react-native-e2e-testing-e0a5a473-f22b-4efd-a341-c99b798fda32.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "adding package",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-1bb5260a-d64a-4767-b15f-87a7f6680c05.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "adding tests for new component",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tooltip-383703ae-693f-429f-a3ff-c68b06b9da9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "adding new package",
+  "packageName": "@fluentui-react-native/tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/experimental/Tooltip/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@fluentui-react-native/eslint-config-rules'],
+};

packages/experimental/Tooltip/SPEC.md

@@ -0,0 +1,5 @@
+# Tooltip
+
+## Background
+
+Please write here you documentation...

packages/experimental/Tooltip/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@fluentui-react-native/scripts/babel.config');

packages/experimental/Tooltip/jest.config.js

@@ -0,0 +1,2 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('win32');

packages/experimental/Tooltip/just.config.js

@@ -0,0 +1,3 @@
+const { preset } = require('@fluentui-react-native/scripts');
+
+preset();

packages/experimental/Tooltip/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@fluentui-react-native/tooltip",
+  "version": "0.1.0",
+  "description": "A cross-platform Tooltip component for React Native.",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "typings": "lib/index.d.ts",
+  "onPublish": {
+    "main": "lib-commonjs/index.js",
+    "module": "lib/index.js"
+  },
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
+    "just": "fluentui-scripts",
+    "lint": "fluentui-scripts eslint",
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u",
+    "prettier": "fluentui-scripts prettier",
+    "prettier-fix": "fluentui-scripts prettier --fix true"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "packages/experimental/Tooltip"
+  },
+  "dependencies": {
+    "@fluentui-react-native/callout": "^0.25.0",
+    "@fluentui-react-native/component-cache": "^1.6.0",
+    "@fluentui-react-native/framework": "0.12.0",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@fluentui-react-native/button": "^0.36.0",
+    "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@fluentui-react-native/scripts": "^0.1.1",
+    "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
+    "@office-iss/react-native-win32": "^0.72.0",
+    "@react-native/metro-config": "^0.72.0",
+    "react": "18.2.0",
+    "react-native": "^0.72.0"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "^0.72.0"
+  },
+  "author": "",
+  "license": "MIT",
+  "rnx-kit": {
+    "kitType": "library",
+    "alignDeps": {
+      "presets": [
+        "microsoft/react-native"
+      ],
+      "requirements": [
+        "[email protected]"
+      ],
+      "capabilities": [
+        "core",
+        "react"
+      ]
+    }
+  }
+}

packages/experimental/Tooltip/src/Tooltip.tsx

@@ -0,0 +1,31 @@
+/** @jsxRuntime classic */
+import * as React from 'react';
+
+import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
+import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
+
+import type { TooltipProps } from './Tooltip.types';
+import { tooltipName } from './Tooltip.types';
+
+const NativeTooltipView = ensureNativeComponent('RCTTooltip');
+
+/**
+ * A function which determines if a set of styles should be applied to the component given the current state and props of the tooltip.
+ *
+ * @param layer The name of the state that is being checked for
+ * @param userProps The props that were passed into the tooltip
+ * @returns Whether the styles that are assigned to the layer should be applied to the tooltip
+ */
+export const tooltipLookup = (layer: string, userProps: TooltipProps): boolean => {
+  return userProps[layer];
+};
+
+export const Tooltip = stagedComponent((props: TooltipProps) => {
+  return (_rest: TooltipProps, children: React.ReactNode) => {
+    return <NativeTooltipView {...mergeProps(props, _rest)}>{children}</NativeTooltipView>;
+  };
+});
+
+Tooltip.displayName = tooltipName;
+
+export default Tooltip;

packages/experimental/Tooltip/src/Tooltip.types.ts

@@ -0,0 +1,53 @@
+import type * as React from 'react';
+import type { ViewStyle } from 'react-native';
+import type { DirectionalHint } from '@fluentui-react-native/callout';
+
+export const tooltipName = 'Tooltip';
+
+export type TooltipProps = React.PropsWithChildren<{
+  /**
+   * The text of the tooltip.
+   */
+  content: string;
+
+  /**
+   * Notification when the visibility of the tooltip is changed.
+   */
+  onVisibleChange?: (event, data) => void;
+
+  /**
+   * Positioning of the tooltip relative to the target element.
+   *
+   * @default topCenter
+   */
+  positioning?: DirectionalHint;
+
+  /**
+   * Allow consumers to pass in Style props
+   */
+  style?: ViewStyle;
+
+  /**
+   * Target anchor that tooltip uses for relative positioning. Certain components may proffer a string as an anchor target, such as
+   * anchoring to a point inside the component.
+   *
+   * If not provided, will anchor to the wrapper element.
+   */
+  target?: React.RefObject<React.Component> | string;
+
+  /**
+   * Controls the tooltip visibility and can be used in conjunction with onVisibleChange to modify show/hide behavior. If not provided, will be updated based on hover/focus events on target element.
+   *
+   * @default false
+   */
+  visible?: boolean;
+}>;
+
+export interface TooltipSlotProps {
+  root: TooltipProps;
+}
+
+export interface TooltipType {
+  props: TooltipProps;
+  slotProps: TooltipSlotProps;
+}

packages/experimental/Tooltip/src/__tests__/Tooltip.test.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { Button } from '@fluentui-react-native/experimental-button';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+import { Tooltip } from '../Tooltip';
+
+describe('Tooltip component tests', () => {
+  it('Tooltip default', () => {
+    const tree = renderer
+      .create(
+        <Tooltip content="Your component">
+          <Button>Your component</Button>
+        </Tooltip>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Tooltip simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(
+      () => (
+        <Tooltip content="Default Tooltip">
+          <Button>Default Tooltip</Button>
+        </Tooltip>
+      ),
+      2,
+    );
+  });
+
+  it('Tooltip re-renders correctly', () => {
+    checkReRender(
+      () => (
+        <Tooltip content="Render twice">
+          <Button>Render twice</Button>
+        </Tooltip>
+      ),
+      2,
+    );
+  });
+
+  // Feel free to add more tests here
+});