designsystemet
designsystemet copied to clipboard
Tooltip to strict on checking children
Description of the bug
Reported by team in Mattilsynet;
Vi har denne Tooltip varianten
<Tooltip content="Last ned elektronisk signert PDF" portal={false} placement="bottom">
<Group>
<CloudDownFillIcon aria-hidden fontSize="1.5rem" fill={mattilsynetTheme.primary} />
{label}
</Group>
</Tooltip>
Dette treffer det du la til på Tooltip
if (
!children ||
children?.type === Fragment ||
(children as unknown) === Fragment
) {
console.error(
'<Tooltip> children needs to be a single ReactElement and not: <Fragment/> | <></>',
);
return null;
}
Dersom vi bytter <Group>
med <div>
går det fint, eller wrapper <Group>
med <div>
, men det som er rart er at <Group>
selv returnerer en <div>
:sweat_smile:
Suggestion:
Less strict children
checking in component, but rather warning added in a useEffect
where we can inspect the actual amount of rendered DOM children.