tremorlabs · severinlandolt · Jun 23, 2024 · Jun 21, 2024 · Jun 21, 2024 · Jun 21, 2024
diff --git a/src/components/input-elements/BaseInput.tsx b/src/components/input-elements/BaseInput.tsx
@@ -5,7 +5,7 @@ import { getSelectButtonColors, hasValue } from "components/input-elements/selec
 import { mergeRefs, tremorTwMerge } from "lib";
 
 export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  type?: "text" | "password" | "email" | "url" | "number";
+  type?: "text" | "password" | "email" | "url" | "number" | "search";
   defaultValue?: string | number;
   value?: string | number;
   icon?: React.ElementType | React.JSXElementConstructor<any>;

diff --git a/src/components/input-elements/Tabs/Tab.tsx b/src/components/input-elements/Tabs/Tab.tsx
@@ -22,7 +22,10 @@ function getVariantStyles(tabVariant: TabVariant, color?: Color) {
         // brand
         color
           ? getColorClassNames(color, colorPalette.border).selectBorderColor
-          : "ui-selected:border-tremor-brand dark:ui-selected:border-dark-tremor-brand",
+          : [
+              "ui-selected:border-tremor-brand ui-selected:text-tremor-brand",
+              "ui-selected:dark:border-dark-tremor-brand ui-selected:dark:text-dark-tremor-brand",
+            ],
       );
     case "solid":
       return tremorTwMerge(
@@ -57,12 +60,9 @@ const Tab = React.forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
         makeTabClassName("root"),
         // common
         "flex whitespace-nowrap truncate max-w-xs outline-none ui-focus-visible:ring text-tremor-default transition duration-100",
-        // brand
-        color && getColorClassNames(color, colorPalette.text).selectTextColor,
-        // solid ? "ui-selected:text-tremor-content-emphasis dark:ui-selected:text-dark-tremor-content-emphasis"
-        // : "ui-selected:text-tremor-brand dark:ui-selected:text-dark-tremor-brand",
         getVariantStyles(variant, color),
         className,
+        color && getColorClassNames(color, colorPalette.text).selectTextColor,
       )}
       {...other}
     >

diff --git a/src/components/input-elements/Tabs/TabList.tsx b/src/components/input-elements/Tabs/TabList.tsx
@@ -38,7 +38,7 @@ export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const TabList = React.forwardRef<HTMLDivElement, TabListProps>((props, ref) => {
-  const { color = "blue", variant = "line", children, className, ...other } = props;
+  const { color, variant = "line", children, className, ...other } = props;
 
   return (
     <Tab.List

diff --git a/src/components/input-elements/TextInput/TextInput.tsx b/src/components/input-elements/TextInput/TextInput.tsx
@@ -4,7 +4,6 @@ import { makeClassName } from "lib";
 import BaseInput, { BaseInputProps } from "../BaseInput";
 
 export type TextInputProps = Omit<BaseInputProps, "stepper" | "makeInputClassName"> & {
-  type?: "text" | "password" | "email" | "url";
   defaultValue?: string;
   value?: string;
   onValueChange?: (value: string) => void;

diff --git a/src/components/input-elements/selectUtils.ts b/src/components/input-elements/selectUtils.ts
@@ -44,8 +44,11 @@ export const getSelectButtonColors = (
       ? "text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis"
       : "text-tremor-content dark:text-dark-tremor-content",
     isDisabled && "text-tremor-content-subtle dark:text-dark-tremor-content-subtle",
-    hasError && "text-red-500 placeholder:text-red-500",
-    hasError ? "border-red-500" : "border-tremor-border dark:border-dark-tremor-border",
+    hasError &&
+      "text-red-500 placeholder:text-red-500 dark:text-red-500 dark:placeholder:text-red-500",
+    hasError
+      ? "border-red-500 dark:border-red-500"
+      : "border-tremor-border dark:border-dark-tremor-border",
   );
 };
 

diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx
@@ -153,6 +153,8 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
     ...other
   } = props;
   const scrollableRef = React.useRef<HTMLInputElement>(null);
+  const scrollButtonsRef = React.useRef<HTMLDivElement>(null);
+
   const [hasScroll, setHasScroll] = React.useState<HasScrollProps | null>(null);
   const [isKeyDowned, setIsKeyDowned] = React.useState<string | null>(null);
   const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
@@ -170,11 +172,16 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
   const scrollToTest = useCallback(
     (direction: "left" | "right") => {
       const element = scrollableRef?.current;
+      const scrollButtons = scrollButtonsRef?.current;
       const width = element?.clientWidth ?? 0;
+      const scrollButtonsWith = scrollButtons?.clientWidth ?? 0;
 
       if (element && enableLegendSlider) {
         element.scrollTo({
-          left: direction === "left" ? element.scrollLeft - width : element.scrollLeft + width,
+          left:
+            direction === "left"
+              ? element.scrollLeft - width + scrollButtonsWith
+              : element.scrollLeft + width - scrollButtonsWith,
           behavior: "smooth",
         });
         setTimeout(() => {
@@ -273,6 +280,7 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
               // common
               "absolute flex top-0 pr-1 bottom-0 right-0 items-center justify-center h-full",
             )}
+            ref={scrollButtonsRef}
           >
             <ScrollButton
               icon={ChevronLeftFill}

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/input-elements/Tabs.stories.tsx b/src/stories/input-elements/Tabs.stories.tsx
@@ -27,7 +27,7 @@ interface MyTabProps {
 
 //Components
 function MyTab(props: MyTabProps) {
-  const { variant = "line", defaultIndex = 0, showText = true, color = "blue", args } = props;
+  const { variant = "line", defaultIndex = 0, showText = true, color, args } = props;
 
   const tabLabels = ["This is a very Long Tab Value that is used as an edge case", "Three", "One"];
 

diff --git a/src/stories/input-elements/TextInput.stories.tsx b/src/stories/input-elements/TextInput.stories.tsx
@@ -114,3 +114,10 @@ export const WithTypeUrl: Story = {
     type: "url",
   },
 };
+
+export const WithTypeSearch: Story = {
+  render: SimpleTextInput,
+  args: {
+    type: "search",
+  },
+};
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%",