microsoft · mnajdova · Jul 9, 2019 · Jul 3, 2019 · Jul 3, 2019 · Jul 3, 2019
@@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add accessibility attributes and keyboard handlers for `Tooltip` @sophieH29 ([#1575](https://github.com/stardust-ui/react/pull/1575))
 - Add `labelPosition` prop to `Checkbox` component @layershifter ([#1578](https://github.com/stardust-ui/react/pull/1578))
 - Pass `props` of `Icon` component to SVG spec @kuzhelov ([#1562](https://github.com/stardust-ui/react/pull/1562))
+- Add svg pointing beak to the `Tooltip` component in Teams theme @mnajdova ([#1580](https://github.com/stardust-ui/react/pull/1580))
 
 ### Documentation
 - Ensure docs content doesn't overlap with sidebar @kuzhelov ([#1568](https://github.com/stardust-ui/react/pull/1568))

@@ -20,5 +20,4 @@ export { default as Alert } from './components/Alert/alertVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 export { default as Label } from './components/Label/labelVariables'
-export { default as Tooltip } from './components/Tooltip/tooltipVariables'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentVariables'
@@ -1,5 +1,7 @@
 import { TooltipContentVariables } from '../../../teams/components/Tooltip/tooltipContentVariables'
 
-export default (): Partial<TooltipContentVariables> => ({
+export default (siteVars): Partial<TooltipContentVariables> => ({
   boxShadowColor: undefined,
+  color: siteVars.colors.black,
+  backgroundColor: siteVars.colors.white,
 })
@@ -2,29 +2,63 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { TooltipContentProps } from '../../../../components/Tooltip/TooltipContent'
 import { TooltipContentVariables } from './tooltipContentVariables'
 import getPointerStyles from '../../getPointerStyles'
+import pointerSvg from '../../pointerSvgUrl'
+import { PopperChildrenProps } from '../../../../lib/positioner'
+
+const getPointerOffset = (
+  placement: PopperChildrenProps['placement'],
+  v: TooltipContentVariables,
+) =>
+  placement === 'top-start' ||
+  placement === 'top' ||
+  placement === 'top-end' ||
+  placement === 'bottom-end' ||
+  placement === 'bottom' ||
+  placement === 'bottom-start'
+    ? v.pointerVerticalOffset
+    : v.pointerHorizontalOffset
 
 const tooltipContentStyles: ComponentSlotStylesInput<
   TooltipContentProps,
   TooltipContentVariables
 > = {
-  root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({
-    borderRadius: v.borderRadius,
-    display: 'block',
-    maxWidth: v.maxWidth,
+  root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => {
+    const svgPointerStyles = getPointerStyles(
+      getPointerOffset(p.placement, v),
+      v.pointerMargin,
+      rtl,
+      p.placement,
+      true,
+    )
 
-    ...(p.pointing && getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).root),
-  }),
-  pointer: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({
-    display: 'block',
-    position: 'absolute',
+    return {
+      borderRadius: v.borderRadius,
+      display: 'block',
+      maxWidth: v.maxWidth,
+      color: v.color,
+      background: v.backgroundColor,
+      ...(p.pointing && svgPointerStyles.root),
+    }
+  },
+  pointer: ({ props: p, variables: v, rtl }): ICSSInJSStyle => {
+    const svgPointerStyles = getPointerStyles(
+      getPointerOffset(p.placement, v),
+      v.pointerMargin,
+      rtl,
+      p.placement,
+      true,
+    )
 
-    backgroundColor: 'inherit',
-
-    height: v.pointerSize,
-    width: v.pointerSize,
-
-    ...getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).pointer,
-  }),
+    return {
+      display: 'block',
+      position: 'absolute',
+      overflow: 'hidden',
+      width: v.pointerWidth,
+      height: v.pointerHeight,
+      backgroundImage: pointerSvg(v.backgroundColor),
+      ...svgPointerStyles.pointer,
+    }
+  },
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,

@@ -12,23 +12,30 @@ export interface TooltipContentVariables {
   maxWidth: string
 
   pointerMargin: string
-  pointerOffset: string
-  pointerSize: string
-}
+  pointerHorizontalOffset: string
+  pointerVerticalOffset: string
+  pointerWidth: string
+  pointerHeight: string
 
-export default (siteVars: any): TooltipContentVariables => {
-  return {
-    boxShadowStart: '0 2px 4px 0',
-    boxShadowEnd: '0 2px 10px 0',
-    boxShadowColor: siteVars.colors.grey[250],
-    borderRadius: pxToRem(3),
-    borderSize: '1px',
-    padding: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(12)}`,
-
-    maxWidth: pxToRem(246),
-
-    pointerOffset: pxToRem(5),
-    pointerMargin: pxToRem(10),
-    pointerSize: pxToRem(10),
-  }
+  color: string
+  backgroundColor: string
 }
+
+export default (siteVars: any): TooltipContentVariables => ({
+  boxShadowStart: '0 2px 4px 0',
+  boxShadowEnd: '0 2px 10px 0',
+  boxShadowColor: siteVars.colors.grey[250],
+  borderRadius: pxToRem(3),
+  borderSize: '1px',
+  padding: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(12)}`,
+
+  maxWidth: pxToRem(246),
+
+  pointerVerticalOffset: pxToRem(10),
+  pointerHorizontalOffset: pxToRem(5),
+  pointerMargin: pxToRem(6),
+  pointerWidth: pxToRem(6),
+  pointerHeight: pxToRem(16),
+  color: siteVars.colorScheme.default.foreground3,
+  backgroundColor: siteVars.colors.grey[500],
+})
@@ -1,8 +1,8 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { PopupProps } from '../../../../components/Popup/Popup'
+import { TooltipProps } from '../../../../components/Tooltip/Tooltip'
 import { TooltipVariables } from './tooltipVariables'
 
-const tooltipStyles: ComponentSlotStylesInput<PopupProps, TooltipVariables> = {
+const tooltipStyles: ComponentSlotStylesInput<TooltipProps, TooltipVariables> = {
   root: (): ICSSInJSStyle => ({}),
 
   content: ({ variables: v, props: p }): ICSSInJSStyle => ({
@@ -12,8 +12,6 @@ const tooltipStyles: ComponentSlotStylesInput<PopupProps, TooltipVariables> = {
     zIndex: v.zIndex,
     position: 'absolute',
     textAlign: 'left',
-    color: v.contentColor,
-    background: v.contentBackgroundColor,
   }),
 }
 

@@ -1,11 +1,7 @@
 export interface TooltipVariables {
   zIndex: number
-  contentColor: string
-  contentBackgroundColor: string
 }
 
 export default (siteVars: any): TooltipVariables => ({
   zIndex: 1000,
-  contentColor: siteVars.colorScheme.default.foreground3,
-  contentBackgroundColor: siteVars.colors.grey[500],
 })
@@ -10,6 +10,7 @@ const getPointerStyles = (
   pointerMargin: string,
   rtl: boolean,
   popperPlacement?: PopperChildrenProps['placement'],
+  isSvg?: boolean,
 ) => {
   const placementValue = (popperPlacement || '').split('-', 1).pop()
   const placement = (rtl && rtlMapping[placementValue]) || placementValue
@@ -31,19 +32,19 @@ const getPointerStyles = (
   const pointerStyles = {
     top: {
       bottom: `-${pointerOffset}`,
-      transform: 'rotate(45deg)',
+      transform: isSvg ? `rotate(${rtl ? 90 : -90}deg)` : 'rotate(45deg)',
     },
     right: {
       left: `-${pointerOffset}`,
-      transform: 'rotate(135deg)',
+      transform: isSvg ? `rotate(${rtl ? 180 : 0}deg)` : 'rotate(135deg)',
     },
     bottom: {
       top: `-${pointerOffset}`,
-      transform: 'rotate(-135deg)',
+      transform: isSvg ? `rotate(${rtl ? -90 : 90}deg)` : 'rotate(-135deg)',
     },
     left: {
       right: `-${pointerOffset}`,
-      transform: 'rotate(-45deg)',
+      transform: isSvg ? `rotate(${rtl ? 0 : 180}deg)` : 'rotate(-45deg)',
     },
   }
 

@@ -0,0 +1,4 @@
+export default (backgroundColor: string) =>
+  `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='${encodeURIComponent(
+    backgroundColor,
+  )}' viewBox='0 0 6 16'%3E%3Cpath d='M.708 9.527a2.002 2.002 0 0 1 0-3.055l3.284-2.78C5.324 2.562 5.991 1.332 5.991 0c0 1.002.02 15.013 0 16 0-1.333-.665-2.562-1.995-3.689L.708 9.527z' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E%0A");`