Add delay to admin menu arrow's disappearance

[pathartl]

Currently if you hover over an item in the admin's left sidebar, the submenu will show after a few hundred milliseconds. The arrow/triangle next to the submenu will appear at the exact same time. However, on leaving the hover state, the arrow disappears right away while the submenu will stay around for a few hundred milliseconds and then disappear.

I would assume this is because the arrow is bound to the menu item, and not the submenu. Not really sure what the solution would be to this, but I see it as a bug in code that's improves UX.

[coreymcollins]

Changing active submenu arrow to appear based on parent menu class rather than hover state

[afercia]

Please consider any change here should also take into account the focus style and the alternate color schemes in the Sass files.

[coreymcollins]

Update arrow for for other admin color settings including RTL display

[coreymcollins]

Thanks for the mindful eye, @afercia! Here's an example using the Sunrise color scheme in both LTR and RTL displays.

LTR:

RTL:

[dwainm]

HI @coreymcollins. I'm unable to apply this patch for testing purposes. Would you mind checking if it can be applied?

I'm using grunt patch command on Varying Vagrant Vagrants.

[coreymcollins]

@dwainm This is working fine for me. I applied 34088.1.diff to my branch in Cornerstone and was able to see the changes reflected. I'm not a VVV user, so I can't verify what may be going on there.

Would love for some others to test this as well to see if there may be something funky going on. Thanks!

[darrenlambert]

I tried applying the patch and got errors.

For each CSS line update I get the error

error: css/admin-menu-rtl.css: No such file or directory

The problem is the format of the patch file, it seems.

The file paths in patch 34088.1 start <code>wp-admin...</code>
When they should start <code>/src/wp-admin...</code>

I updated the paths, and was able to apply the patch.
I've attached 34088.2.diff

[darrenlambert]

Corrected file paths

[afercia]

Patches should be created from and applied to an install from the trunk repo, which doesn't have .rtl or minified files. They're created later during the build process :) See
​https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/#zip-file-svn-or-git
See also the other related sections in the Handbook.

[abefumito]

I created 34088.3.diff​ from src. I tested it works well.

[jmdarts007]

well pooling test

[salcode]

At WordCamp Philly 2017 Contributor Day we reviewed patch 34088.3.diff on a LTR install and confirmed the proper behavior on:

• Chrome Mac Version 61.0.3163.100
• Safari Version 11.0 (11604.1.38.1.7)
• Firefox Mac 56.0
• Internet Explorer 11 on Windows 7
• Internet Explorer 8 on Windows 7

To clarify "proper behavior", once the cursor left the parent item both the sub-menu and the arrow disappear without any delay.

Our group included: @rynonet, @pbarthmaier, @koakekuna

[riccardodicurti]

Hi, I created 34088.4.diff​ updating the 34088.3.diff​ with the CSS selectors of WordPress version 6.2-alpha-54642-src.

[matteoenna]

Hi, i have tested this task during WordCamp Italia 2022.
Diff version: 34088.4.diff
For my, is OK.

• Chrome 105.0.5195.125
• Gnu Linux Fedora
• screen: 1280x800

[ralessio]

Hi, I have tested it and works for me.

• Chrome 107.0.5304.107

## Summary

• tie the admin flyout arrow to the opensub state instead of transient :hover / :focus-within
• keep the folded-menu arrow aligned with the same open-state selector
• update the shared admin color-scheme Sass source so alternate color schemes use the same arrow behavior

## Testing

• npx grunt precommit:css
• vendor/bin/phpcbf --standard=phpcs.xml.dist <touched css/scss files>
• vendor/bin/phpcs --standard=phpcs.xml.dist <touched css/scss files>
• local browser verification on http://localhost:8889/wp-admin/ with admin / password: forced opensub state in the modern color scheme keeps the arrow visible with matching submenu color even when the menu item itself is not hovered

## Notes

• local Docker verification needed a temporary LOCAL_DB_VERSION=5.7 override because this checkout's existing MySQL volume is incompatible with the default 8.4 image in .env after an older fast shutdown.

Supersedes #12057 to retrigger CI on the same patch from a fresh branch.

## Summary

• tie the admin flyout arrow to the opensub state instead of transient :hover / :focus-within
• keep the folded-menu arrow aligned with the same open-state selector
• update the shared admin color-scheme Sass source so alternate color schemes use the same arrow behavior

## Testing

• npx grunt precommit:css
• vendor/bin/phpcbf --standard=phpcs.xml.dist <touched css/scss files>
• vendor/bin/phpcs --standard=phpcs.xml.dist <touched css/scss files>
• local browser verification on http://localhost:8889/wp-admin/ with admin / password

[arkaprabhachowdhury]

Opened [PR #12063](​https://github.com/WordPress/wordpress-develop/pull/12063) to address this ticket. Supersedes #12057 to retrigger CI on the same patch from a fresh branch. Summary - tie the admin flyout arrow to the opensub state instead of transient :hover / :focus-within - keep the folded-menu arrow aligned with the same open-state selector - update the shared admin color-scheme Sass source so alternate color schemes use the same arrow behavior Testing - npx grunt precommit:css - vendor/bin/phpcbf --standard=phpcs.xml.dist <touched css/scss files> - `vendor/bin/phpcs --standard=ph The PR includes focused regression coverage, and its validation details are recorded in the PR description.

I picked this up because the ticket describes a concrete core behavior or edge case that remains relevant in current WordPress. The proposed change is intentionally scoped to the ticket and is submitted here for code review, with the technical discussion remaining on this ticket.