vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

http://clarity.design

MIT License

6.43k stars 763 forks source link

fix(angular:popover): keeping positioning in the viewport #6586

Closed bbogdanov closed 2 years ago

bbogdanov commented 2 years ago

Closes #6465

Signed-off-by: Bogdan Bogdanov bbogdanov@vmware.com

PR Checklist

Please check if your PR fulfills the following requirements:

[ ] Tests for the changes have been added (for bug fixes / features)
[ ] Docs have been added / updated (for bug fixes / features)
[ ] If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] clarity.design website / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

6465

What is the new behavior?

The position operators of the popup manages to keep the popup in the viewport and not cut the content

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other info

https://github.com/vmware/clarity/blob/c3736a37bea7e12a43d2ed097870beb5be62c9e8/projects/angular/src/utils/popover/providers/popover-position.service.ts#L92 This should be able to actually fix the issue but the problem is that we cannot get to this if because of https://github.com/vmware/clarity/blob/c3736a37bea7e12a43d2ed097870beb5be62c9e8/projects/angular/src/data/datagrid/datagrid-filter.ts#L107

Even that I introduced a new else if that checkes the ClrAxis.Vertical and 0 > horizontalOffset it doesn't solve the problem. It would require some changes in here as well https://github.com/vmware/clarity/blob/c3736a37bea7e12a43d2ed097870beb5be62c9e8/projects/angular/src/utils/popover/providers/popover-position.service.ts#L188 And that will lead to eventually make changes https://github.com/vmware/clarity/blob/c3736a37bea7e12a43d2ed097870beb5be62c9e8/projects/angular/src/utils/popover/position-operators.ts#L88 which is what I did.

netlify[bot] commented 2 years ago

✔️ Deploy Preview for zzz-angular-clarity-design-old ready!

🔨 Explore the source changes: bc09ed6bb09b6c7adf8d1e8b476c629f8c71535d

🔍 Inspect the deploy log: https://app.netlify.com/sites/zzz-angular-clarity-design-old/deploys/61eabacf4746f000081be8bc

😎 Browse the preview: https://deploy-preview-6586--zzz-angular-clarity-design-old.netlify.app