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.

Sign up for GitHub

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

Jump to bottom

DataViews List Layout: enhance hover styles to include expanded button state #69571

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

DataViews List Layout: enhance hover styles to include expanded button state #69571

wants to merge 1 commit into from
+1 −1

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Mar 14, 2025 •
edited
Loading

What?

Closes #69570

This PR fixes a bug where the Action Menu shifts layout and the Trigger Button disappears when the cursor moves out of the browser window after expanding the menu.

Why?

  1. When the cursor leaves the window, the Trigger Button disappears, making the Menu look orphaned and difficult to trace.
  2. Users with multiple displays may frequently experience layout shifts when moving the cursor between windows, leading to an unpolished experience.

How?

The CSS rule is updated to ensure the menu behaves consistently when expanded, just as it does when the corresponding item is selected or hovered.

&:where(.is-selected, .is-hovered, :focus-within, :has(button[aria-expanded="true"])) {

Testing Instructions

  1. Navigate to Appearance -> Editor -> Pages.
  2. Make sure that the data is displayed in List Layout.
  3. Click the Actions button and open the menu.
  4. Move the cursor out of the window or to a different display.
  5. Confirm that there's no layout shift and trigger buttons remain visible as expected.

Testing Instructions for Keyboard

Same.

Screencast

fix

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review March 14, 2025 08:16
@github-actions GitHub Actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@yogeshbhutkar yogeshbhutkar force-pushed the fix-69570/dataviews-list-popover branch from 0c8c16f to 93d3f3b Compare March 18, 2025 08:28
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Package] DataViews /packages/dataviews labels Mar 19, 2025
@yogeshbhutkar
Copy link
Contributor Author

yogeshbhutkar commented Mar 24, 2025 •
edited
Loading

Hi @t-hamano,

This PR fixes a bug where, if a trigger uses the hover effect, moving the cursor out of the browser window causes the trigger to disappear while the popover shifts to the right, appearing as an orphan.

To resolve this, the PR introduces styles that ensure trigger buttons remain visible when the popover is open so that the popover neither shifts nor looks orphaned and hard to trace back.

Could you please review the proposed changes?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Package] DataViews /packages/dataviews [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
2 participants
@yogeshbhutkar @t-hamano