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

[QUAR-706][BpkPopover & BpkInsetBanner] Add custom z-index value #3763

Merged
merged 2 commits into from
Mar 5, 2025

Conversation

kirstybryce
Copy link
Contributor

@kirstybryce kirstybryce commented Mar 4, 2025

JIRA: https://skyscanner.atlassian.net/browse/QUAR-706
Thread with context: https://skyscanner.slack.com/archives/C0JHPDSSU/p1740574285075669

When trying to use the BpkInsetBanner with CTA popover in the Banana booking panel page, there were 2 other backpack components on the page with higher z-index taking priority and preventing the popover of the inset banner from showing. To fix this we decided to add a custom z-index prop (zIndexCustom ) to the inset banner component that gets passed to the popover component (via zIndexValue prop). If a z-index value is provided then that can be used for the popover, otherwise the default z-index of 900 is used.

Before (default z-index: 900) After (custom z-index: 1100)
Screenshot 2025-03-04 at 14 13 07 Screenshot 2025-03-04 at 14 14 08

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@kirstybryce kirstybryce added the minor Non breaking change label Mar 4, 2025
@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3763 to see this build running in a browser.

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 4, 2025

Warnings
⚠️

Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?

⚠️

Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 2161628

@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3763 to see this build running in a browser.

@jronald01 jronald01 merged commit 75cc187 into main Mar 5, 2025
8 checks passed
@jronald01 jronald01 deleted the QUAR-706_Add-custom-z-index-value-for-BpkPopover branch March 5, 2025 11:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Non breaking change
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants