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

Fix: Button highlight popover overflow conflict with link popover #38771

Merged

Conversation

delowardev
Copy link
Contributor

@delowardev delowardev commented Feb 13, 2022

Fixes: #38339

Rendering button link popover in the global slot causing z-index conflict/overlapping issue with text highlight popover; Using block-toolbar slot solves the overlapping issue here.

Description

Testing Instructions

Screenshots

Before After
Screen Shot 2022-02-13 at 10 28 13 AM Screen Shot 2022-02-13 at 10 28 00 AM

Types of changes

Bug fix

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).
  • I've updated related schemas if appropriate.

@delowardev delowardev force-pushed the fix/button-highlight-popover-overlap branch from 40ca0d1 to 6c7e1f5 Compare February 13, 2022 05:13
@ndiego
Copy link
Member

ndiego commented Feb 25, 2022

Just tested and works as expected, thanks for the PR @delowardev!

@Mamaduka and @ntsekouras, whenever you have a second, can I get a sanity check on this? Just want to make sure the use of __unstableSlotName is the direction we want to go here.

@delowardev
Copy link
Contributor Author

(Just for the context) This bug appeared after #34956. Here the block tools popover slot had changed, but the button link popover was left in the previous slot position which created z-index conflict.

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Thanks for the PR and the context about the issue @delowardev!

packages/block-library/src/button/edit.js Outdated Show resolved Hide resolved
@ntsekouras ntsekouras requested a review from ellatrix March 1, 2022 11:19
Copy link
Member

@ellatrix ellatrix left a comment

Choose a reason for hiding this comment

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

Makes sense to me!

@ntsekouras ntsekouras merged commit 6be0679 into WordPress:trunk Mar 1, 2022
@github-actions github-actions bot added this to the Gutenberg 12.8 milestone Mar 1, 2022
@priethor priethor added [Type] Bug An existing feature does not function as intended [Block] Buttons Affects the Buttons Block labels Mar 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Buttons: Highlight Color View and Link Control are overlapping
5 participants