fix: Password input blur and table styling (#885)

* cursor typo legend and new legend stories * fix: text-input can't blur on type password (#864) (#870) * Remove Tablular Nums Table * Update password icon * fix: props order icons * fix: handle use effect * update error color to red * fix: BaseInput Focus * fix: add back explicit event props export * Update ScatterChart.stories.tsx --------- Co-authored-by: kareem <[email protected]>
tremorlabs · Jan 4, 2024 · 88c73d8 · 88c73d8
1 parent 59bd953
commit 88c73d8
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 61 deletions.
diff --git a/src/assets/EyeIcon.tsx b/src/assets/EyeIcon.tsx
@@ -1,20 +1,13 @@
 import React from "react";
 
 const EyeIcon = ({ ...props }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
     <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+      fillRule="evenodd"
+      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+      clipRule="evenodd"
     />
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
   </svg>
 );
 

diff --git a/src/assets/EyeOffIcon.tsx b/src/assets/EyeOffIcon.tsx
@@ -1,19 +1,13 @@
 import React from "react";
 
 const EyeOffIcon = ({ ...props }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
     <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+      fillRule="evenodd"
+      d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+      clipRule="evenodd"
     />
+    <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
   </svg>
 );
 

diff --git a/src/components/chart-elements/index.ts b/src/components/chart-elements/index.ts
@@ -1,6 +1,6 @@
 export * from "./AreaChart";
 export * from "./BarChart";
-export * from "./common";
+export { EventProps } from "./common/BaseChartProps";
 export * from "./DonutChart";
 export * from "./LineChart";
 export * from "./ScatterChart";
diff --git a/src/components/input-elements/BaseInput.tsx b/src/components/input-elements/BaseInput.tsx
@@ -35,7 +35,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
     autoFocus,
     ...other
   } = props;
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = useState(autoFocus || false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
   const toggleIsPasswordVisible = useCallback(
@@ -49,21 +49,27 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
 
   const hasSelection = hasValue(value || defaultValue);
 
-  const handleFocusChange = (isFocused: boolean) => {
-    if (isFocused === false) {
-      inputRef.current?.blur();
-    } else {
-      inputRef.current?.focus();
-    }
-    setIsFocused(isFocused);
-  };
-
   React.useEffect(() => {
-    // If the autoFocus prop is true, then set the isFocused state to true
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-      setIsFocused(true);
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
+
+    const node = inputRef.current;
+    if (node) {
+      node.addEventListener("focus", handleFocus);
+      node.addEventListener("blur", handleBlur);
+
+      // Autofocus logic
+      if (autoFocus) {
+        node.focus();
+      }
     }
+
+    return () => {
+      if (node) {
+        node.removeEventListener("focus", handleFocus);
+        node.removeEventListener("blur", handleBlur);
+      }
+    };
   }, [autoFocus]);
 
   return (
@@ -90,17 +96,6 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
           border.sm.all,
           className,
         )}
-        onClick={() => {
-          if (!disabled) {
-            handleFocusChange(true);
-          }
-        }}
-        onFocus={() => {
-          handleFocusChange(true);
-        }}
-        onBlur={() => {
-          handleFocusChange(false);
-        }}
       >
         {Icon ? (
           <Icon
@@ -153,6 +148,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
             className={tremorTwMerge(makeInputClassName("toggleButton"), "mr-2")}
             type="button"
             onClick={() => toggleIsPasswordVisible()}
+            aria-label={isPasswordVisible ? "Hide password" : "Show Password"}
           >
             {isPasswordVisible ? (
               <EyeOffIcon
@@ -164,6 +160,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
                   // dark
                   "dark:text-dark-tremor-content-subtle hover:dark:text-dark-tremor-content",
                 )}
+                aria-hidden
               />
             ) : (
               <EyeIcon
@@ -175,6 +172,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
                   // dark
                   "dark:text-dark-tremor-content-subtle hover:dark:text-dark-tremor-content",
                 )}
+                aria-hidden
               />
             )}
           </button>
