[@mantine/core] Tooltip: Rename transition and transitionDuration pro…

…ps to transitionProps
milhamm · Feb 18, 2023 · df8f1d1 · df8f1d1
1 parent a34ce17
commit df8f1d1
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 26 deletions.
diff --git a/docs/src/components/MdxPage/MdxPageHeader/HeaderCode/HeaderCode.tsx b/docs/src/components/MdxPage/MdxPageHeader/HeaderCode/HeaderCode.tsx
@@ -23,7 +23,6 @@ export function HeaderCode({ code, icon, language }: ImportStatementProps) {
       <Tooltip
         label={clipboard.copied ? 'Copied' : 'Copy'}
         position="right"
-        transition="fade"
         withArrow
         arrowSize={6}
         offset={10}

diff --git a/docs/src/docs/changelog/6-0-0.mdx b/docs/src/docs/changelog/6-0-0.mdx
@@ -311,12 +311,12 @@ Renamed props:
 - `withFocusReturn` prop was renamed to `returnFocus` in [Modal](https://mantine.dev/core/modal/) and [Drawer](https://mantine.dev/core/drawer/) components
 - [Card](https://mantine.dev/core/card/) component now uses `padding` prop instead of `p` to offset `Card.Section` components
 - [RichTextEditor](https://mantine.dev/others/tiptap/) now depends on `@tabler/icons-react` (`>=2.1.0`) package instead of `@tabler/icons`
-
 - `@mantine/core` package no longer exports `GroupedTransition` component, use multiple [Transition](https://mantine.dev/core/transition/) components instead
 - `use-scroll-lock` hook is deprecated, all Mantine components now use [react-remove-scroll](https://github.com/theKashey/react-remove-scroll)
 - [ScrollArea.Autosize](https://mantine.dev/core/scroll-area/) component prop `maxHeight` is removed, it is replaced with `mah` [style prop](https://mantine.dev/styles/style-props/)
 - [SegmentedControl](https://mantine.dev/core/segmented-control/) component Styles API was changed – `labelActive` and `disabled` selectors were removed (replaced with `data-active` and `data-disabled` attributes on `label` selector), `active` selector was renamed to `indicator`
 - [Notification](https://mantine.dev/core/notification/) component prop `disallowClose` prop was renamed to `withCloseButton`, it also was changed in [notifications system](https://mantine.dev/others/notifications/)
+- [Tooltip](https://mantine.dev/core/tooltip/) component props `transition` and `transitionDuration` were renamed to `transitionProps`
 
 ## Variants and sizes on MantineProvider
 

diff --git a/src/mantine-core/src/Tooltip/Tooltip.test.tsx b/src/mantine-core/src/Tooltip/Tooltip.test.tsx
@@ -15,7 +15,7 @@ import { TOOLTIP_ERRORS } from './Tooltip.errors';
 const defaultProps: TooltipProps = {
   withinPortal: false,
   opened: true,
-  transitionDuration: 0,
+  transitionProps: { duration: 0 },
   label: 'test-tooltip',
   children: <button type="button">test-target</button>,
 };
@@ -68,7 +68,7 @@ describe('@mantine/core/Tooltip', () => {
 
   it('shows tooltip when target element is hovered', async () => {
     render(
-      <Tooltip label="test-tooltip" transitionDuration={0}>
+      <Tooltip label="test-tooltip" transitionProps={{ duration: 0 }}>
         <button type="button">target</button>
       </Tooltip>
     );

diff --git a/src/mantine-core/src/Tooltip/Tooltip.tsx b/src/mantine-core/src/Tooltip/Tooltip.tsx
@@ -6,7 +6,7 @@ import { TooltipGroup } from './TooltipGroup/TooltipGroup';
 import { TooltipFloating } from './TooltipFloating/TooltipFloating';
 import { useTooltip } from './use-tooltip';
 import { FloatingArrow, getFloatingPosition, FloatingPosition, ArrowPosition } from '../Floating';
-import { MantineTransition, Transition } from '../Transition';
+import { Transition, TransitionOverride } from '../Transition';
 import { OptionalPortal } from '../Portal';
 import { Box } from '../Box';
 import { TOOLTIP_ERRORS } from './Tooltip.errors';
@@ -46,11 +46,8 @@ export interface TooltipProps extends TooltipBaseProps {
   /** Arrow position **/
   arrowPosition?: ArrowPosition;
 
-  /** One of premade transitions ot transition object */
-  transition?: MantineTransition;
-
-  /** Transition duration in ms */
-  transitionDuration?: number;
+  /** Props added to Transition component that used to animate tooltip presence, use to configure duration and animation type, { duration: 100, transition: 'fade' } by default */
+  transitionProps?: TransitionOverride;
 
   /** Determines which events will be used to show tooltip */
   events?: { hover: boolean; focus: boolean; touch: boolean };
@@ -75,8 +72,7 @@ const defaultProps: Partial<TooltipProps> = {
   arrowRadius: 0,
   arrowPosition: 'side',
   offset: 5,
-  transition: 'fade',
-  transitionDuration: 100,
+  transitionProps: { duration: 100, transition: 'fade' },
   width: 'auto',
   events: { hover: true, focus: false, touch: false },
   zIndex: getDefaultZIndex('popover'),
@@ -108,8 +104,7 @@ const _Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
     arrowRadius,
     arrowPosition,
     offset,
-    transition,
-    transitionDuration,
+    transitionProps,
     multiline,
     width,
     events,
@@ -156,8 +151,9 @@ const _Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
         <Transition
           keepMounted={keepMounted}
           mounted={!disabled && tooltip.opened}
-          transition={transition}
-          duration={tooltip.isGroupPhase ? 10 : transitionDuration}
+          {...transitionProps}
+          transition={transitionProps.transition || 'fade'}
+          duration={tooltip.isGroupPhase ? 10 : transitionProps.duration || 100}
         >
           {(transitionStyles) => (
             <Box

diff --git a/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.multiline.tsx b/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.multiline.tsx
@@ -11,8 +11,7 @@ function Demo() {
       multiline
       width={220}
       withArrow
-      transition="fade"
-      transitionDuration={200}
+      transitionProps={{ duration: 200 }}
       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."
     >
       <Button variant="outline">Multiline tooltip</Button>
@@ -28,8 +27,7 @@ export function Demo() {
         multiline
         width={220}
         withArrow
-        transition="fade"
-        transitionDuration={200}
+        transitionProps={{ duration: 200 }}
         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."
       >
         <Button variant="outline">Multiline tooltip</Button>

diff --git a/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.transitions.tsx b/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.transitions.tsx
@@ -4,7 +4,7 @@ import { Tooltip, Badge, Group, AVAILABLE_TRANSITIONS } from '@mantine/core';
 
 export function Demo() {
   const transitions = AVAILABLE_TRANSITIONS.map((transition) => (
-    <Tooltip key={transition} label={transition} transition={transition} transitionDuration={300}>
+    <Tooltip key={transition} label={transition} transitionProps={{ transition, duration: 300 }}>
       <Badge>{transition}</Badge>
     </Tooltip>
   ));

diff --git a/src/mantine-demos/src/demos/theme/Theme.demo.respectReduceMotion.tsx b/src/mantine-demos/src/demos/theme/Theme.demo.respectReduceMotion.tsx
@@ -8,11 +8,11 @@ import { Tooltip, Button, MantineProvider, Group } from '@mantine/core';
 function Demo() {
   return (
     <Group position="center">
-      <Tooltip label="User settings are respected" transition="pop" transitionDuration={300}>
+      <Tooltip label="User settings are respected" transitionProps={{ transition: 'pop', duration: 300 }}>
         <Button>Respect user settings</Button>
       </Tooltip>
       <MantineProvider inherit theme={{ respectReducedMotion: false }}>
-        <Tooltip label="User settings are disregarded" transition="pop" transitionDuration={300}>
+        <Tooltip label="User settings are disregarded" transitionProps={{ transition: 'pop', duration: 300 }}>
           <Button>Disregard user settings</Button>
         </Tooltip>
       </MantineProvider>
@@ -24,11 +24,17 @@ function Demo() {
 function Demo() {
   return (
     <Group position="center">
-      <Tooltip label="User settings are respected" transition="pop" transitionDuration={300}>
+      <Tooltip
+        label="User settings are respected"
+        transitionProps={{ transition: 'pop', duration: 300 }}
+      >
         <Button>Respect user settings</Button>
       </Tooltip>
       <MantineProvider inherit theme={{ respectReducedMotion: false }}>
-        <Tooltip label="User settings are disregarded" transition="pop" transitionDuration={300}>
+        <Tooltip
+          label="User settings are disregarded"
+          transitionProps={{ transition: 'pop', duration: 300 }}
+        >
           <Button>Disregard user settings</Button>
         </Tooltip>
       </MantineProvider>

diff --git a/src/mantine-ds/src/Demo/CodeDemo/CodeDemo.tsx b/src/mantine-ds/src/Demo/CodeDemo/CodeDemo.tsx
@@ -57,7 +57,6 @@ export default function CodeDemo({
             <Tooltip
               label={`${visible ? 'Hide' : 'Show'} code`}
               position="left"
-              transition="fade"
               withArrow
               arrowSize={6}
               offset={6}