From f221971b11b7e36c635a3fc3cecee17452fc8599 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Thu, 18 Aug 2022 14:32:29 +0300
Subject: [PATCH] [@mantine/core] Fix incorrect Tooltip and Popover arrow
 styles for RTL (#2104)

---
 .../FloatingArrow/get-arrow-position-styles.ts |  8 ++++----
 src/mantine-core/src/Tooltip/Tooltip.story.tsx | 18 ++++--------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts b/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts
index e4334ec7727..c1720108465 100644
--- a/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts
+++ b/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts
@@ -68,8 +68,8 @@ export function getArrowPositionStyles({
     return {
       ...baseStyles,
       ...horizontalSide(placement, arrowSize, arrowOffset),
-      [dir === 'ltr' ? 'right' : 'left']: arrowPosition,
-      [dir === 'ltr' ? 'borderLeft' : 'borderRight']: 0,
+      right: arrowPosition,
+      borderLeft: 0,
       borderBottom: 0,
     };
   }
@@ -78,8 +78,8 @@ export function getArrowPositionStyles({
     return {
       ...baseStyles,
       ...horizontalSide(placement, arrowSize, arrowOffset),
-      [dir === 'ltr' ? 'left' : 'right']: arrowPosition,
-      [dir === 'ltr' ? 'borderRight' : 'borderLeft']: 0,
+      left: arrowPosition,
+      borderRight: 0,
       borderTop: 0,
     };
   }
diff --git a/src/mantine-core/src/Tooltip/Tooltip.story.tsx b/src/mantine-core/src/Tooltip/Tooltip.story.tsx
index c06b6a8371a..a82cb5afaa2 100644
--- a/src/mantine-core/src/Tooltip/Tooltip.story.tsx
+++ b/src/mantine-core/src/Tooltip/Tooltip.story.tsx
@@ -5,25 +5,15 @@ import { Group } from '../Group';
 
 export default { title: 'Tooltip' };
 
-export const Usage = () => {
-  const [opened, setOpened] = useState(false);
+export function Usage() {
   return (
     <div style={{ padding: 40 }}>
-      <Tooltip
-        position="bottom"
-        label="Use this button to save this information in your profile, after that you will be able to access it any time and share it via email."
-        width={300}
-        multiline
-        events={{ focus: true, hover: true, touch: false }}
-        withinPortal={false}
-      >
-        <Button fullWidth onClick={() => setOpened(!opened)}>
-          target
-        </Button>
+      <Tooltip position="right" label="Tooltip label" withArrow>
+        <Button>target</Button>
       </Tooltip>
     </div>
   );
-};
+}
 
 export const TooltipGroup = () => (
   <Tooltip.Group openDelay={500}>