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:
Prateek Shourya 2024-08-05 20:42:14 +05:30 committed by GitHub
parent 07574b4222
commit 333a989b1a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
67 changed files with 824 additions and 569 deletions

View file

@ -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>