Fix tooltip arrow's high contrast border in RTL (#21354)

Fix tooltip and popover's high contrast border in RTL
microsoft · Jan 20, 2022 · 2e34c02 · 2e34c02
1 parent 34e02e2
commit 2e34c02
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/change/@fluentui-react-positioning-8bf7e435-add2-4059-8c21-b1f66706a1d9.json b/change/@fluentui-react-positioning-8bf7e435-add2-4059-8c21-b1f66706a1d9.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix tooltip arrow's high contrast border in RTL",
+  "packageName": "@fluentui/react-positioning",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-positioning/src/createArrowStyles.ts b/packages/react-positioning/src/createArrowStyles.ts
@@ -82,7 +82,11 @@ export function createArrowStyles(options: CreateArrowStylesOptions): MakeStyles
       width: 'inherit',
       height: 'inherit',
       backgroundColor: 'inherit',
-      ...shorthands.borderRight(borderWidth, borderStyle, borderColor),
+      ...shorthands.borderRight(
+        `${borderWidth} /* @noflip */`,
+        `${borderStyle} /* @noflip */`,
+        `${borderColor} /* @noflip */`,
+      ),
       ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
       borderBottomRightRadius: tokens.borderRadiusSmall,
       transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',