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.

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

Color Picker: Match figma metrics. #35039

Merged
merged 1 commit into from
Sep 23, 2021
Merged

Color Picker: Match figma metrics. #35039

merged 1 commit into from
Sep 23, 2021

Conversation

jasmussen
Copy link
Contributor

Description

Followup to #34598. This one changes the handle to use a box-shadow with a fallback transparent outline for Windows High Contrast mode. This lets us match the Figma specs:

Screenshot 2021-09-22 at 13 48 42

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

border: ${ CONFIG.borderWidthFocus } solid rgba( 255, 255, 255, 0 );
box-shadow: inset 0px 0px 0px ${ CONFIG.borderWidthFocus } #ffffff;
border: none;
box-shadow: 0 0 2px 0 rgba( 0, 0, 0, 0.25 );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to use ${ CONFIG.radiusBlockUi } (2px) instead of hardcoded 2px?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! I'll make that happen.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, sorry no, that makes sense for replacing border-radius: 2px, but not for the shadow. We want a separate box shadow value for this one, something a la ${ CONFIG.elevation1 } or something.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, in that case feel free to merge the PR 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Can I get a green check?

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome improvement it also fixes the rendering glitches we had on chrome 👍

Copy link
Contributor

@gwwar gwwar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't see any regressions to the color picker while testing 👍

@jasmussen jasmussen merged commit 2b834d7 into trunk Sep 23, 2021
@jasmussen jasmussen deleted the fix/picker-handle branch September 23, 2021 06:26
@github-actions github-actions bot added this to the Gutenberg 11.7 milestone Sep 23, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Component System WordPress component system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants