From 05c9262da7e534f887f212ad291da938153e0690 Mon Sep 17 00:00:00 2001
From: "Vink, S.A. (Sjoerd)" <s.a.vink@uu.nl>
Date: Mon, 16 Sep 2024 10:20:03 -0400
Subject: [PATCH] fix(booleanInput): same style as dropdown text
---
libs/shared/lib/components/inputs/index.tsx | 42 +++++++++++++--------
1 file changed, 27 insertions(+), 15 deletions(-)
diff --git a/libs/shared/lib/components/inputs/index.tsx b/libs/shared/lib/components/inputs/index.tsx
index 4f89fed34..e421f06f5 100644
--- a/libs/shared/lib/components/inputs/index.tsx
+++ b/libs/shared/lib/components/inputs/index.tsx
@@ -78,6 +78,11 @@ type BooleanProps = {
value: boolean;
tooltip?: string;
onChange?: (value: boolean) => void;
+ size?: 'xs' | 'sm' | 'md' | 'xl';
+ info?: string;
+ required?: boolean;
+ className?: string;
+ inline?: boolean;
};
type RadioProps = {
@@ -417,23 +422,30 @@ export const CheckboxInput = ({ label, value, options, onChange, tooltip }: Chec
);
};
-export const BooleanInput = ({ label, value, onChange, tooltip }: BooleanProps) => {
+export const BooleanInput = ({ label, value, onChange, tooltip, info, size, required, className }: BooleanProps) => {
return (
<Tooltip>
- <TooltipTrigger>
- <label className={`label cursor-pointer w-fit gap-2 px-0 py-1`}>
- <span className="text-sm">{label}</span>
- <input
- type="checkbox"
- checked={value}
- onChange={(event) => {
- if (onChange) {
- onChange(event.target.checked);
- }
- }}
- className="checkbox checkbox-xs"
- />
- </label>
+ <TooltipTrigger className={className + 'w-full flex justify-between'}>
+ {label && (
+ <label className="label p-0">
+ <span
+ className={`text-${size} text-left truncate font-medium text-secondary-700 ${required && "after:content-['*'] after:ml-0.5 after:text-danger-500"}`}
+ >
+ {label}
+ </span>
+ {info && <Info tooltip={info} />}
+ </label>
+ )}
+ <input
+ type="checkbox"
+ checked={value}
+ onChange={(event) => {
+ if (onChange) {
+ onChange(event.target.checked);
+ }
+ }}
+ className="checkbox checkbox-xs"
+ />
</TooltipTrigger>
{tooltip && <TooltipContent>{tooltip}</TooltipContent>}
</Tooltip>
--
GitLab