fix: pass data-icon prop through FontAwesome icon wrappers

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:
2026-03-21 11:19:46 +05:30
parent 2ace6efae5
commit 631acf63dc
11 changed files with 65 additions and 95 deletions

View File

@@ -1,15 +1,13 @@
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGear, faCopy, faLink } from '@fortawesome/pro-duotone-svg-icons';
import type { FC, HTMLAttributes } from 'react';
import { faIcon } from '@/lib/icon-wrapper';
import { SlideoutMenu } from '@/components/application/slideout-menus/slideout-menu';
import { Input } from '@/components/base/input/input';
import { Button } from '@/components/base/buttons/button';
import { notify } from '@/lib/toast';
const GearIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faGear} className={className} />
);
const GearIcon = faIcon(faGear);
type IntegrationType = 'ozonetel' | 'whatsapp' | 'facebook' | 'google' | 'instagram' | 'website' | 'email';
@@ -166,9 +164,7 @@ export const IntegrationEditSlideout = ({ isOpen, onOpenChange, integration }: I
<Button
size="md"
color="primary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faLink} className={className} />
)}
iconLeading={faIcon(faLink)}
onClick={handleOAuthConnect}
>
Connect {integration.name}
@@ -187,9 +183,7 @@ export const IntegrationEditSlideout = ({ isOpen, onOpenChange, integration }: I
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faCopy} className={className} />
)}
iconLeading={faIcon(faCopy)}
onClick={() => handleCopy(values[field.key] ?? '')}
>
Copy