Skip to content

Add support for positioning popover on multiple sides#3550

Merged
Simrayz merged 1 commit intomasterfrom
feat/support-multiple-sides-for-popover
Sep 22, 2025
Merged

Add support for positioning popover on multiple sides#3550
Simrayz merged 1 commit intomasterfrom
feat/support-multiple-sides-for-popover

Conversation

@Simrayz
Copy link
Copy Markdown
Contributor

@Simrayz Simrayz commented Sep 19, 2025

Scope and purpose

Follow up to #3458, and necessary to position popovers in #3531.

  • This PR adds support for positioning the popover on multiple sides: left, top, right and bottom. The side is configured with the data-side attribute, as described in the styleguide.
  • The styleguide has been updated with the new data-side attribute, and the example was updated to use a data-side="right" data-align="start" configuration.
  • data-align="center" was removed, as it is not likely to be used, and to simplify the code for multiple sides.
  • _popover.scss was refactored to be more readable and reduce unnecessary nesting. It should be easier to follow the logic now.

I'm a bit uncertain if putting the data-* attributes on the .popover container was the best idea (the styles become a bit convoluted). We might want to consider moving data-side, data-align and with-arrow to the .popover-content container instead. Alternatively, combine the attributes into data-position="bottom-start" etc. However, this requires refactoring a lot of files, and would cause conflicts with #3531.

Screenshots

Start End
Bottom image image
Left image image
Top image image
Right image image

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to NAV can be found in the
Hacker's guide to NAV.

  • Added a changelog fragment for towncrier
  • Added/amended tests for new/changed code
  • Added/changed documentation
  • Linted/formatted the code with ruff, easiest by using pre-commit
  • The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See https://cbea.ms/git-commit/
  • This pull request is based on the correct upstream branch: For a patch/bugfix affecting the latest stable version, it should be based on that version's branch (<major>.<minor>.x). For a new feature or other additions, it should be based on master.
  • If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
  • If this results in changes in the UI: Added screenshots of the before and after
  • If this adds a new Python source code file: Added the boilerplate header to that file

@sonarqubecloud
Copy link
Copy Markdown

@Simrayz Simrayz requested a review from a team September 19, 2025 10:43
@github-actions
Copy link
Copy Markdown

Test results

    27 files      27 suites   44m 29s ⏱️
 2 518 tests  2 518 ✅ 0 💤 0 ❌
18 534 runs  18 534 ✅ 0 💤 0 ❌

Results for commit bedf67f.

@codecov
Copy link
Copy Markdown

codecov bot commented Sep 19, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.09%. Comparing base (c399d07) to head (bedf67f).
⚠️ Report is 339 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #3550   +/-   ##
=======================================
  Coverage   62.09%   62.09%           
=======================================
  Files         611      611           
  Lines       44865    44865           
  Branches       43       43           
=======================================
  Hits        27861    27861           
  Misses      16994    16994           
  Partials       10       10           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Simrayz Simrayz merged commit 0272261 into master Sep 22, 2025
21 checks passed
@Simrayz Simrayz deleted the feat/support-multiple-sides-for-popover branch September 22, 2025 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants