chore: components restructuring and UI improvements. (#5285)
* chore: components restructuring and minor UI improvements. * chore: minor UI improvements fro icons and member dropdown. * chore: update issue identifier. * chore: rename `Issue Extra Property` to `Issue Additional Property` * chore: fix popovers placement issue on components with overflow. * chore: add `scrollbar-xs` * chore: add `xs` size for input and textarea components. * chore: update `sortable` to return back `movedItem` in the onChange callback. * chore: minor UI adjustments for radio-select. * chore: update outside click delay to 1ms.
This commit is contained in:
parent
07574b4222
commit
333a989b1a
67 changed files with 824 additions and 569 deletions
|
|
@ -4,7 +4,7 @@ import { cn } from "@/helpers/common.helper";
|
|||
|
||||
type RadioInputProps = {
|
||||
name?: string;
|
||||
label: string | React.ReactNode | undefined;
|
||||
label?: string | React.ReactNode;
|
||||
wrapperClassName?: string;
|
||||
fieldClassName?: string;
|
||||
buttonClassName?: string;
|
||||
|
|
@ -46,14 +46,14 @@ export const RadioInput = ({
|
|||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className={cn(`mb-2`, inputLabelClassName)}>{inputLabel}</div>
|
||||
{inputLabel && <div className={cn(`mb-2`, inputLabelClassName)}>{inputLabel}</div>}
|
||||
<div className={cn(`${wrapperClass}`, inputWrapperClassName)}>
|
||||
{options.map(({ value, label, disabled }, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => !disabled && setSelected(value)}
|
||||
className={cn(
|
||||
"flex items-center gap-2",
|
||||
"flex items-center gap-2 text-base",
|
||||
disabled ? `bg-custom-background-200 border-custom-border-200 cursor-not-allowed` : ``,
|
||||
inputFieldClassName
|
||||
)}
|
||||
|
|
@ -62,7 +62,7 @@ export const RadioInput = ({
|
|||
id={`${name}_${index}`}
|
||||
name={name}
|
||||
className={cn(
|
||||
`group flex size-5 items-center justify-center rounded-full border border-custom-border-400 bg-custom-background-500 cursor-pointer`,
|
||||
`group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-custom-border-400 bg-custom-background-500 cursor-pointer`,
|
||||
selected === value ? `bg-custom-primary-200 border-custom-primary-100 ` : ``,
|
||||
disabled ? `bg-custom-background-200 border-custom-border-200 cursor-not-allowed` : ``,
|
||||
inputButtonClassName
|
||||
|
|
@ -72,7 +72,7 @@ export const RadioInput = ({
|
|||
disabled={disabled}
|
||||
checked={selected === value}
|
||||
/>
|
||||
<label htmlFor={`${name}_${index}`} className="text-base cursor-pointer">
|
||||
<label htmlFor={`${name}_${index}`} className="cursor-pointer w-full">
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue