Merge branch 'main' into refactoring

adaptui · Jun 21, 2022 · 2910b70 · 2910b70
2 parents 1af8f32 + 1a341a1
commit 2910b70
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 102 deletions.
diff --git a/src/textarea/TextareaProps.tsx b/src/textarea/TextareaProps.tsx
@@ -104,15 +104,11 @@ export const useTextareaProps = ({
     [componentProps.spinnerProps, disabled, uiProps],
   );
 
-  const iconProps: TextareaIconProps = React.useMemo(
-    () => ({
-      ...uiProps,
-      disabled,
-      ...componentProps.iconProps,
-      children: withIconA11y(runIfFn(uiProps.icon, uiProps)),
-    }),
-    [componentProps.iconProps, disabled, uiProps],
-  );
+  const iconProps: TextareaIconProps = {
+    ...uiProps,
+    ...componentProps.iconProps,
+    children: withIconA11y(runIfFn(uiProps.icon, uiProps)),
+  };
 
   const ghostProps: TextareaGhostProps = React.useMemo(
     () => ({

diff --git a/src/theme/defaultTheme/textarea.ts b/src/theme/defaultTheme/textarea.ts
@@ -1,99 +1,30 @@
 export const textarea = {
   wrapper: "relative inline-flex h-fit",
   base: {
-    default:
-      "w-full transition-all appearance-none outline-none disabled:cursor-not-allowed",
-    resize: {
-      horizontal: "resize-x",
-      vertical: "resize-y",
-      both: "resize",
-      none: "resize-none",
-    },
-  },
-  spinner: {
-    base: "flex items-center justify-center absolute bottom-2.5 right-1 bg-transparent pointer-events-none",
-    autoSize: "bottom-1",
-  },
-  icon: {
-    base: "flex items-center justify-center absolute bottom-2.5 right-1 bg-transparent pointer-events-none",
-    autoSize: "bottom-1",
-  },
-  ghost: "invisible absolute overflow-hidden h-0 top-0 left-0 transform-gpu",
-  size: {
-    sm: {
-      base: "text-paragraph-cxs-cxs font-normal rounded-lg px-2 py-[5.5px]",
-      icon: "text-xs",
-    },
-    md: {
-      base: "text-paragraph-sm font-normal rounded-lg px-2.5 py-[7px]",
-      icon: "text-xs",
-    },
-    lg: {
-      base: "text-paragraph-sm font-normal rounded-lg px-3 py-2.5",
-      icon: "text-xs",
-    },
-    xl: {
-      base: "text-paragraph-base font-normal rounded-lg px-3 py-[13px]",
-      icon: "text-base",
-    },
-  },
-  variant: {
-    outline: {
-      default: {
-        base: "text-gray-800 placeholder:text-gray-600 bg-white-900 border border-gray-400",
-        icon: "text-gray-600",
-      },
-      hover: {
-        base: "hover:placeholder:text-gray-700 hover:border-gray-500 hover:shadow-sm",
-        icon: "peer-hover:text-gray-700",
-      },
-      active: {
-        base: "active:placeholder:text-gray-800 active:border-gray-500",
-        icon: "peer-active:text-gray-800",
-      },
-      focus: {
-        base: "focus:placeholder:text-gray-800 focus-visible:border-transparent focus-visible:ring-3 focus-visible:ring-gray-500",
-        icon: "peer-focus-visible:text-gray-800",
-      },
-      disabled: {
-        base: "placeholder:text-gray-500 bg-gray-100 border-gray-400",
-        icon: "text-gray-500",
-      },
-      invalid: {
-        base: "border-red-400",
-        icon: "text-red-800",
-      },
-    },
-    subtle: {
-      default: {
-        base: "text-gray-800 placeholder:text-gray-600 bg-gray-100 border border-transparent",
-        icon: "text-gray-600",
-      },
-      hover: {
-        base: "hover:placeholder:text-gray-700 hover:bg-gray-200",
-        icon: "peer-hover:text-gray-700 ",
-      },
-      active: {
-        base: "active:placeholder:text-gray-800 active:bg-white-900",
-        icon: "peer-active:text-gray-800",
-      },
-      focus: {
-        base: "focus:placeholder:text-gray-800 focus-visible:bg-white-900 focus-visible:ring-3 focus-visible:ring-gray-500",
-        icon: "peer-focus-visible:text-gray-800",
-      },
-      disabled: {
-        base: "text-gray-500 placeholder:text-gray-500 bg-gray-100",
-        icon: "text-gray-500",
-      },
-      invalid: {
-        base: "bg-red-100",
-        icon: "text-red-800",
-      },
-    },
-    underline: {
-      default: {
-        base: "text-gray-800 placeholder:text-gray-600 border border-x-transparent border-t-transparent border-b-gray-400 rounded-none px-0.5",
-        icon: "text-gray-600",
+    common:
+      "font-normal w-full transition-all appearance-none outline-none disabled:cursor-not-allowed",
+    size: {
+      sm: "text-cxs rounded-lg px-2 py-[5.5px]",
+      md: "text-sm rounded-lg px-2.5 py-[7px]",
+      lg: "text-sm rounded-lg px-3 py-2.5",
+      xl: "text-base rounded-lg px-3 py-[13px]",
+    },
+    variant: {
+      outline: {
+        common:
+          "bg-white border border-gray-200 placeholder:text-gray-500 text-gray-700 ",
+        interactions:
+          "hover:border-gray-300 hover:shadow-sm active:border-gray-400 active:shadow-sm focus-visible:border-gray-400 focus-visible:ring-2 focus-visible:ring-gray-200",
+        disabled: "bg-gray-50 shadow-none text-gray-500 ",
+        invalid: "border-red-300",
+      },
+      underline: {
+        common:
+          "px-0.5 bg-white rounded-none placeholder:text-gray-500 text-gray-700 shadow-input-underline shadow-gray-200",
+        interactions:
+          "hover:shadow-gray-300 active:shadow-gray-400 focus-visible:shadow-gray-400 ",
+        disabled: "placeholder:text-gray-400 text-gray-400 shadow-gray-200",
+        invalid: "shadow-red-300",
       },
       hover: {
         base: "hover:placeholder:text-gray-700 hover:border-b-gray-500",