fix: ts

razorpay · Sep 10, 2024 · 0b5d024 · 0b5d024
1 parent 5c7740a
commit 0b5d024
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 19 deletions.
diff --git a/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx b/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx
@@ -34,7 +34,7 @@ const StyledButton = styled.button<StyledButtonProps>((props) => {
       : theme.colors.interactive.icon[emphasisColor].muted,
     transitionProperty: 'color, box-shadow',
     transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),
-    transitionTimingFunction: motionToken.easing.standard.effective as string,
+    transitionTimingFunction: motionToken.easing.standard as string,
 
     '&:hover': {
       color: theme.colors.interactive.icon[emphasisColor].subtle,

diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx
@@ -122,11 +122,10 @@ const _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<
       ),
     ),
     easing: castNativeType(
-      getIn(
-        theme.motion.easing,
+      theme.motion.easing[
         baseInputBorderBackgroundMotion[rest.currentInteraction === 'focus' ? 'enter' : 'exit']
-          .easing,
-      ),
+          .easing
+      ],
     ),
   };
 

diff --git a/packages/blade/src/components/Input/BaseInput/BaseInput.tsx b/packages/blade/src/components/Input/BaseInput/BaseInput.tsx
@@ -749,11 +749,10 @@ const FocusRingWrapper = styled(BaseBox)<{
           ),
         ),
         transitionTimingFunction: castWebType(
-          getIn(
-            theme.motion.easing,
+          theme.motion.easing[
             baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit']
-              .easing,
-          ),
+              .easing
+          ],
         ),
       }
     : {},

diff --git a/packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx b/packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx
@@ -138,7 +138,7 @@ const CircularProgressBarFilled = ({
           strokeDashoffset={dashOffset}
           pulseMotionDuration="duration.2xgentle"
           pulseMotionDelay="delay.long"
-          motionEasing="easing.standard.revealing"
+          motionEasing="easing.emphasized"
         />
         {showPercentage && size !== 'small' && (
           <StyledSVGText

diff --git a/packages/blade/src/components/SideNav/SideNav.web.tsx b/packages/blade/src/components/SideNav/SideNav.web.tsx
@@ -41,8 +41,8 @@ const StyledL1Menu = styled(BaseBox)((props) => {
   const gentle = makeMotionTime(props.theme.motion.duration.gentle);
   const easing = props.theme.motion.easing;
 
-  const l1Expand = `width ${gentle} ${easing.entrance.revealing}`;
-  const l1Collapse = `width ${moderate} ${easing.exit.revealing}`;
+  const l1Expand = `width ${gentle} ${easing.entrance}`;
+  const l1Collapse = `width ${moderate} ${easing.exit}`;
 
   return {
     width: '100%',

diff --git a/packages/blade/src/components/Spinner/BaseSpinner/spinnerTokens.ts b/packages/blade/src/components/Spinner/BaseSpinner/spinnerTokens.ts
@@ -11,7 +11,7 @@ const motion: {
   easing: EasingString;
 } = {
   duration: 'duration.2xgentle',
-  easing: 'easing.overshoot', // TODO: confirm
+  easing: 'easing.overshoot',
 };
 
 export { dimensions, motion };
diff --git a/packages/blade/src/components/Switch/AnimatedThumbIcon.web.tsx b/packages/blade/src/components/Switch/AnimatedThumbIcon.web.tsx
@@ -11,7 +11,7 @@ const AnimatedThumbIcon = styled(Svg)<{ isChecked?: boolean }>(({ isChecked, the
   return {
     transitionDuration: `${makeMotionTime(duration)}`,
     transitionTimingFunction: easing,
-    transitionDelay: isChecked ? `${makeMotionTime(theme.motion.delay['2xshort'])}` : `0ms`,
+    transitionDelay: isChecked ? `${makeMotionTime(theme.motion.delay['xquick'])}` : `0ms`,
     opacity: isChecked ? 1 : 0,
   };
 });

diff --git a/packages/blade/src/components/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts
@@ -88,14 +88,14 @@ const tableRow = {
   },
   borderBottomWidth: 'thin',
   borderColor: 'surface.border.gray.muted',
-  backgroundColorMotionEasing: 'easing.standard.effective',
+  backgroundColorMotionEasing: 'easing.standard',
   backgroundColorMotionDuration: 'duration.xquick',
 } as const;
 
 const tableToolbar = {
   backgroundColor: 'transparent',
   backgroundColorSelected: 'interactive.background.primary.faded',
-  backgroundColorMotionEasing: 'easing.standard.effective',
+  backgroundColorMotionEasing: 'easing.standard',
   backgroundColorMotionDuration: 'duration.xquick',
 } as const;
 

diff --git a/packages/blade/src/utils/makeMotionTime/makeMotionTime.web.test.ts b/packages/blade/src/utils/makeMotionTime/makeMotionTime.web.test.ts
@@ -4,11 +4,11 @@ import { motion } from '~tokens/global';
 describe('makeMotionTime', () => {
   it('should return the duration value in `ms`', () => {
     const duration = makeMotionTime(motion.duration.moderate);
-    expect(duration).toEqual('250ms');
+    expect(duration).toEqual('280ms');
   });
 
   it('should return the delay value in `ms`', () => {
-    const delay = makeMotionTime(motion.delay.short);
-    expect(delay).toEqual('180ms');
+    const delay = makeMotionTime(motion.delay.xquick);
+    expect(delay).toEqual('160ms');
   });
 });