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(popover): render arrow above backdrop #28986

Merged
merged 8 commits into from
Feb 7, 2024
Merged

fix(popover): render arrow above backdrop #28986

merged 8 commits into from
Feb 7, 2024

Conversation

thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Feb 6, 2024

Issue number: resolves #28985


What is the current behavior?

When a popover is being rendered in iOS mode, the arrow renders under the backdrop.

Screenshot 2024-02-06 at 11 59 58 AM

What is the new behavior?

  • The arrow renders at the same level as the content.

Screenshot 2024-02-06 at 11 59 51 AM

Does this introduce a breaking change?

  • Yes
  • No

Other information

Credit Sahil-B07 for providing the fix. A new PR had to be created in order to update snapshots.


Co-authored-by: Sahil Bhor [email protected]

@github-actions github-actions bot added the package: core @ionic/core package label Feb 6, 2024
@thetaPC thetaPC marked this pull request as ready for review February 6, 2024 21:28
@thetaPC thetaPC requested review from liamdebeasi and a team as code owners February 6, 2024 21:28
@@ -35,6 +35,7 @@
height: 10px;

overflow: hidden;
z-index: 12;
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we add a comment here describing why this is necessary? Also is there a reason why we specifically chose 12?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Linking my comment in this thread since it's related.

* The value is set to 11 since it's the minimum value that
* will allow the arrow to render above the backdrop.
*/
z-index: 11;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I switched it from 12 to 11. I was on the fence between these. I had 12 because it was one value above the minimum. This would allow for one pixel buffer just in case. But the more I thought about it, the more I don't think we need the buffer.

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Looks good! Be sure to give co-author credit when merging.

@thetaPC thetaPC added this pull request to the merge queue Feb 7, 2024
Merged via the queue into main with commit 946b488 Feb 7, 2024
46 checks passed
@thetaPC thetaPC deleted the FW-4502 branch February 7, 2024 17:42
@thetaPC thetaPC restored the FW-4502 branch February 7, 2024 18:38
liamdebeasi pushed a commit that referenced this pull request Feb 7, 2024
Issue number: resolves #28985

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

<!-- Please describe the current behavior that you are modifying. -->

When a popover is being rendered in iOS mode, the arrow renders under
the backdrop.

![Screenshot 2024-02-06 at 11 59
58 AM](https://github.com/ionic-team/ionic-framework/assets/13530427/b55f8868-4de3-4f52-8e79-650a40f8d5bd)

<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The arrow renders at the same level as the content.

![Screenshot 2024-02-06 at 11 59
51 AM](https://github.com/ionic-team/ionic-framework/assets/13530427/05c214ee-6ba7-4cad-b00e-9668dca23f73)

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Credit [Sahil-B07](https://github.com/Sahil-B07) for providing the
[fix](#28430). A new
PR had to be created in order to update snapshots.

---------

Co-authored-by: Sahil Bhor <[email protected]>
Co-authored-by: ionitron <[email protected]>
@thetaPC thetaPC deleted the FW-4502 branch February 7, 2024 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: Popover arrow is rendered under the backdrop
3 participants