helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-12 02:38:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: pass data-icon prop through FontAwesome icon wrappers

Browse Source 
Replaced all bare `FC<{ className?: string }>` and `FC<HTMLAttributes<...>>`
wrappers that only forwarded `className` with `faIcon()` from
`src/lib/icon-wrapper.ts`, ensuring props like `data-icon` needed by the
Button component's CSS selector `*:data-icon:size-5` are correctly forwarded.
Also widened `NavItemBaseProps.icon` and `NavItemType.icon` prop types to
`FC<Record<string, any>>` to stay compatible with `faIcon()` return type.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-03-21 11:19:46 +05:30
parent 2ace6efae5
commit 631acf63dc
11 changed files with 65 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/layout/sidebar.tsx
View File

@@ -1,4 +1,3 @@
import type { FC, HTMLAttributes } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faBullhorn,
@@ -14,6 +13,7 @@ import {
faPlug,
faUsers,
} from "@fortawesome/pro-duotone-svg-icons";
import { faIcon } from "@/lib/icon-wrapper";
import { useAtom } from "jotai";
import { Link, useNavigate } from "react-router";
import { MobileNavigationHeader } from "@/components/application/app-navigation/base-components/mobile-header";
@@ -30,36 +30,16 @@ import { cx } from "@/utils/cx";
const EXPANDED_WIDTH = 292;
const COLLAPSED_WIDTH = 64;
const IconGrid2: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faGrid2} className={className} />
);
const IconBullhorn: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faBullhorn} className={className} />
);
const IconCommentDots: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faCommentDots} className={className} />
);
const IconChartMixed: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faChartMixed} className={className} />
);
const IconPlug: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faPlug} className={className} />
);
const IconGear: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faGear} className={className} />
);
const IconPhone: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faPhone} className={className} />
);
const IconClockRewind: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faClockRotateLeft} className={className} />
);
const IconUsers: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faUsers} className={className} />
);
const IconHospitalUser: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faHospitalUser} className={className} />
);
const IconGrid2 = faIcon(faGrid2);
const IconBullhorn = faIcon(faBullhorn);
const IconCommentDots = faIcon(faCommentDots);
const IconChartMixed = faIcon(faChartMixed);
const IconPlug = faIcon(faPlug);
const IconGear = faIcon(faGear);
const IconPhone = faIcon(faPhone);
const IconClockRewind = faIcon(faClockRotateLeft);
const IconUsers = faIcon(faUsers);
const IconHospitalUser = faIcon(faHospitalUser);
type NavSection = {
label: string;