evo/Evo.External.App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

packages/ui: fix checkbox alert color & remove checkbox label

Browse Source
This commit is contained in:
vchikalkin 2023-11-16 17:17:16 +03:00
parent 0d8ea70734
commit 7b58d76f9e
3 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/components/Form/Elements.tsx
View File

@ -28,14 +28,13 @@ export function Elements({ data, metaData }: Props) {
message={validation[name]?.message} message={validation[name]?.message}
key={name} key={name}
id={name} id={name}
title={fieldType === 'CHECKBOX' ? '' : label} title={label}
> >
<Element <Element
loading={!Object.keys(values).length} loading={!Object.keys(values).length}
checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false} checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
id={name} id={name}
value={values[name] || ''} value={values[name] || ''}
title={label}
min={min} min={min}
max={max} max={max}
onChange={(e) => { onChange={(e) => {

47
packages/ui/checkbox.tsx
View File

@ -3,27 +3,27 @@ import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority'; import { cva } from 'class-variance-authority';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', { // const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', {
defaultVariants: { // defaultVariants: {
intent: 'default', // intent: 'default',
}, // },
variants: { // variants: {
intent: { // intent: {
default: '', // default: '',
disabled: 'cursor-not-allowed', // disabled: 'cursor-not-allowed',
}, // },
}, // },
}); // });
type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>; // type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>;
const Label = forwardRef<HTMLLabelElement, LabelProps>( // const Label = forwardRef<HTMLLabelElement, LabelProps>(
({ className, intent, title, ...props }, ref) => ( // ({ className, intent, title, ...props }, ref) => (
<label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}> // <label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}>
{title} // {title}
</label> // </label>
) // )
); // );
const variants = cva( const variants = cva(
'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30' 'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
@ -33,19 +33,12 @@ export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
VariantProps<typeof variants> & { readonly loading: boolean }; VariantProps<typeof variants> & { readonly loading: boolean };
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>( export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
({ className, loading, title, ...props }, ref) => { ({ className, loading, ...props }, ref) => {
if (loading) return <div className="h-3 w-full animate-pulse rounded bg-gray-100" />; if (loading) return <div className="h-3 w-full animate-pulse rounded bg-gray-100" />;
return ( return (
<div className="flex items-center"> <div className="flex items-center">
<input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} /> <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
{title && (
<Label
intent={props.disabled ? 'disabled' : 'default'}
htmlFor={props.id}
title={title}
/>
)}
</div> </div>
); );
} }

2
packages/ui/container.tsx
View File

@ -11,7 +11,7 @@ const variants = cva('flex h-9 items-center', {
}, },
variants: { variants: {
intent: { intent: {
danger: '[&>*]:border-red-500', danger: '[&>*]:border-red-500 [&>*>*]:border-red-500',
default: '', default: '',
}, },
}, },