fix: [#436] update PR and add test

themesberg · Dec 12, 2022 · 913c799 · 913c799
1 parent 30d3e96
commit 913c799
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 47 deletions.
diff --git a/src/lib/components/TextInput/TextInput.spec.tsx b/src/lib/components/TextInput/TextInput.spec.tsx
@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import { HiEye } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
 import { TextInput } from './TextInput';
 
@@ -9,5 +10,10 @@ describe.concurrent('Components / Text input', () => {
 
       expect(textInput).toBeInTheDocument();
     });
+    it('should have Icon if selected ', () => {
+      const page = render(<TextInput rightIcon={HiEye} />).getByTestId('right-icon');
+
+      expect(page).toBeInTheDocument();
+    });
   });
 });
diff --git a/src/lib/components/TextInput/TextInput.tsx b/src/lib/components/TextInput/TextInput.tsx
@@ -14,11 +14,16 @@ export interface FlowbiteTextInputTheme {
       base: string;
       svg: string;
     };
+    rightIcon: {
+      base: string;
+      svg: string;
+    };
     input: {
       base: string;
       sizes: TextInputSizes;
       colors: TextInputColors;
       withIcon: FlowbiteBoolean;
+      withRightIcon: FlowbiteBoolean;
       withAddon: FlowbiteBoolean;
       withShadow: FlowbiteBoolean;
     };
@@ -48,7 +53,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     { sizing = 'md', shadow, helperText, addon, icon: Icon, rightIcon: RightIcon, color = 'gray', className, ...props },
     ref,
   ) => {
-    const theme = useTheme().theme.formControls.textInput;
+    const theme = useTheme().theme.textInput;
     return (
       <>
         <div className={classNames(theme.base, className)}>
@@ -60,7 +65,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
               </div>
             )}
             {RightIcon && (
-              <div className={theme.field.rightIcon.base}>
+              <div data-testid="right-icon" className={theme.field.rightIcon.base}>
                 <RightIcon className={theme.field.rightIcon.svg} />
               </div>
             )}

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -445,53 +445,53 @@ const theme: FlowbiteTheme = {
         },
       },
     },
-    textInput: {
-      base: 'flex',
-      addon:
-        'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400',
-      field: {
-        base: 'relative w-full',
-        icon: {
-          base: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
-          svg: 'h-5 w-5 text-gray-500 dark:text-gray-400',
+  },
+  textInput: {
+    base: 'flex',
+    addon:
+      'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400',
+    field: {
+      base: 'relative w-full',
+      icon: {
+        base: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
+        svg: 'h-5 w-5 text-gray-500 dark:text-gray-400',
+      },
+      rightIcon: {
+        base: 'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3',
+        svg: 'h-5 w-5 text-gray-500 dark:text-gray-400',
+      },
+      input: {
+        base: 'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
+        sizes: {
+          sm: 'p-2 sm:text-xs',
+          md: 'p-2.5 text-sm',
+          lg: 'sm:text-md p-4',
+        },
+        colors: {
+          gray: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+          info: 'border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 focus:border-blue-500 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-100 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+          failure:
+            'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500',
+          warning:
+            'border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500',
+          success:
+            'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
         },
-        rightIcon: {
-          base: 'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3',
-          svg: 'h-5 w-5 text-gray-500 dark:text-gray-400',
+        withRightIcon: {
+          on: 'pr-10',
+          off: '',
         },
-        input: {
-          base: 'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
-          sizes: {
-            sm: 'p-2 sm:text-xs',
-            md: 'p-2.5 text-sm',
-            lg: 'sm:text-md p-4',
-          },
-          colors: {
-            gray: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
-            info: 'border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 focus:border-blue-500 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-100 dark:focus:border-blue-500 dark:focus:ring-blue-500',
-            failure:
-              'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500',
-            warning:
-              'border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500',
-            success:
-              'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
-          },
-          withRightIcon: {
-            on: 'pr-10',
-            off: '',
-          },
-          withIcon: {
-            on: 'pl-10',
-            off: '',
-          },
-          withAddon: {
-            on: 'rounded-r-lg',
-            off: 'rounded-lg',
-          },
-          withShadow: {
-            on: 'shadow-sm dark:shadow-sm-light',
-            off: '',
-          },
+        withIcon: {
+          on: 'pl-10',
+          off: '',
+        },
+        withAddon: {
+          on: 'rounded-r-lg',
+          off: 'rounded-lg',
+        },
+        withShadow: {
+          on: 'shadow-sm dark:shadow-sm-light',
+          off: '',
         },
       },
     },