update text transition

tremorlabs · Oct 25, 2023 · 02927ba · 02927ba
1 parent 9c5bedf
commit 02927ba
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/src/components/input-elements/BaseInput.tsx b/src/components/input-elements/BaseInput.tsx
@@ -63,7 +63,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
         className={tremorTwMerge(
           makeInputClassName("root"),
           // common
-          "relative w-full flex items-center min-w-[10rem] outline-none rounded-tremor-default",
+          "relative w-full flex items-center min-w-[10rem] outline-none rounded-tremor-default transition duration-100",
           // light
           "shadow-tremor-input",
           // dark
@@ -72,7 +72,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
           isFocused &&
             tremorTwMerge(
               // common
-              "ring-2 transition duration-100",
+              "ring-2",
               // light
               "border-tremor-brand-subtle ring-tremor-brand-muted",
               // light
@@ -117,7 +117,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
           className={tremorTwMerge(
             makeInputClassName("input"),
             // common
-            "w-full focus:outline-none focus:ring-0 border-none bg-transparent text-tremor-default rounded-tremor-default",
+            "w-full focus:outline-none focus:ring-0 border-none bg-transparent text-tremor-default rounded-tremor-default transition duration-100",
             // light
             "text-tremor-content-emphasis",
             // dark

diff --git a/src/stories/general/Transition.stories.tsx b/src/stories/general/Transition.stories.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  DatePicker,
+  DateRangePicker,
+  MultiSelect,
+  MultiSelectItem,
+  NumberInput,
+  SearchSelect,
+  SearchSelectItem,
+  Select,
+  SelectItem,
+  TextInput,
+} from "components";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "General",
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+// Stories
+export const Transition: Story = {
+  render: () => {
+    return (
+      <div className="space-y-4 max-w-sm">
+        <DatePicker />
+        <DateRangePicker />
+        <Select>
+          <SelectItem value="1">Item 1</SelectItem>
+          <SelectItem value="2">Item 2</SelectItem>
+        </Select>
+        <SearchSelect>
+          <SearchSelectItem value="1">Item 1</SearchSelectItem>
+          <SearchSelectItem value="2">Item 2</SearchSelectItem>
+        </SearchSelect>
+        <MultiSelect>
+          <MultiSelectItem value="1">Item 1</MultiSelectItem>
+          <MultiSelectItem value="2">Item 2</MultiSelectItem>
+        </MultiSelect>
+        <NumberInput />
+        <TextInput />
+      </div>
+    );
+  },
+};