From 0e7b306bdfd4749dae8591aaf14d5e1ac446c58d Mon Sep 17 00:00:00 2001 From: severinlandolt Date: Sat, 22 Jun 2024 00:21:42 +0200 Subject: [PATCH 1/5] fix: tab color brand --- src/components/input-elements/Tabs/Tab.tsx | 10 +++++----- src/components/input-elements/Tabs/TabList.tsx | 2 +- src/stories/input-elements/Tabs.stories.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/input-elements/Tabs/Tab.tsx b/src/components/input-elements/Tabs/Tab.tsx index 866d0ef59..30b1f3d2e 100644 --- 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((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 index ed88574db..2e2987db6 100644 --- 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 { } const TabList = React.forwardRef((props, ref) => { - const { color = "blue", variant = "line", children, className, ...other } = props; + const { color, variant = "line", children, className, ...other } = props; return ( Date: Sat, 22 Jun 2024 00:44:18 +0200 Subject: [PATCH 2/5] fix: colors seelct error --- src/components/input-elements/selectUtils.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/input-elements/selectUtils.ts b/src/components/input-elements/selectUtils.ts index 5d016b027..6f7bfeb7a 100644 --- 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", ); }; From d07a3198fb57fb9a6fd0911536381a1e1532b83b Mon Sep 17 00:00:00 2001 From: severinlandolt Date: Sat, 22 Jun 2024 00:55:27 +0200 Subject: [PATCH 3/5] fix: add input type search --- src/components/input-elements/BaseInput.tsx | 2 +- src/components/input-elements/TextInput/TextInput.tsx | 1 - src/stories/input-elements/TextInput.stories.tsx | 7 +++++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/input-elements/BaseInput.tsx b/src/components/input-elements/BaseInput.tsx index 3836038be..e0a754b41 100644 --- 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 { - type?: "text" | "password" | "email" | "url" | "number"; + type?: "text" | "password" | "email" | "url" | "number" | "search"; defaultValue?: string | number; value?: string | number; icon?: React.ElementType | React.JSXElementConstructor; diff --git a/src/components/input-elements/TextInput/TextInput.tsx b/src/components/input-elements/TextInput/TextInput.tsx index ce316591f..7c95858ef 100644 --- 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 & { - type?: "text" | "password" | "email" | "url"; defaultValue?: string; value?: string; onValueChange?: (value: string) => void; diff --git a/src/stories/input-elements/TextInput.stories.tsx b/src/stories/input-elements/TextInput.stories.tsx index d5eb511a5..57bc7c1eb 100644 --- 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", + }, +}; From 5b691665da79c2dd5c59d0983fb17fa69d0e0e24 Mon Sep 17 00:00:00 2001 From: severinlandolt Date: Sat, 22 Jun 2024 01:23:39 +0200 Subject: [PATCH 4/5] fix animations --- src/components/vis-elements/DeltaBar/DeltaBar.tsx | 2 +- src/components/vis-elements/MarkerBar/MarkerBar.tsx | 2 +- src/components/vis-elements/ProgressBar/ProgressBar.tsx | 9 +-------- src/stories/vis-elements/ProgressBar.stories.tsx | 1 + 4 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/vis-elements/DeltaBar/DeltaBar.tsx b/src/components/vis-elements/DeltaBar/DeltaBar.tsx index 54743067c..f173c1637 100644 --- a/src/components/vis-elements/DeltaBar/DeltaBar.tsx +++ b/src/components/vis-elements/DeltaBar/DeltaBar.tsx @@ -61,7 +61,7 @@ const DeltaBar = React.forwardRef((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 index 2ab02c40d..f8e02f6a0 100644 --- a/src/components/vis-elements/MarkerBar/MarkerBar.tsx +++ b/src/components/vis-elements/MarkerBar/MarkerBar.tsx @@ -68,7 +68,7 @@ const MarkerBar = React.forwardRef((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 index a4875bfda..c6c610155 100644 --- 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,15 +44,14 @@ const ProgressBar = React.forwardRef((props, r
@@ -62,18 +59,14 @@ const ProgressBar = React.forwardRef((props, r

diff --git a/src/stories/vis-elements/ProgressBar.stories.tsx b/src/stories/vis-elements/ProgressBar.stories.tsx index 3693a8c34..666fb9a33 100644 --- a/src/stories/vis-elements/ProgressBar.stories.tsx +++ b/src/stories/vis-elements/ProgressBar.stories.tsx @@ -21,6 +21,7 @@ type Story = StoryObj; export const Default: Story = { args: { + showAnimation: true, value: 50, tooltip: "50%", label: "90%", From 0328ca0e7f33f96f4465c7bf8e9d068a129b69e8 Mon Sep 17 00:00:00 2001 From: mbauchet <90607026+mbauchet@users.noreply.github.com> Date: Sat, 22 Jun 2024 11:39:00 +0200 Subject: [PATCH 5/5] fix: legend scroll (#1093) * fix legend scroll --------- Co-authored-by: Maxime BAUCHET --- src/components/text-elements/Legend/Legend.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx index 93f097fc6..6ace484df 100644 --- a/src/components/text-elements/Legend/Legend.tsx +++ b/src/components/text-elements/Legend/Legend.tsx @@ -153,6 +153,8 @@ const Legend = React.forwardRef((props, ref) => { ...other } = props; const scrollableRef = React.useRef(null); + const scrollButtonsRef = React.useRef(null); + const [hasScroll, setHasScroll] = React.useState(null); const [isKeyDowned, setIsKeyDowned] = React.useState(null); const intervalRef = React.useRef(null); @@ -170,11 +172,16 @@ const Legend = React.forwardRef((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((props, ref) => { // common "absolute flex top-0 pr-1 bottom-0 right-0 items-center justify-center h-full", )} + ref={scrollButtonsRef} >