chore(Tooltip): move to function component

CHANGELOG.md

@@ -18,13 +18,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ## [Unreleased]
 
 ### BREAKING CHANGES
-- Restricted prop set in the `Checkbox`, `Icon`, `Label`, `Slider`, `Status`, `Text` @layershifter ([#2307](https://github.com/microsoft/fluent-ui-react/pull/2307))
+- Restricted prop sets in the `Checkbox`, `Icon`, `Label`, `Slider`, `Status`, `Text` components which are passed to styles functions @layershifter ([#2307](https://github.com/microsoft/fluent-ui-react/pull/2307))
 - Styles caching when no inline overrides are defined is enabled by default; use the `performance` prop on the `Provider` to opt out of this if needed @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))
 - Styles for the `Animation` component are removed from Teams theme @layershifter ([#2258](https://github.com/microsoft/fluent-ui-react/pull/2258))
 - Styles from `Popup` were moved `PopupContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
 - Styles from `Tooltip` were moved `TooltipContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
 - `ProviderBox` component was removed @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
 - Styles and variables from `ProviderBox` are moved to `Provider` @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Restricted prop set in the `TooltipContent` component which is passed to styles functions @layershifter ([#2357](https://github.com/microsoft/fluent-ui-react/pull/2357))
 
 ### Fixes
 - Remove dependency on Lodash in TypeScript typings @layershifter ([#2323](https://github.com/microsoft/fluent-ui-react/pull/2323))

packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts

@@ -1,5 +1,5 @@
 import * as keyboardKey from 'keyboard-key'
-import { Accessibility } from '../../types'
+import { Accessibility, AccessibilityAttributes } from '../../types'
 
 /**
  * @description
@@ -52,4 +52,4 @@ export type TooltipBehaviorProps = {
   open: boolean
   /** Tooltip's container id. */
   contentId: string
-}
+} & Pick<AccessibilityAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>

packages/accessibility/src/behaviors/index.ts

@@ -61,6 +61,7 @@ export { default as accordionTitleBehavior } from './Accordion/accordionTitleBeh
 export { default as accordionContentBehavior } from './Accordion/accordionContentBehavior'
 export { default as checkboxBehavior } from './Checkbox/checkboxBehavior'
 export * from './Checkbox/checkboxBehavior'
+export * from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsDescriptionBehavior } from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsLabelBehavior } from './Tooltip/tooltipAsLabelBehavior'
 export { default as sliderBehavior } from './Slider/sliderBehavior'

packages/react-proptypes/src/index.ts

@@ -13,6 +13,8 @@ const typeOf = (x: any) => Object.prototype.toString.call(x)
 export const domNode = (props: ObjectOf<any>, propName: string) => {
   // skip if prop is undefined
   if (props[propName] === undefined) return undefined
+  // skip if prop is null
+  if (props[propName] === null) return null
   // skip if prop is valid
   if (props[propName] instanceof Element) return undefined