OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved TextField disabled state

Browse Source 
- It's now easier to tell apart disabled and empty states

refs DES-30
This commit is contained in:
Djordje Vlaisavljevic 2024-02-05 15:58:57 +00:00
parent 58c156001c
commit f8f9c55f90
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin-x-design-system/src/global/form/TextField.stories.tsx
View File

@ -11,7 +11,7 @@ const meta = {
component: TextField, component: TextField,
tags: ['autodocs'], tags: ['autodocs'],
decorators: [(_story: () => ReactNode) => ( decorators: [(_story: () => ReactNode) => (
<div style={{maxWidth: '400px'}}> <div style={{maxWidth: '400px', padding: '20px'}}>
{_story()} {_story()}
</div> </div>
)], )],

4
apps/admin-x-design-system/src/global/form/TextField.tsx
View File

@ -71,12 +71,12 @@ const TextField: React.FC<TextFieldProps> = ({
const bgClasses = !unstyled && clsx( const bgClasses = !unstyled && clsx(
'absolute inset-0 rounded-md border text-grey-300 transition-all peer-hover:bg-grey-100 peer-focus:border-green peer-focus:bg-white peer-focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:peer-hover:bg-grey-925 dark:peer-focus:bg-grey-925', 'absolute inset-0 rounded-md border text-grey-300 transition-all peer-hover:bg-grey-100 peer-focus:border-green peer-focus:bg-white peer-focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:peer-hover:bg-grey-925 dark:peer-focus:bg-grey-925',
error ? `border-red bg-white dark:bg-grey-925` : 'border-transparent bg-grey-150 dark:bg-grey-900', error ? `border-red bg-white dark:bg-grey-925` : 'border-transparent bg-grey-150 dark:bg-grey-900',
disabled && 'bg-grey-100 dark:bg-grey-925' disabled && 'bg-grey-50 peer-hover:bg-grey-50 dark:bg-grey-950 dark:peer-hover:bg-grey-950'
); );
const textFieldClasses = !unstyled && clsx( const textFieldClasses = !unstyled && clsx(
'peer z-[1] order-2 h-8 w-full bg-transparent px-3 py-1 text-sm placeholder:text-grey-500 dark:placeholder:text-grey-700 md:h-9 md:py-2 md:text-md', 'peer z-[1] order-2 h-8 w-full bg-transparent px-3 py-1 text-sm placeholder:text-grey-500 dark:placeholder:text-grey-700 md:h-9 md:py-2 md:text-md',
disabled ? 'text-grey-700 opacity-60 dark:text-grey-700' : 'dark:text-white', disabled ? 'cursor-not-allowed text-grey-600 opacity-60 dark:text-grey-800' : 'dark:text-white',
rightPlaceholder ? 'w-0 grow rounded-l-md' : 'rounded-md', rightPlaceholder ? 'w-0 grow rounded-l-md' : 'rounded-md',
className className
); );