Use design tokens in Widget Builder animations

Author: gggritso

static/app/views/dashboards/widgetBuilder/components/common/animationSettings.tsx

@@ -25,7 +25,6 @@ import {
   type DashboardFilters,
   type Widget,
 } from 'sentry/views/dashboards/types';
-import {animationTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/components/common/animationSettings';
 import {
   DEFAULT_WIDGET_DRAG_POSITIONING,
   DRAGGABLE_PREVIEW_HEIGHT_PX,
@@ -43,6 +42,7 @@ import {
   useWidgetBuilderContext,
   WidgetBuilderProvider,
 } from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
+import {useWidgetBuilderTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderAnimationSettings';
 import {DashboardsMEPProvider} from 'sentry/views/dashboards/widgetCard/dashboardsMEPContext';
 import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
 import {isLogsEnabled} from 'sentry/views/explore/logs/isLogsEnabled';
@@ -269,6 +269,7 @@ export function WidgetPreviewContainer({
   const organization = useOrganization();
   const location = useLocation();
   const theme = useTheme();
+  const transitionSettings = useWidgetBuilderTransitionSettings();
   const isSmallScreen = useMedia(`(max-width: ${theme.breakpoints.sm})`);
   // if small screen and draggable, enable dragging
   const isDragEnabled = isSmallScreen && isDraggable;
@@ -334,7 +335,7 @@ export function WidgetPreviewContainer({
     initial: {opacity: 0, x: '100%', y: 0},
     animate: {opacity: 1, x: 0, y: 0},
     exit: {opacity: 0, x: '100%', y: 0},
-    transition: animationTransitionSettings,
+    transition: transitionSettings,
   };
 
   return (

static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx

@@ -27,7 +27,6 @@ import {
   type DashboardFilters,
   type Widget,
 } from 'sentry/views/dashboards/types';
-import {animationTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/components/common/animationSettings';
 import WidgetBuilderDatasetSelector from 'sentry/views/dashboards/widgetBuilder/components/datasetSelector';
 import WidgetBuilderFilterBar from 'sentry/views/dashboards/widgetBuilder/components/filtersBar';
 import WidgetBuilderGroupBySelector from 'sentry/views/dashboards/widgetBuilder/components/groupBySelector';
@@ -49,6 +48,7 @@ import useDashboardWidgetSource from 'sentry/views/dashboards/widgetBuilder/hook
 import {useDisableTransactionWidget} from 'sentry/views/dashboards/widgetBuilder/hooks/useDisableTransactionWidget';
 import useIsEditingWidget from 'sentry/views/dashboards/widgetBuilder/hooks/useIsEditingWidget';
 import {useSegmentSpanWidgetState} from 'sentry/views/dashboards/widgetBuilder/hooks/useSegmentSpanWidgetState';
+import {useWidgetBuilderTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderAnimationSettings';
 import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget';
 import {convertWidgetToBuilderStateParams} from 'sentry/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams';
 import {getTopNConvertedDefaultWidgets} from 'sentry/views/dashboards/widgetLibrary/data';
@@ -90,6 +90,7 @@ function WidgetBuilderSlideout({
   const [error, setError] = useState<Record<string, any>>({});
   const theme = useTheme();
   const isEditing = useIsEditingWidget();
+  const transitionSettings = useWidgetBuilderTransitionSettings();
   const source = useDashboardWidgetSource();
   const {cacheBuilderState} = useCacheBuilderState();
   const {setSegmentSpanBuilderState} = useSegmentSpanWidgetState();
@@ -208,7 +209,7 @@ function WidgetBuilderSlideout({
       collapsed={!isOpen}
       slidePosition="left"
       data-test-id="widget-slideout"
-      transitionProps={animationTransitionSettings}
+      transitionProps={transitionSettings}
     >
       <SlideoutHeaderWrapper>
         <Breadcrumbs crumbs={breadcrumbs} />

static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx

@@ -0,0 +1,12 @@
+import {useTheme} from '@emotion/react';
+import type {Transition} from 'framer-motion';
+
+export function useWidgetBuilderTransitionSettings(): Transition {
+  const theme = useTheme();
+
+  return {
+    type: 'tween',
+    ease: theme.motionControlPoints.snap,
+    duration: 0.5, // TODO: Introduce a slower value
+  };
+}