fix animations

tremorlabs · Jun 21, 2024 · 5b69166 · 5b69166
1 parent d07a319
commit 5b69166
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 10 deletions.
diff --git a/src/components/vis-elements/DeltaBar/DeltaBar.tsx b/src/components/vis-elements/DeltaBar/DeltaBar.tsx
@@ -61,7 +61,7 @@ const DeltaBar = React.forwardRef<HTMLDivElement, DeltaBarProps>((props, ref) =>
               )}
               style={{
                 width: `${Math.abs(value)}%`,
-                transition: showAnimation ? "all 1s" : "",
+                transition: showAnimation ? "all duration-300" : "",
               }}
               {...getReferenceProps}
             />

diff --git a/src/components/vis-elements/MarkerBar/MarkerBar.tsx b/src/components/vis-elements/MarkerBar/MarkerBar.tsx
@@ -68,7 +68,7 @@ const MarkerBar = React.forwardRef<HTMLDivElement, MarkerBarProps>((props, ref)
             style={{
               left: `${minValue}%`,
               width: `${maxValue - minValue}%`,
-              transition: showAnimation ? "all 1s" : "",
+              transition: showAnimation ? "all duration-300" : "",
             }}
             {...getRangeReferenceProps}
           />

diff --git a/src/components/vis-elements/ProgressBar/ProgressBar.tsx b/src/components/vis-elements/ProgressBar/ProgressBar.tsx
@@ -1,6 +1,4 @@
-"use client";
 import React from "react";
-
 import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
 import { getColorClassNames, makeClassName, tremorTwMerge } from "lib";
 import { colorPalette } from "lib/theme";
@@ -46,34 +44,29 @@ const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>((props, r
           <div
             className={tremorTwMerge(
               makeProgressBarClassName("progressBar"),
-              // common
               "flex-col h-full rounded-tremor-full",
               color
                 ? getColorClassNames(color, colorPalette.background).bgColor
                 : "bg-tremor-brand dark:bg-dark-tremor-brand",
+              showAnimation ? "transition-all duration-300 ease-in-out" : "",
             )}
             style={{
               width: `${value}%`,
-              transition: showAnimation ? "all 1s" : "",
             }}
           />
         </div>
         {label ? (
           <div
             className={tremorTwMerge(
               makeProgressBarClassName("labelWrapper"),
-              // common
               "w-16 truncate text-right ml-2",
-              // light
               "text-tremor-content-emphasis",
-              // dark
               "dark:text-dark-tremor-content-emphasis",
             )}
           >
             <p
               className={tremorTwMerge(
                 makeProgressBarClassName("label"),
-                // common
                 "shrink-0 whitespace-nowrap truncate text-tremor-default",
               )}
             >

diff --git a/src/stories/vis-elements/ProgressBar.stories.tsx b/src/stories/vis-elements/ProgressBar.stories.tsx
@@ -21,6 +21,7 @@ type Story = StoryObj<typeof ProgressBar>;
 
 export const Default: Story = {
   args: {
+    showAnimation: true,
     value: 50,
     tooltip: "50%",
     label: "90%",