diff --git a/pages/app/index.html b/pages/app/index.html index 94bd99d942..4c1f2e9816 100644 --- a/pages/app/index.html +++ b/pages/app/index.html @@ -15,7 +15,7 @@ } // Theming generates inline styles in runtime - if (location.hash.includes('theming') || location.hash.includes('side-navigation/collapsed')) { + if (location.hash.includes('theming') || location.hash.includes('side-navigation/collapsed') || location.hash.includes('tooltip/motion')) { csp['style-src'] = "'unsafe-inline' 'self'"; } if (location.hash.includes('code-editor')) { diff --git a/pages/tooltip/motion.page.tsx b/pages/tooltip/motion.page.tsx new file mode 100644 index 0000000000..d98bb2a1af --- /dev/null +++ b/pages/tooltip/motion.page.tsx @@ -0,0 +1,154 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useEffect, useRef, useState } from 'react'; + +import Box from '~components/box'; +import Button from '~components/button'; +import FormField from '~components/form-field'; +import SegmentedControl from '~components/segmented-control'; +import SpaceBetween from '~components/space-between'; +import { applyTheme } from '~components/theming'; +import Tooltip from '~components/tooltip'; + +import { SimplePage } from '../app/templates'; + +type DurationOption = 'default' | 'slow' | 'very-slow' | 'none'; + +const durationValues: Record = { + default: '115ms', + slow: '500ms', + 'very-slow': '1500ms', + none: '0ms', +}; + +const easingValues: Record = { + default: 'cubic-bezier(0, 0, 0, 1)', + 'ease-out': 'ease-out', + linear: 'linear', + 'ease-in-out': 'ease-in-out', + bounce: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)', +}; + +export default function TooltipMotionPage() { + const [duration, setDuration] = useState('default'); + const [easing, setEasing] = useState('default'); + + useEffect(() => { + const { reset } = applyTheme({ + theme: { + tokens: { + motionDurationTooltipEnter: durationValues[duration], + motionEasingTooltipEnter: easingValues[easing], + }, + } as any, + baseThemeId: 'visual-refresh', + }); + return reset; + }, [duration, easing]); + + return ( + + + setDuration(detail.selectedId as DurationOption)} + options={[ + { id: 'default', text: `Default (${durationValues.default})` }, + { id: 'slow', text: `Slow (${durationValues.slow})` }, + { id: 'very-slow', text: `Very slow (${durationValues['very-slow']})` }, + { id: 'none', text: 'None (0ms)' }, + ]} + /> + + + setEasing(detail.selectedId)} + options={[ + { id: 'default', text: 'Default' }, + { id: 'ease-out', text: 'ease-out' }, + { id: 'linear', text: 'linear' }, + { id: 'ease-in-out', text: 'ease-in-out' }, + { id: 'bounce', text: 'Bounce' }, + ]} + /> + + + } + > + + Hover or focus the buttons to see the tooltip enter animation + + + + + + + + + Longer content + + + + Tooltip title + Supporting description with multiple lines of text for testing. + + } + /> + + + Rapid hover (toggle quickly to test animation restart) + + {Array.from({ length: 5 }, (_, i) => ( + + ))} + + + + Current settings: duration={durationValues[duration]}, easing={easingValues[easing]} + + + + ); +} + +function TooltipButton({ + position, + label, + content, +}: { + position: 'top' | 'right' | 'bottom' | 'left'; + label: string; + content: React.ReactNode; +}) { + const ref = useRef(null); + const [show, setShow] = useState(false); + + return ( +
setShow(true)} onMouseLeave={() => setShow(false)}> + + {show && ( + ref.current} position={position} onEscape={() => setShow(false)} /> + )} +
+ ); +} diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 7316f9b17f..2384edecc8 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -781,6 +781,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "motion-duration-show-paced": "180ms", "motion-duration-show-quick": "135ms", "motion-duration-slow": "180ms", + "motion-duration-tooltip-enter": "0ms", "motion-duration-transition-quick": "90ms", "motion-duration-transition-show-paced": "180ms", "motion-duration-transition-show-quick": "90ms", @@ -796,6 +797,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "ease-out", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", @@ -1729,6 +1731,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "motion-duration-show-paced": "180ms", "motion-duration-show-quick": "135ms", "motion-duration-slow": "180ms", + "motion-duration-tooltip-enter": "0ms", "motion-duration-transition-quick": "90ms", "motion-duration-transition-show-paced": "180ms", "motion-duration-transition-show-quick": "90ms", @@ -1744,6 +1747,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "ease-out", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", @@ -2677,6 +2681,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "motion-duration-show-paced": "180ms", "motion-duration-show-quick": "135ms", "motion-duration-slow": "180ms", + "motion-duration-tooltip-enter": "0ms", "motion-duration-transition-quick": "90ms", "motion-duration-transition-show-paced": "180ms", "motion-duration-transition-show-quick": "90ms", @@ -2692,6 +2697,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "ease-out", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", @@ -3625,6 +3631,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "motion-duration-show-paced": "0ms", "motion-duration-show-quick": "0ms", "motion-duration-slow": "0ms", + "motion-duration-tooltip-enter": "0ms", "motion-duration-transition-quick": "0ms", "motion-duration-transition-show-paced": "0ms", "motion-duration-transition-show-quick": "0ms", @@ -3640,6 +3647,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "ease-out", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", @@ -4573,6 +4581,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "motion-duration-show-paced": "180ms", "motion-duration-show-quick": "135ms", "motion-duration-slow": "180ms", + "motion-duration-tooltip-enter": "115ms", "motion-duration-transition-quick": "90ms", "motion-duration-transition-show-paced": "180ms", "motion-duration-transition-show-quick": "90ms", @@ -4588,6 +4597,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", @@ -5521,6 +5531,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-duration-show-paced": "180ms", "motion-duration-show-quick": "135ms", "motion-duration-slow": "180ms", + "motion-duration-tooltip-enter": "115ms", "motion-duration-transition-quick": "90ms", "motion-duration-transition-show-paced": "180ms", "motion-duration-transition-show-quick": "90ms", @@ -5536,6 +5547,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", @@ -6469,6 +6481,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-duration-show-paced": "180ms", "motion-duration-show-quick": "135ms", "motion-duration-slow": "180ms", + "motion-duration-tooltip-enter": "115ms", "motion-duration-transition-quick": "90ms", "motion-duration-transition-show-paced": "180ms", "motion-duration-transition-show-quick": "90ms", @@ -6484,6 +6497,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", @@ -7417,6 +7431,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-duration-show-paced": "180ms", "motion-duration-show-quick": "135ms", "motion-duration-slow": "180ms", + "motion-duration-tooltip-enter": "115ms", "motion-duration-transition-quick": "90ms", "motion-duration-transition-show-paced": "180ms", "motion-duration-transition-show-quick": "90ms", @@ -7432,6 +7447,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-easing-show-paced": "ease-out", "motion-easing-show-quick": "ease-out", "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)", + "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)", "motion-easing-transition-quick": "linear", "motion-easing-transition-show-paced": "ease-out", "motion-keyframes-fade-in": "awsui-fade-in-35003c", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 3e7ee6e9c2..9a8f4a0bac 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -3273,6 +3273,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "0ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -3301,6 +3308,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "ease-out", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -6895,6 +6909,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "0ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -6923,6 +6944,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "ease-out", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -10517,6 +10545,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "0ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -10545,6 +10580,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "ease-out", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -14139,6 +14181,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "0ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -14167,6 +14216,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "ease-out", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -17761,6 +17817,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "0ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -17789,6 +17852,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "ease-out", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -21383,6 +21453,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "0ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -21411,6 +21488,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "ease-out", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -25005,6 +25089,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "0ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -25033,6 +25124,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "ease-out", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -28632,6 +28730,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -28660,6 +28765,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -32254,6 +32366,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -32282,6 +32401,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -35876,6 +36002,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -35904,6 +36037,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -39498,6 +39638,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -39526,6 +39673,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -43120,6 +43274,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -43148,6 +43309,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -46742,6 +46910,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -46770,6 +46945,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -50364,6 +50546,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -50392,6 +50581,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -53986,6 +54182,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -54014,6 +54217,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { @@ -57608,6 +57818,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "0ms", }, }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, "motion-easing-avatar-gen-ai-gradient": { "$description": "The easing curve for gradient motion of gen-ai avatars.", "$value": { @@ -57636,6 +57853,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "cubic-bezier(1, 0, 0.83, 1)", }, }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, "motion-keyframes-fade-in": { "$description": "The CSS keyframes for showing an element.", "$value": { diff --git a/src/tooltip/internal.tsx b/src/tooltip/internal.tsx index 8c37e016d0..7556612d1d 100644 --- a/src/tooltip/internal.tsx +++ b/src/tooltip/internal.tsx @@ -14,6 +14,7 @@ import PopoverBody from '../popover/body'; import PopoverContainer from '../popover/container'; import { InternalTooltipProps } from './internal-interfaces'; +import styles from './styles.css.js'; import testUtilStyles from './test-classes/styles.css.js'; type InternalTooltipComponentProps = InternalTooltipProps & @@ -70,7 +71,7 @@ export default function InternalTooltip({