Feat(tooltip): contentが空のときにtooltipを表示しない

[okakyo]

タスク

resolve: #1258

行なったこと

• React にて、 content が空のときに tooltip が表示されないように修正
• Vue では、すでに対応済み

 <WizPopup
  v-if="$slots.content"
  :isOpen="isHover || isOpen"
  :direction="computedDirection"
  :shadow="false"
  :animation="true"
  @onTurn="turnPopup"
  gap="xs2"
  :isDirectionFixed="isDirectionFixed"
>

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
wiz-ui-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 21, 2024 6:08am
wiz-ui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 21, 2024 6:08am

[changeset-bot]

🦋 Changeset detected

Latest commit: 0ebd407

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

This PR includes changesets to release 1 package

Name	Type
@wizleap-inc/wiz-ui-react	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

[github-actions]

Size Change: +218 B (0%)

Total Size: 301 kB

Filename	Size	Change
./packages/wiz-ui-next/dist/style.css	11.6 kB	+4 B (0%)
./packages/wiz-ui-next/dist/wiz-ui.es.js	76.8 kB	+67 B (0%)
./packages/wiz-ui-next/dist/wiz-ui.umd.js	67.4 kB	+50 B (0%)
./packages/wiz-ui-react/dist/style.css	11.6 kB	+5 B (0%)
./packages/wiz-ui-react/dist/wiz-ui.es.js	71.3 kB	+50 B (0%)
./packages/wiz-ui-react/dist/wiz-ui.umd.js	62.6 kB	+42 B (0%)

_{compressed-size-action}

[reg-suit]

reg-suit detected visual differences.

Check this report, and review them.

🔴🔴

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean?

The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

[ichi-h]

reactの方は問題なさそうでした！ 🙏

vue版が対応済みとのことでしたが、対応できていなさそうですね……！
vueのtooltipのstoryのTemplateを以下のように変更すると、

const Template: StoryFn<typeof WizTooltip> = (args) => ({
  setup: () => ({ args }),
  components: { WizTooltip, WizText },
  template: `
    <div style="width: 700px; height: 500px; background-color: #eee; display: flex; justify-content: center; align-items: center;">
      <WizTooltip v-bind="args">
        <WizText size="xs2">保険見直し、つみ...</WizText>
        <template #content></template>
        <!-- or -->
        <!-- <template #content><span v-if="false">hoge</span></template> -->
        <!-- or -->
        <!-- <template #content>{{ '' }}</template> -->
        <!-- or -->
        <!-- <template #content>{{ undefined }}</template> -->
      </WizTooltip>
    </div>`,
});

どのパターンでも画像のように表示されますね……

上の画像のような、空っぽのtooltipが表示される現象を回避したいので、vue版もうまくここを調整したいですね……！

[okakyo]

Vue の tooltip について色々調査したのですが、こちらは <template #content> タグが存在すると表示されるようになっているようです。記事などで調査してみたのですが、このタグ内に文字があるかどうかでの判定はできなさそうでした。

申し訳ありませんが、こちらの表示するかしないかのどうかについては <template #content> タグを削除するように運用するといいかもしれないです。

[ichi-h]

@okakyo
スーパーゴリ押し戦法なのですが、useSlotsを使うとslot内に入っているchildrenを取ることが一応できまして、

例えばslotの中に ほげほげほげほげ という文字列が挿入された場合、以下のコードを実行すると、

const slots = useSlots();
console.log(slots.default?.()[0].children);
// → ほげほげほげほげ

こうすると、defaultのslotの中にある子要素を取れるので、これをうまく使って実現できなさそうでしょうか……？
例えばslots.default?.()の戻り値が空配列であれば表示しない、childrenの中身がfalsyだったら表示しない、といった感じに、方法はいくつかありそうかなと思ったのですが、いかがでしょうか……？

[okakyo]

0ebd407 にて、Vue での判定を追加しました！
お手隙の際にご確認のほど、よろしくおねがいします 🙇🏻