mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
saridsa2
6f40b82579
Replace all @untitledui/icons imports across 55 files with equivalent
@fortawesome/pro-duotone-svg-icons icons, using FontAwesomeIcon wrappers
(FC<{ className?: string }>) for prop-based usage and inline replacements
for direct JSX usage. Drops unsupported Untitled UI-specific props
(strokeWidth, numeric size). TypeScript compiles clean with no errors.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
50 lines
2.2 KiB
TypeScript
50 lines
2.2 KiB
TypeScript
import type { ReactNode, Ref } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faCircleQuestion } from "@fortawesome/pro-duotone-svg-icons";
|
|
import type { LabelProps as AriaLabelProps } from "react-aria-components";
|
|
import { Label as AriaLabel } from "react-aria-components";
|
|
import { Tooltip, TooltipTrigger } from "@/components/base/tooltip/tooltip";
|
|
import { cx } from "@/utils/cx";
|
|
|
|
interface LabelProps extends AriaLabelProps {
|
|
children: ReactNode;
|
|
isRequired?: boolean;
|
|
tooltip?: string;
|
|
tooltipDescription?: string;
|
|
ref?: Ref<HTMLLabelElement>;
|
|
}
|
|
|
|
export const Label = ({ isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {
|
|
return (
|
|
<AriaLabel
|
|
// Used for conditionally hiding/showing the label element via CSS:
|
|
// <Input label="Visible only on mobile" className="lg:**:data-label:hidden" />
|
|
// or
|
|
// <Input label="Visible only on mobile" className="lg:label:hidden" />
|
|
data-label="true"
|
|
{...props}
|
|
className={cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className)}
|
|
>
|
|
{props.children}
|
|
|
|
<span className={cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block")}>*</span>
|
|
|
|
{tooltip && (
|
|
<Tooltip title={tooltip} description={tooltipDescription} placement="top">
|
|
<TooltipTrigger
|
|
// `TooltipTrigger` inherits the disabled state from the parent form field
|
|
// but we don't that. We want the tooltip be enabled even if the parent
|
|
// field is disabled.
|
|
isDisabled={false}
|
|
className="cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover"
|
|
>
|
|
<FontAwesomeIcon icon={faCircleQuestion} className="size-4" />
|
|
</TooltipTrigger>
|
|
</Tooltip>
|
|
)}
|
|
</AriaLabel>
|
|
);
|
|
};
|
|
|
|
Label.displayName = "Label";
|