refactor(FE-Storyless): update input components to ensure consistent background styling

This commit is contained in:
rstubryan
2025-10-22 15:31:59 +07:00
parent bdb3ab1a50
commit 575a317eed
3 changed files with 35 additions and 27 deletions
+33 -25
View File
@@ -397,20 +397,24 @@ const NumberInput = ({
<div className='relative flex'>
{/* Prefix Block */}
{inputPrefix && (
<div className={cn(
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
)}>
<span className={cn(
'text-sm font-medium select-none whitespace-nowrap',
<div
className={cn(
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
)}>
)}
>
<span
className={cn(
'text-sm font-medium select-none whitespace-nowrap',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
}
)}
>
{inputPrefix}
</span>
</div>
@@ -419,7 +423,7 @@ const NumberInput = ({
{/* Input Wrapper */}
<div
className={cn(
'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center',
'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
{
'border-error': isError,
'border-success!': isValid,
@@ -505,20 +509,24 @@ const NumberInput = ({
{/* Suffix Block */}
{inputSuffix && (
<div className={cn(
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
)}>
<span className={cn(
'text-sm font-medium select-none whitespace-nowrap',
<div
className={cn(
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
)}>
)}
>
<span
className={cn(
'text-sm font-medium select-none whitespace-nowrap',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
}
)}
>
{inputSuffix}
</span>
</div>
+1 -1
View File
@@ -87,7 +87,7 @@ const TextArea = ({
<textarea
className={cn(
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
{
'border-error': isError,
'border-success!': isValid,
+1 -1
View File
@@ -91,7 +91,7 @@ const TextInput = ({
<div
className={cn(
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
{
'border-error': isError,
'border-success!': isValid,