From 129c564945d3bf1bdcc73f946edb3f5706b68fc7 Mon Sep 17 00:00:00 2001 From: Charles Date: Fri, 3 Dec 2021 16:29:16 -0300 Subject: [PATCH 1/6] fix: getPointerStyles in RTL mode --- .../src/themes/teams/getPointerStyles.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts index a3a8720a7f6d22..9bb189e96d3ded 100644 --- 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', @@ -173,7 +173,7 @@ export const getPointerStyles = (options: GetPointerStylesOptions): ICSSInJSStyl left: gap, bottom: `calc(${width} - ${height} + ${borderSize})`, - transform: 'rotate(90deg) /* @noflip */', + transform: `rotate(${rtl ? -90 : 90}deg)`, }), ...(placement === 'top' && { height: `calc(${width} + (${gap} * 2))`, @@ -181,21 +181,21 @@ export const getPointerStyles = (options: GetPointerStylesOptions): ICSSInJSStyl left: gap, bottom: `calc(${gap} + ${height} - ${borderSize})`, - transform: 'rotate(-90deg) /* @noflip */', + transform: `rotate(${rtl ? 90 : -90}deg)`, }), ...(placement === 'left' && { height: width, width: height, left: 0, - transform: 'rotate(180deg) /* @noflip */', + transform: `rotate(${rtl ? 0 : 180}deg)`, }), ...(placement === 'right' && { height: width, width: height, right: 0, - transform: 'rotate(0deg) /* @noflip */', + transform: `rotate(${rtl ? 180 : 0}deg)`, }), }, '::after': undefined, From 77128cfd3fc7978c37337674cdf58e6a393e0176 Mon Sep 17 00:00:00 2001 From: Charles Date: Mon, 6 Dec 2021 08:11:37 -0300 Subject: [PATCH 2/6] chore: add pointing prop to tooltip --- .../src/examples/components/Tooltip/Rtl/TooltipExample.rtl.tsx | 1 + 1 file changed, 1 insertion(+) 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 index bd84d9668bec3c..4edcc6b77ad0b4 100644 --- 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,7 @@ import { Button, Tooltip, Text } from '@fluentui/react-northstar'; const TooltipExampleRtl = () => ( } content={ <> From 381962812f44296f7d17eaa1a0b86967230facab Mon Sep 17 00:00:00 2001 From: Charles Date: Mon, 6 Dec 2021 08:38:26 -0300 Subject: [PATCH 3/6] add position to rtl example --- .../src/examples/components/Tooltip/Rtl/TooltipExample.rtl.tsx | 1 + 1 file changed, 1 insertion(+) 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 index 4edcc6b77ad0b4..b391fa0ce47eb5 100644 --- a/packages/fluentui/docs/src/examples/components/Tooltip/Rtl/TooltipExample.rtl.tsx +++ b/packages/fluentui/docs/src/examples/components/Tooltip/Rtl/TooltipExample.rtl.tsx @@ -4,6 +4,7 @@ import { Button, Tooltip, Text } from '@fluentui/react-northstar'; const TooltipExampleRtl = () => ( } content={ <> From f16d821f150d5d96509811be1fe631effc82010b Mon Sep 17 00:00:00 2001 From: Charles Date: Mon, 6 Dec 2021 11:26:12 -0300 Subject: [PATCH 4/6] revert changes for top and bottom --- .../react-northstar/src/themes/teams/getPointerStyles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts index 9bb189e96d3ded..f256d6b440d189 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts @@ -173,7 +173,7 @@ export const getPointerStyles = (options: GetPointerStylesOptions): ICSSInJSStyl left: gap, bottom: `calc(${width} - ${height} + ${borderSize})`, - transform: `rotate(${rtl ? -90 : 90}deg)`, + transform: 'rotate(90deg) /* @noflip */', }), ...(placement === 'top' && { height: `calc(${width} + (${gap} * 2))`, @@ -181,7 +181,7 @@ export const getPointerStyles = (options: GetPointerStylesOptions): ICSSInJSStyl left: gap, bottom: `calc(${gap} + ${height} - ${borderSize})`, - transform: `rotate(${rtl ? 90 : -90}deg)`, + transform: 'rotate(-90deg) /* @noflip */', }), ...(placement === 'left' && { height: width, From f9cc90c482e229982a68a11e84453968ab57e0cc Mon Sep 17 00:00:00 2001 From: Charles Date: Mon, 6 Dec 2021 11:59:31 -0300 Subject: [PATCH 5/6] fix compatibility --- .../react-northstar/src/themes/teams/getPointerStyles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts index f256d6b440d189..91cbaa3ba97e82 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts @@ -188,14 +188,14 @@ export const getPointerStyles = (options: GetPointerStylesOptions): ICSSInJSStyl width: height, left: 0, - transform: `rotate(${rtl ? 0 : 180}deg)`, + transform: rtl ? 'rotate(0) /* @noflip */' : 'rotate(180deg) /* @noflip */', }), ...(placement === 'right' && { height: width, width: height, right: 0, - transform: `rotate(${rtl ? 180 : 0}deg)`, + transform: rtl ? 'rotate(180deg) /* @noflip */' : 'rotate(0) /* @noflip */', }), }, '::after': undefined, From e78692c9a44d3815b33cd00962b4ced66bf8c12a Mon Sep 17 00:00:00 2001 From: Charles Date: Mon, 6 Dec 2021 13:29:56 -0300 Subject: [PATCH 6/6] add changelog --- packages/fluentui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index d6ba6b549d77c9..4ff48b696dc475 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -67,6 +67,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `Label` component to properly pass ref to root slots @chpalac ([#20813](https://github.com/microsoft/fluentui/pull/20813)) - Fix `MenuItemIcon` to allow icon `size` to be in effect @yuanboxue-amber ([#20803](https://github.com/microsoft/fluentui/pull/20803)) - 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)) ### Features - Adding `ViewPersonSparkleIcon`, `CartIcon`, and fixing `EmojiAddIcon` and `AccessibilityIcon` - @notandrew ([#20054](https://github.com/microsoft/fluentui/pull/20054))