From 219d21dcfc52607fdbc785ffd242c4edda83f36a Mon Sep 17 00:00:00 2001
From: Sjoerd <svink@graphpolaris.com>
Date: Tue, 17 Sep 2024 08:04:49 +0000
Subject: [PATCH] fix: boolean input styling
---
libs/shared/lib/components/inputs/index.tsx | 43 ++++++++++++++-------
1 file changed, 28 insertions(+), 15 deletions(-)
diff --git a/libs/shared/lib/components/inputs/index.tsx b/libs/shared/lib/components/inputs/index.tsx
index 4f89fed34..aa098a0e7 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,31 @@ 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"
+ aria-label={`Toggle ${label}`}
+ />
</TooltipTrigger>
{tooltip && <TooltipContent>{tooltip}</TooltipContent>}
</Tooltip>
--
GitLab