From c06a68a8131f41279803617e47f0781db856c296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lovro=20=C5=BDagar?= <157136236+ht-lovrozagar@users.noreply.github.com> Date: Fri, 21 Jun 2024 13:26:36 +0200 Subject: [PATCH] feat: add isInvalid styling for inputs --- app.tsx | 40 ++++++++++++++++++- index.html | 2 +- package.json | 2 +- .../classes/input-container-classes.ts | 2 +- .../checkbox/components/checkbox.tsx | 3 +- .../checkbox/constants/constants.ts | 2 +- src/components/checkbox/types/checkbox.ts | 2 +- .../combobox/constants/constants.ts | 2 +- .../components/radio-group-item.tsx | 12 ++++-- .../radio-group/components/radio-group.tsx | 2 +- .../radio-group/types/radio-group-context.ts | 3 +- .../radio-group/types/radio-group.ts | 12 +++--- 12 files changed, 62 insertions(+), 22 deletions(-) diff --git a/app.tsx b/app.tsx index 7478d02..ac482f2 100644 --- a/app.tsx +++ b/app.tsx @@ -1,7 +1,43 @@ -import React from 'react' +import { + Checkbox, + Combobox, + ComboboxContent, + ComboboxItem, + ComboboxTrigger, + RadioGroup, + RadioGroupItem, + TextInput, +} from '@/components' +import React, { useState } from 'react' const App = () => { - return
+ const [checkbox, setCheckbox] = useState(false) + const [radio, setRadio] = useState(1) + + return ( +
+ + + trigger + + value + + + setCheckbox(value)} + /> + setRadio(value as number)} + > + + + +
+ ) } export { App } diff --git a/index.html b/index.html index 639a52e..7d8eeec 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index 030d606..6e1a210 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@renderui/core", - "version": "1.0.9", + "version": "1.1.0", "private": false, "description": "React UI library with highly modular and ready-out-of-the-box components", "license": "MIT", diff --git a/src/components/_shared/classes/input-container-classes.ts b/src/components/_shared/classes/input-container-classes.ts index 7d89433..661328b 100644 --- a/src/components/_shared/classes/input-container-classes.ts +++ b/src/components/_shared/classes/input-container-classes.ts @@ -1,7 +1,7 @@ import { cva } from '@renderui/utils' const inputContainerClasses = cva( - 'flex min-w-0 cursor-text items-center gap-2 overflow-hidden ring-ring-color ring-offset-0 data-[focus-within=true]:ring-[2px] data-[hover=true]:data-[focus-within=true]:ring-[2px] data-[hover=true]:ring-[1px]', + 'flex min-w-0 cursor-text items-center gap-2 overflow-hidden ring-ring-color ring-offset-0 data-[focus-within=true]:ring-[2px] data-[hover=true]:data-[focus-within=true]:ring-[2px] data-[hover=true]:ring-[1px] data-[invalid=true]:ring-destructive', { variants: { variant: { diff --git a/src/components/checkbox/components/checkbox.tsx b/src/components/checkbox/components/checkbox.tsx index 2095cd6..6af775c 100644 --- a/src/components/checkbox/components/checkbox.tsx +++ b/src/components/checkbox/components/checkbox.tsx @@ -30,6 +30,7 @@ const Checkbox = React.forwardRef((props, ref) => { children, onCheckedChange, onPress, + color = 'primary', hasRipple = false, hasIconContentWhenUnchecked = true, ...restProps @@ -59,7 +60,7 @@ const Checkbox = React.forwardRef((props, ref) => { ref={ref} role='checkbox' variant='outline' - color='primary' + color={isInvalid ? 'destructive' : color} value={checked ? 'on' : 'off'} aria-checked={checked} aria-disabled={isDisabled} diff --git a/src/components/checkbox/constants/constants.ts b/src/components/checkbox/constants/constants.ts index 3e97143..a308d79 100644 --- a/src/components/checkbox/constants/constants.ts +++ b/src/components/checkbox/constants/constants.ts @@ -1,5 +1,5 @@ const DEFAULT_CHECKBOX_CLASSNAME = - 'render-ui-checkbox p-0.5 bg-transparent rounded-md min-w-0 h-fit w-fit aspect-square shrink-0 text-white data-[state=checked]:bg-primary' + 'render-ui-checkbox p-0.5 bg-transparent rounded-md min-w-0 h-fit w-fit aspect-square shrink-0 text-white data-[state=checked]:bg-primary data-[invalid=true]:ring-destructive' const DEFAULT_CHECKBOX_INDICATOR_CLASSNAME = 'render-ui-checkbox-indicator h-[0.85rem] w-[0.85rem] stroke-white stroke-[2.5]' diff --git a/src/components/checkbox/types/checkbox.ts b/src/components/checkbox/types/checkbox.ts index 3906d73..e7a9249 100644 --- a/src/components/checkbox/types/checkbox.ts +++ b/src/components/checkbox/types/checkbox.ts @@ -24,7 +24,7 @@ type CheckboxCustomProps = { isInvalid?: boolean isRequired?: boolean defaultChecked?: boolean - onCheckedChange?: React.Dispatch> + onCheckedChange?: React.Dispatch> hasIconContentWhenUnchecked?: boolean } diff --git a/src/components/combobox/constants/constants.ts b/src/components/combobox/constants/constants.ts index 0040e59..3fe3b9f 100644 --- a/src/components/combobox/constants/constants.ts +++ b/src/components/combobox/constants/constants.ts @@ -1,5 +1,5 @@ const DEFAULT_COMBOBOX_TRIGGER_CLASSNAME = - 'render-ui-combobox-trigger group justify-between min-h-[40px] transition-[background-color,box-shadow] data-[empty=true]:text-mode-foreground/50 aria-[expanded=true]:ring-ring-color aria-[expanded=true]:ring-[1px] ring-offset-0 data-[focus-visible]:ring-offset-0 data-[hover=true]:ring-[1px] data-[expanded=true]:ring-[2px] data-[expanded=true]:data-[hover=true]:ring-[2px]' + 'render-ui-combobox-trigger group justify-between min-h-[40px] transition-[background-color,box-shadow] data-[empty=true]:text-mode-foreground/50 aria-[expanded=true]:ring-ring-color aria-[expanded=true]:ring-[1px] ring-offset-0 data-[focus-visible]:ring-offset-0 data-[hover=true]:ring-[1px] data-[expanded=true]:ring-[2px] data-[hover=true]:data-[focus-visible=true]:ring-[2px] data-[expanded=true]:data-[hover=true]:ring-[2px] data-[invalid=true]:data-[expanded=true]:ring-destructive data-[invalid=true]:ring-destructive' const COMBOBOX_TRIGGER_SOLID_CLASSNAME = 'after:hidden before:hidden' diff --git a/src/components/radio-group/components/radio-group-item.tsx b/src/components/radio-group/components/radio-group-item.tsx index b95eb50..c989004 100644 --- a/src/components/radio-group/components/radio-group-item.tsx +++ b/src/components/radio-group/components/radio-group-item.tsx @@ -23,16 +23,16 @@ const RadioGroupItem = React.forwardRef( className, children, value, - color, variant, indicatorProps, onClick, role = 'radio', + color = 'primary', hasRipple = false, ...restProps } = props - const { name, value: rootValue, setValue } = useRadioGroupContext() + const { name, isInvalid, value: rootValue, setValue } = useRadioGroupContext() const { asChild: indicatorAsChild, @@ -50,14 +50,18 @@ const RadioGroupItem = React.forwardRef( ref={ref} role={role} value={value as string} - color={color ?? 'primary'} + color={isInvalid ? 'destructive' : color} variant={variant ?? isChecked ? 'solid' : 'outline'} hasRipple={hasRipple} aria-checked={isChecked} data-state={isChecked ? 'checked' : 'unchecked'} data-slot='item' onPress={chain(onClick, () => setValue(value))} - className={cx(DEFAULT_RADIO_GROUP_ITEM_CLASSNAME, className)} + className={cx( + DEFAULT_RADIO_GROUP_ITEM_CLASSNAME, + isInvalid ? 'ring-destructive' : '', + className, + )} {...restProps} > {functionCallOrValue(children, isChecked)} diff --git a/src/components/radio-group/components/radio-group.tsx b/src/components/radio-group/components/radio-group.tsx index 4e3ec11..69fbfbb 100644 --- a/src/components/radio-group/components/radio-group.tsx +++ b/src/components/radio-group/components/radio-group.tsx @@ -49,7 +49,7 @@ const RadioGroup = React.forwardRef((props, ref) className={cx(DEFAULT_RADIO_GROUP_CLASSNAME, className)} {...restProps} > - + {functionCallOrValue(startContent, value)} {functionCallOrValue(children, value)} {functionCallOrValue(endContent, value)} diff --git a/src/components/radio-group/types/radio-group-context.ts b/src/components/radio-group/types/radio-group-context.ts index fa69609..1fc39f4 100644 --- a/src/components/radio-group/types/radio-group-context.ts +++ b/src/components/radio-group/types/radio-group-context.ts @@ -1,7 +1,6 @@ import { RadioGroupProps } from '@/components/radio-group/types/radio-group' -type RadioGroupContext = Pick & { - value: string | number +type RadioGroupContext = Pick & { setValue: React.Dispatch> } diff --git a/src/components/radio-group/types/radio-group.ts b/src/components/radio-group/types/radio-group.ts index 382cc3e..354c0bb 100644 --- a/src/components/radio-group/types/radio-group.ts +++ b/src/components/radio-group/types/radio-group.ts @@ -9,17 +9,17 @@ type RadioGroupRef = React.ElementRef type RadioGroupPrimitiveProps = Omit< React.ComponentProps, - 'children' | 'disabled' | 'readonly' | 'required' + 'children' | 'disabled' | 'readonly' | 'required' | 'value' | 'onValueChange' > type RadioGroupCustomProps = { - startContent?: React.ReactNode | ((value: string | number | undefined) => React.ReactNode) - children?: React.ReactNode | ((value: string | number | undefined) => React.ReactNode) - endContent?: React.ReactNode | ((value: string | number | undefined) => React.ReactNode) + startContent?: React.ReactNode | ((value: string | number) => React.ReactNode) + children?: React.ReactNode | ((value: string | number) => React.ReactNode) + endContent?: React.ReactNode | ((value: string | number) => React.ReactNode) name?: string - value?: string + value?: string | number defaultValue?: string | number | undefined - onValueChange?: (value: string | number | undefined) => void + onValueChange?: (value: string | number) => void isDisabled?: boolean isReadOnly?: boolean isInvalid?: boolean