Prevent tooltip from rendering with empty label

[mazzucchelli]

Why is it needed?

The label prop for the <Tooltip /> component is optional, but it doesn't prevent the tooltip from rendering when it's missing.

How to test it?

Create a tooltip with an empty label prop

[changeset-bot]

🦋 Changeset detected

Latest commit: 14b295a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@strapi/design-system	Patch
@strapi/icons	Patch
@strapi/ui-primitives	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 11:25am

[HichamELBSI]

I'm wondering what's the point of using the tooltip to not show the label tooltip ? 🤔

[mazzucchelli]

I'm wondering what's the point of using the tooltip to not show the label tooltip ? 🤔

To handle scenarios where the tooltip message is string | undefined. Consumers of the design system are forced to handle this conditional rendering on their side:

export const ButtonWithTooltip = ({
  tooltip,
  tooltipPosition,
  Component = Button,
  ...rest
}) => {
  const button = <Component {...rest} />;

  return tooltip ? (
    <Tooltip label={tooltip} side={tooltipPosition}>
        {button}
    </Tooltip>
  ) : (
    button
  );
};

The same applies to menuitems, links, etc..

If label is optional then we should also handle the case where it can be undefined