@@ -183,7 +181,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
           <ExclamationFilledIcon
             className={tremorTwMerge(
               makeInputClassName("errorIcon"),
-              "text-rose-500 shrink-0",
+              "text-red-500 shrink-0",
               spacing.md.marginRight,
               sizing.lg.height,
               sizing.lg.width,
@@ -194,10 +192,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
       </div>
       {error && errorMessage ? (
         <p
-          className={tremorTwMerge(
-            makeInputClassName("errorMessage"),
-            "text-sm text-rose-500 mt-1",
-          )}
+          className={tremorTwMerge(makeInputClassName("errorMessage"), "text-sm text-red-500 mt-1")}
         >
           {errorMessage}
         </p>

diff --git a/src/components/input-elements/Switch/Switch.tsx b/src/components/input-elements/Switch/Switch.tsx
@@ -132,7 +132,7 @@ const Switch = React.forwardRef<HTMLDivElement, SwitchProps>((props, ref) => {
         <p
           className={tremorTwMerge(
             makeSwitchClassName("errorMessage"),
-            "text-sm text-rose-500 mt-1 ",
+            "text-sm text-red-500 mt-1 ",
           )}
         >
           {errorMessage}

diff --git a/src/components/input-elements/Textarea/Textarea.tsx b/src/components/input-elements/Textarea/Textarea.tsx
@@ -68,7 +68,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, re
         <p
           className={tremorTwMerge(
             makeTextareaClassName("errorMessage"),
-            "text-sm text-rose-500 mt-1",
+            "text-sm text-red-500 mt-1",
           )}
         >
           {errorMessage}

diff --git a/src/components/input-elements/selectUtils.ts b/src/components/input-elements/selectUtils.ts
@@ -44,8 +44,8 @@ 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-rose-500",
-    hasError ? "border-rose-500" : "border-tremor-border dark:border-dark-tremor-border",
+    hasError && "text-red-500",
+    hasError ? "border-red-500" : "border-tremor-border dark:border-dark-tremor-border",
   );
 };
 

diff --git a/src/components/list-elements/Table/Table.tsx b/src/components/list-elements/Table/Table.tsx
@@ -14,7 +14,7 @@ const Table = React.forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLT
           className={tremorTwMerge(
             makeTableClassName("table"),
             // common
-            "w-full tabular-nums text-tremor-default",
+            "w-full text-tremor-default",
             // light
             "text-tremor-content",
             // dark

diff --git a/src/components/list-elements/Table/TableCell.tsx b/src/components/list-elements/Table/TableCell.tsx
@@ -14,7 +14,7 @@ const TableCell = React.forwardRef<
         ref={ref}
         className={tremorTwMerge(
           makeTableCellClassName("root"),
-          "align-middle whitespace-nowrap tabular-nums text-left",
+          "align-middle whitespace-nowrap text-left",
           spacing.twoXl.paddingAll,
           className,
         )}

diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx
@@ -111,7 +111,7 @@ const ScrollButton = ({ icon, onClick, disabled }: ScrollButtonProps) => {
         makeLegendClassName("legendSliderButton"),
         // common
         "w-5 group inline-flex items-center truncate rounded-tremor-small transition",
-        disabled ? "cursor-not-allowed" : "ursor-pointer",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
         // light
         disabled
           ? "text-tremor-content-subtle"

diff --git a/src/stories/chart-elements/ScatterChart.stories.tsx b/src/stories/chart-elements/ScatterChart.stories.tsx
@@ -80,6 +80,14 @@ export const NoDataText: Story = {
   },
 };
 
+export const Animation: Story = {
+  args: { showAnimation: true },
+};
+
+export const LongAnimationDuration: Story = {
+  args: { showAnimation: true, animationDuration: 5000 },
+};
+
 export const OnValueChange: Story = {
   args: {
     onValueChange: (value) => alert(JSON.stringify(value)),

diff --git a/src/stories/input-elements/TextInput.stories.tsx b/src/stories/input-elements/TextInput.stories.tsx
@@ -87,6 +87,12 @@ export const WithTypePassword: Story = {
   },
 };
 
+export const WithAutoFocus: Story = {
+  args: {
+    autoFocus: true,
+  },
+};
+
 export const WithTypeEmail: Story = {
   render: SimpleTextInput,
   args: {

diff --git a/src/stories/text-elements/Legend.stories.tsx b/src/stories/text-elements/Legend.stories.tsx
@@ -84,3 +84,20 @@ export const ManyCategoriesWithoutScroll: Story = {
     enableLegendSlider: false,
   },
 };
+
+export const CustomColors: Story = {
+  ...LegendTemplate,
+  args: {
+    colors: ["red", "rose", "green", "blue"],
+  },
+};
+
+export const CustomColorsConClick: Story = {
+  ...LegendTemplate,
+  args: {
+    colors: ["red", "rose", "green", "#32a852"],
+    onClickLegendItem: (e) => {
+      console.log(e);
+    },
+  },
+};