-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Dataviews List: Update item layout #63299
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: +229 B (+0.01%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works well.
background: #f8f8f8; | ||
padding-left: $grid-unit-10; | ||
margin-right: $grid-unit-30; | ||
box-shadow: -12px 0 8px 0 #f8f8f8; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we substitute a few variables here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We have an outstanding todo item for this gray. It will mean expanding the existing scale a bit, so needs a dedicated PR.
I'm not sure variables really necessary for shadows.
padding-right: 0; | ||
&.is-selected { | ||
.dataviews-view-list__item-actions { | ||
background-color: rgb(247 248 255); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a 'solid' version of rgba(var(--wp-admin-theme-color--rgb), 0.04)
, which should probably be a variable too given it's increasing use. I'd lean towards tackling this together, separately.
I'm going to merge this since it fixes some troublesome bugs. We can circle back to explore the variables separately. |
Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
Alternative to #63043.
What?
This PR addresses three issues in the List layout appearance / behavior.
Issue 1
When all fields are toggled off, the alignment is broken:
Issue 2
Awkward reflow occurs when hovering/selecting a row that contains a field with a very long value, or just many fields:
jump.mp4
Issue 3
Clicking around the action buttons will not select the row, despite the hover style suggesting it would:
click.mp4
How?
Here's the result:
update.mp4
Testing Instructions