From 913c7994bc1691191535a2d33d054367dd144e2b Mon Sep 17 00:00:00 2001 From: Rabus Date: Mon, 12 Dec 2022 11:03:34 +0100 Subject: [PATCH] fix: [#436] update PR and add test --- .../components/TextInput/TextInput.spec.tsx | 6 ++ src/lib/components/TextInput/TextInput.tsx | 9 +- src/lib/theme/default.ts | 90 +++++++++---------- 3 files changed, 58 insertions(+), 47 deletions(-) diff --git a/src/lib/components/TextInput/TextInput.spec.tsx b/src/lib/components/TextInput/TextInput.spec.tsx index c88d7c3aa..86e807750 100644 --- 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().getByTestId('right-icon'); + + expect(page).toBeInTheDocument(); + }); }); }); diff --git a/src/lib/components/TextInput/TextInput.tsx b/src/lib/components/TextInput/TextInput.tsx index 8567cda9b..26edb94e7 100644 --- 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( { 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 ( <>
@@ -60,7 +65,7 @@ export const TextInput = forwardRef(
)} {RightIcon && ( -
+
)} diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts index 9c6d51137..36fd6b002 100644 --- 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: '', }, }, },