fix: getPointerStyles in RTL mode (microsoft#20915)

* fix: getPointerStyles in RTL mode * chore: add pointing prop to tooltip * add position to rtl example * revert changes for top and bottom * fix compatibility * add changelog
mlp73 · Jan 17, 2022 · 991ee1f · 991ee1f
1 parent 92c703c
commit 991ee1f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -68,6 +68,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `MenuItemIcon` to allow icon `size` to be in effect @yuanboxue-amber ([#20803](https://github.com/microsoft/fluentui/pull/20803))
 - Fix `Pill` components to properly pass ref to root slots @chpalac ([#20838](https://github.com/microsoft/fluentui/pull/20838))
 - Fix `MenuButton` component to properly pass ref to root slots @chpalac ([#20837](https://github.com/microsoft/fluentui/pull/20837))
+- Fix `getPointerStyles` transform for RTL @chpalac ([#20915](https://github.com/microsoft/fluentui/pull/20915))
 - Fix `Table` component to properly pass ref to root slots @chpalac ([#20873](https://github.com/microsoft/fluentui/pull/20873))
 - Fix `Status` component to properly pass ref to root slots @chpalac ([#20872](https://github.com/microsoft/fluentui/pull/20872))
 - Fix `SplitButton` components to properly pass ref to root slots @chpalac ([#20871](https://github.com/microsoft/fluentui/pull/20871))

diff --git a/packages/fluentui/docs/src/examples/components/Tooltip/Rtl/TooltipExample.rtl.tsx b/packages/fluentui/docs/src/examples/components/Tooltip/Rtl/TooltipExample.rtl.tsx
@@ -3,6 +3,8 @@ import { Button, Tooltip, Text } from '@fluentui/react-northstar';
 
 const TooltipExampleRtl = () => (
   <Tooltip
+    pointing
+    position="before"
     trigger={<Button content="ا يجلبه إلينا الأس" />}
     content={
       <>

diff --git a/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts
@@ -41,7 +41,7 @@ export const getContainerStyles = (options: GetContainerStylesOptions): ICSSInJS
 };
 
 export const getPointerStyles = (options: GetPointerStylesOptions): ICSSInJSStyle => {
-  const { backgroundColor, borderColor, borderSize, gap, height, padding, placement, svg, width } = options;
+  const { backgroundColor, borderColor, rtl, borderSize, gap, height, padding, placement, svg, width } = options;
 
   return {
     display: 'block',
@@ -188,14 +188,14 @@ export const getPointerStyles = (options: GetPointerStylesOptions): ICSSInJSStyl
           width: height,
 
           left: 0,
-          transform: 'rotate(180deg) /* @noflip */',
+          transform: rtl ? 'rotate(0) /* @noflip */' : 'rotate(180deg) /* @noflip */',
         }),
         ...(placement === 'right' && {
           height: width,
           width: height,
 
           right: 0,
-          transform: 'rotate(0deg) /* @noflip */',
+          transform: rtl ? 'rotate(180deg) /* @noflip */' : 'rotate(0) /* @noflip */',
         }),
       },
       '::after': undefined,