-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Data views list layout: Re-organise actions display #63043
Conversation
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: +73 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
This seems overall a great step forward. The only one that gives me pause is this one: In this one, the actions on the right don't feel well-placed. Is there a way we can keep those right-most actions vertically centered according to the thumbnail? The description would need to not go to the right-most edge, but that seems an improvement regardless. |
I couldn't think of a way that doesn't result in other issues. Leaving the actions in their own column will result in the 'jump' issue described above. I tried absolutely positioning the actions, but that causes them to overlap long titles and fields which seems undesirable to me. We also need to consider that in the future there might be data view consumers that do not employ a thumbnail in List layout. That's why aligning to the title makes a bit more sense to me. A different avenue to explore might be tweaking the metrics a bit, to make this placement feel a bit more intentional. Perhaps increasing the spacing: ![]() Figma here if you'd like to try some options. |
Thanks for considering the keyboard navigation in your test instructions :) There're some e2e tests for that but it's still nice to do a manual one in case there's something not covered. I've also done it myself and it's working properly. The changes improve the experience, and it's working as expected. I can take a deeper look from a code point of view when design direction is confirmed. I'll be AFK soon, so don't wait for my approval if I'm not around — my major concern here is that keyboard navigation still works fine. |
The author field will also soon display the users avatar (#63142), which further indicates we should tweak the layout slightly. I'll work on an update soon. |
Connecting another dot; the status field may also be updated to include the icon: #63199. |
Keyboard navigation still works correctly as before, and I don't think it would be difficult to resolve the e2e test failure. I think the accessibility issue that needs to be resolved here is applying element roles properly. trunkElements in a row are divided into grid cells according to their role.
This PRThere is only one grid cell in a row, and grid cells are nested.
Is there any way to improve the layout while still maintaining the original roles and hierarchy? |
Thank you for pointing that out. It demonstrates another issue on trunk that this PR fixes; clicking around the action buttons will not select the row, despite the hover style suggesting it would: click.mp4That said, I'm not sure it's possible to retain the layout and avoid incorrect nesting of roles. This could suggest that absolutely positioning the actions is the way to go after all. I'll probably spin up a different PR to try that. |
Closing due to #63299 being merged. |
What?
This PR attempts to address two issues in list layout.
The first is the awkward alignment of the title when all fields are toggled off:
The second is the reflow that occurs when hovering/selecting a row that contains a field with a very long value, or just many fields:
jump.mp4
How?
Currently the title + fields are in one column, and the actions are in another. When the actions column appears, the title + fields column gets squished to accommodate it causing wrapping.
In this PR I've re-organised the markup so that the title and actions are in a row, with fields beneath. When the actions are revealed the title is squished, but truncated to avoid reflow.
To accomplish this I had to increase the height of the title slightly to align with the action icons. This also increased the height of the title + fields container in a two-row configuration by 4px, so the thumbnail was increased to match. This structure is better described in an image:
The result is that regardless of how many fields are visible (or how long the field values are), alignment is maintained:
Testing Instructions