Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(DropdownTrigger)!: Dropdown triggerでtooltipを表示できるようにする #5291

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

daiHash
Copy link
Contributor

@daiHash daiHash commented Jan 16, 2025

関連URL

https://smarthr.atlassian.net/browse/SHRUI-1209

概要

Dropdown menuのtrigger buttonなどにtooltipでラベル表示したい場合にDropdownMenuButtonコンポーネントをTooltipでラップするとdropdown menu contentまでラップされるためtooltipの表示・非表示を処理しているpointerenter/pointerleaveのイベントが想定通りの挙動(tooltip trigger以外の要素でもイベント発火されてしまう)にならないため、DropdownTriggerにtooltip表示できるようにprops追加し条件付きでtooltipでラップできるように修正しました

Use case

Dropdown/FilterDropdown menuのtriggerがアイコンのみの場合、操作を可視ラベルとして表示したい

FilterDropdown DropdownMenu
FilterDropdownのtriggerがアイコンのみでツールチップで可視ラベルを表示されているキャプチャ DropdownMenuのtriggerがアイコンのみでツールチップで可視ラベルを表示されているキャプチャ
開いてるFilterDropdownのtriggerがアイコンのみでツールチップで可視ラベルを表示されているキャプチャ 開いてるDropdownMenuのtriggerがアイコンのみでツールチップで可視ラベルを表示されているキャプチャ

変更内容

  • 条件付きでDropdownTriggerをtooltipでラップできるためにtooltipのprops追加
  • DropdownMenuButton / FilterDropdown のtriggerがアイコンのみの場合tooltipで操作のラベルを表示するように修正

確認方法

Storybook や Chromatic で確認いただけます
プロダクト側で確認済みです

@daiHash daiHash added the WIP label Jan 16, 2025
@daiHash daiHash self-assigned this Jan 16, 2025
Copy link

pkg-pr-new bot commented Jan 16, 2025

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5291

commit: 86709fa

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant