fix: minor updates inside textfield api

skynexui · Dec 24, 2021 · e479611 · e479611 · vercel · Dec 24, 2021
1 parent 7820d28
commit e479611
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git a/lib/components/textfield/textfield.tsx b/lib/components/textfield/textfield.tsx
@@ -6,15 +6,36 @@ import { BoxBase } from '@lib/components/box/box-base';
 import { theme } from '@lib/core/theme/theme';
 
 const textFieldSizes = {
-  xs: '12px',
-  sm: '14px',
-  md: '14px',
-  lg: '16px',
-  xl: '18px',
+  xs: {
+    fontSize: '12px',
+    paddingVertical: '8px',
+    paddingHorizontal: '12px',
+  },
+  sm: {
+    fontSize: '14px',
+    paddingVertical: '8px',
+    paddingHorizontal: '12px',
+  },
+  md: {
+    fontSize: '14px',
+    paddingVertical: '12px',
+    paddingHorizontal: '16px',
+  },
+  lg: {
+    fontSize: '16px',
+    paddingVertical: '8px',
+    paddingHorizontal: '12px',
+  },
+  xl: {
+    fontSize: '18px',
+    paddingVertical: '8px',
+    paddingHorizontal: '12px',
+  },
 };
 
 interface TextFieldColorSet {
   mainColor?: string;
+  mainColorHighlight?: string;
   textColor?: string;
   backgroundColor?: string;
 }
@@ -32,13 +53,17 @@ interface TextFieldStyleProps {
   borderRadius?: string;
   mainColor?: unknown;
   fontSize?: unknown;
+  paddingVertical?: unknown;
+  paddingHorizontal?: unknown;
   textColor?: unknown;
 }
 const textFieldStyles = {
   basicBordered: ({
     status,
     borderRadius,
     fontSize,
+    paddingHorizontal,
+    paddingVertical,
     textFieldColors,
   }: TextFieldStyleProps) => {
     return {
@@ -59,8 +84,14 @@ const textFieldStyles = {
         borderColor: textFieldColors[status].mainColor,
         fontSize,
         borderRadius,
-        paddingHorizontal: '12px',
-        paddingVertical: '8px',
+        paddingVertical,
+        paddingHorizontal,
+        hover: {
+          borderColor: textFieldColors[status].mainColorHighlight,
+        },
+        focus: {
+          borderColor: textFieldColors[status].mainColorHighlight,
+        },
       },
       validationMessage: {
         fontSize,
@@ -90,6 +121,12 @@ const textFieldStyles = {
         borderBottomColor: textFieldColors[status].mainColor,
         fontSize,
         paddingVertical: '8px',
+        hover: {
+          borderColor: textFieldColors[status].mainColorHighlight,
+        },
+        focus: {
+          borderColor: textFieldColors[status].mainColorHighlight,
+        },
       },
       validationMessage: {
         fontSize,
@@ -172,7 +209,9 @@ export function TextField({
   const hasOnChange = Boolean(props.onChange);
   const styles = textFieldStyles[variant]({
     status,
-    fontSize: textFieldSize,
+    fontSize: textFieldSize.fontSize,
+    paddingVertical: textFieldSize.paddingVertical,
+    paddingHorizontal: textFieldSize.paddingHorizontal,
     borderRadius,
     textFieldColors,
   });
@@ -216,6 +255,7 @@ export function TextField({
           placeholder={fieldPlaceholder}
           styleSheet={{
             ...styles.textField,
+            borderStyle: 'solid',
             resize: 'none',
             width: '100%',
             display: 'block',
@@ -278,16 +318,19 @@ TextField.defaultProps = {
     neutral: {
       backgroundColor: theme.colors.neutral['000'],
       mainColor: theme.colors.neutral['300'],
+      mainColorHighlight: theme.colors.primary['500'],
       textColor: theme.colors.neutral['900'],
     },
     positive: {
       backgroundColor: theme.colors.neutral['000'],
       mainColor: theme.colors.positive['300'],
+      mainColorHighlight: theme.colors.positive['500'],
       textColor: theme.colors.positive['900'],
     },
     negative: {
       backgroundColor: theme.colors.neutral['000'],
       mainColor: theme.colors.negative['300'],
+      mainColorHighlight: theme.colors.negative['500'],
       textColor: theme.colors.negative['900'],
     },
   },

diff --git a/lib/core/stylesheet/stylesheet.ts b/lib/core/stylesheet/stylesheet.ts
@@ -4,6 +4,7 @@ type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
 
 export interface StyleSheet {
   srOnly?: boolean;
+  borderStyle?: string;
   overflow?: ResponsiveProperty<string> | string;
   position?: ResponsiveProperty<string> | string;
   resize?: ResponsiveProperty<string> | string;