ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show toolbar tooltips on hover only, hide when dropdowns are open (#5109)

Browse Source 
* Show toolbar tooltips on hover only, hide when dropdowns are open

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
2025-01-18 05:22:22 -05:00
committed by GitHub
parent df81b76b8b
commit 9a537da183
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 44 KiB

6
src/Toolbar.tsx
View File

@ -210,6 +210,7 @@ export function Toolbar({
<ToolbarItemTooltip <ToolbarItemTooltip
itemConfig={maybeIconConfig[0]} itemConfig={maybeIconConfig[0]}
configCallbackProps={configCallbackProps} configCallbackProps={configCallbackProps}
className="ui-open:!hidden"
/> />
</ActionButtonDropdown> </ActionButtonDropdown>
) )
@ -277,9 +278,11 @@ export function Toolbar({
const ToolbarItemTooltip = memo(function ToolbarItemContents({ const ToolbarItemTooltip = memo(function ToolbarItemContents({
itemConfig, itemConfig,
configCallbackProps, configCallbackProps,
className,
}: { }: {
itemConfig: ToolbarItemResolved itemConfig: ToolbarItemResolved
configCallbackProps: ToolbarItemCallbackProps configCallbackProps: ToolbarItemCallbackProps
className?: string
}) { }) {
const { state } = useModelingContext() const { state } = useModelingContext()
@ -305,8 +308,9 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
? ({ '-webkit-app-region': 'no-drag' } as React.CSSProperties) ? ({ '-webkit-app-region': 'no-drag' } as React.CSSProperties)
: {} : {}
} }
hoverOnly
position="bottom" position="bottom"
wrapperClassName="!p-4 !pointer-events-auto" wrapperClassName={'!p-4 !pointer-events-auto ' + className}
contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch" contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
> >
<div className="rounded-top flex items-center gap-2 pt-3 pb-2 px-2 bg-chalkboard-20/50 dark:bg-chalkboard-80/50"> <div className="rounded-top flex items-center gap-2 pt-3 pb-2 px-2 bg-chalkboard-20/50 dark:bg-chalkboard-80/50">