designsystemet icon indicating copy to clipboard operation
designsystemet copied to clipboard

Tooltip to strict on checking children

Open eirikbacker opened this issue 5 months ago • 14 comments

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.

eirikbacker avatar Sep 18 '24 11:09 eirikbacker