mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
fix(insights): normalize the assessment-card tile-header icon size
The TileHeader nodeIcon path rendered the caller-passed icon node verbatim and dropped the canonical h-5 w-5 text-foreground class TileHeader forwards, so a caller passing an unsized node could drift off the contract. Forward the class onto a sizing span that pins any child SVG to the canonical box regardless of what the caller passed. Existing call sites that already pass a pre-sized icon stay visually identical. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
68ab78d6d8
commit
4be9767428
1 file changed
+19
-7
@@ -17,14 +17,26 @@ import { useFeatureFlags } from "@/hooks/use-feature-flags";
|
||||
* `<TileHeader>`. Callers still pass a pre-sized icon NODE (e.g.
|
||||
* `<HeartPulse className="h-5 w-5" />`) because the bespoke metric pages
|
||||
* own that prop; `<TileHeader>` drives its icon off a component, so wrap
|
||||
* the node in a thin component that renders it verbatim. The node already
|
||||
* carries the `h-5 w-5` foreground sizing `<TileHeader>` would apply, so
|
||||
* the rendered row is byte-identical to the previous hand-rolled `flex
|
||||
* items-center gap-2` header.
|
||||
* the node in a thin component that renders it.
|
||||
*
|
||||
* v1.12.7 (M2) — `<TileHeader>` owns the canonical `h-5 w-5 text-foreground`
|
||||
* sizing and passes it through as `className` to its icon component. The
|
||||
* previous wrapper rendered the node verbatim and dropped that class, so a
|
||||
* caller passing an unsized (or mis-sized) node could drift off the contract.
|
||||
* The wrapper now forwards `<TileHeader>`'s className onto a sizing span that
|
||||
* normalizes the glyph — the `[&>svg]:size-5` rule pins any child SVG to the
|
||||
* canonical box regardless of what the caller passed. Callers that already
|
||||
* pass `<Icon className="h-5 w-5" />` stay visually identical.
|
||||
*/
|
||||
function nodeIcon(icon: React.ReactNode): React.ComponentType {
|
||||
return function StatusIcon() {
|
||||
return <>{icon}</>;
|
||||
function nodeIcon(icon: React.ReactNode): React.ComponentType<{
|
||||
className?: string;
|
||||
}> {
|
||||
return function StatusIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<span className={cn("inline-flex [&>svg]:size-5", className)}>
|
||||
{icon}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user