GlobalStylesUI: Use --wpds-cursor-control design token for interact…#77335
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. |
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
I noticed that
.global-styles-ui-previewin style.scss does not appear to be used anywhere in the codebase and seems to be unused CSS. I still applied the token replacement.
This should be verified and cleaned up, probably in a separate PR.
| box-sizing: border-box; | ||
| // To round the outline in Windows 10 high contrast mode. | ||
| cursor: pointer; | ||
| cursor: var(--wpds-cursor-control); |
There was a problem hiding this comment.
There's another hardcoded pointer left in packages/global-styles-ui/src/preview-wrapper.tsx. If that cursor is still needed, it should be moved to a stylesheet and switched to var(--wpds-cursor-control).
| className={ | ||
| withHoverView | ||
| ? 'global-styles-ui-preview__content' | ||
| : undefined | ||
| } |
There was a problem hiding this comment.
This should be in modifier format (see CSS coding guidelines).
There was a problem hiding this comment.
Hey @mirka, thanks for reviewing the PR.
Are we going to #77335 (review) the unused class?
I was thinking of opening a separate PR for that and including a reference to this one in the description. Would that be okay?
This should be in modifier format (see CSS coding guidelines).
Apologies for the oversight. If I move the withHoverView check to the parent div, something like this:
<div
className={ clsx( 'global-styles-ui-preview__wrapper', {
'is-hoverable': withHoverView,
} ) }
style={ {
height: normalizedHeight * ratio,
} }
onMouseEnter={ () => setIsHovered( true ) }
onMouseLeave={ () => setIsHovered( false ) }
tabIndex={ -1 }
>I tested this on the site, and it works as expected. Would this approach be acceptable?
There was a problem hiding this comment.
Yes, sounds good for both points. Thanks!
#77335) * GlobalStylesUI: Use `--wpds-cursor-control` design token for interactive controls * GlobalStylesUI: Remove stylelint configuration for cursor control token * GlobalStylesUI: Add cursor control token to preview content styles * GlobalStylesUI: Move cursor control style to wrapper element Co-authored-by: R1shabh-Gupta <[email protected]> Co-authored-by: mirka <[email protected]>
alecgeatches
added
Global Styles
3 participants
What?
Part of #76221
Replaces hardcoded
cursor: pointerdeclarations in@wordpress/global-styles-uistylesheets withcursor: var(--wpds-cursor-control).Why?
cursor: pointerto use the design token for better maintenance.How?
cursor: pointerand usedcursor: var(--wpds-cursor-control)Testing Instructions
/wp-admin/site-editor.php).default(notpointer).Use of AI Tools
Use Claude Code to review code and create pull request description.