p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Tooltip): add status variants

Browse Source 
Implemented different tooltip variants to handle different status messages. Variants for normal, error, success, and warning have been added. Now, tooltips can show status-specific color coding, improving their usability.
This commit is contained in:
p-sw 2024-06-11 20:24:43 +09:00
parent 5db9be1eb3
commit a329eee279
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/react/components/Tooltip.tsx
View File

@ -65,12 +65,17 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
}); });
const tooltipContentColors = { const tooltipContentColors = {
background: "bg-white dark:bg-black", variants: {
border: "border-neutral-200 dark:border-neutral-700", default:
"bg-white dark:bg-black border-neutral-200 dark:border-neutral-700",
error: "bg-red-400 dark:bg-red-800 border-red-500 text-white",
success: "bg-green-400 dark:bg-green-800 border-green-500 text-white",
warning: "bg-yellow-400 dark:bg-yellow-800 border-yellow-500",
},
}; };
const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({ const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
base: `absolute py-1 px-3 rounded-md ${tooltipContentColors.background} border ${tooltipContentColors.border} opacity-0 transition-all base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all
group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100 group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100
select-none pointer-events-none select-none pointer-events-none
group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto
@ -95,11 +100,18 @@ const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
md: "[--tooltip-offset:4px]", md: "[--tooltip-offset:4px]",
lg: "[--tooltip-offset:8px]", lg: "[--tooltip-offset:8px]",
}, },
status: {
normal: tooltipContentColors.variants.default,
error: tooltipContentColors.variants.error,
success: tooltipContentColors.variants.success,
warning: tooltipContentColors.variants.warning,
},
}, },
defaults: { defaults: {
position: "top", position: "top",
offset: "md", offset: "md",
delay: "normal", delay: "normal",
status: "normal",
}, },
}); });