[@mantine/core] Fix incorrect Tooltip and Popover arrow styles for RTL (

#2104)
mantinedev · Aug 18, 2022 · f221971 · f221971
1 parent d8c98ea
commit f221971
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -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
@@ -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}>