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

Popover: Ensure popovers consider border width's in their positioning. #23035

Merged
merged 1 commit into from
Jun 11, 2020

Conversation

shaunandrews
Copy link
Contributor

Currently, popovers are displayed 1px off the grid. This causes them to not line up with things like the block toolbar. Here's how it looks in master currently:
If you look closely, you'll notice that the left side of the popover is 1px off to the right from the left side of the toolbar.

Slice 1

This PR adjusts the margins of the popover component to use the grid SCSS variable and adds in the $border-width variable to account for the width of the borders. It ends up looking like this:

Slice 2

@github-actions
Copy link

github-actions bot commented Jun 9, 2020

Size Change: +1 B

Total Size: 1.13 MB

Filename Size Change
build/components/style-rtl.css 19.5 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.77 kB 0 B
build/block-directory/style-rtl.css 892 B 0 B
build/block-directory/style.css 892 B 0 B
build/block-editor/index.js 106 kB 0 B
build/block-editor/style-rtl.css 11.8 kB 0 B
build/block-editor/style.css 11.8 kB 0 B
build/block-library/editor-rtl.css 7.88 kB 0 B
build/block-library/editor.css 7.89 kB 0 B
build/block-library/index.js 127 kB 0 B
build/block-library/style-rtl.css 7.72 kB 0 B
build/block-library/style.css 7.72 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 195 kB 0 B
build/components/style.css 19.5 kB 0 B
build/compose/index.js 9.31 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.17 kB 0 B
build/edit-navigation/index.js 8.25 kB 0 B
build/edit-navigation/style-rtl.css 918 B 0 B
build/edit-navigation/style.css 919 B 0 B
build/edit-post/index.js 303 kB 0 B
build/edit-post/style-rtl.css 5.6 kB 0 B
build/edit-post/style.css 5.6 kB 0 B
build/edit-site/index.js 15.5 kB 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/index.js 9.34 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.8 kB 0 B
build/editor/style-rtl.css 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.64 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.3 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.41 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@MichaelArestad
Copy link
Contributor

Works like a charm on both 1x and retina using 🔥 🦊 latest. Tried at various viewport widths.

I did also look at the more menu on the block toolbar. It looks like maybe a similar issue.

On master:
image

On this branch (slightly better):
image

@jasmussen jasmussen self-requested a review June 10, 2020 07:48
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Beautiful. Thanks for this.

To me it seems to work as intended, and it's a vast improvement over what's shipping.

2x:

Screenshot 2020-06-10 at 09 47 17

Screenshot 2020-06-10 at 09 47 21

1x:

Screenshot 2020-06-10 at 09 47 56
Screenshot 2020-06-10 at 09 48 00

As far as I can tell, there isn't any subpixel positioning going on, only abs positioning:

Screenshot 2020-06-10 at 09 48 20

This might still align to the wrong pixel in cases of course, but it should align to the wrong whole pixel at least.

Furthermore, I believe that might be improved by #22640

@MichaelArestad
Copy link
Contributor

This might still align to the wrong pixel in cases of course, but it should align to the wrong whole pixel at least.

Agreed. I think this is good to go as is.

@shaunandrews shaunandrews merged commit 2e9db83 into master Jun 11, 2020
@shaunandrews shaunandrews deleted the fix/popover-margins branch June 11, 2020 02:28
@github-actions github-actions bot added this to the Gutenberg 8.4 milestone Jun 11, 2020
@ZebulanStanphill ZebulanStanphill added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Jun 11, 2020
This was referenced Jun 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants