Add block-start and block-end positioning to PopoverMixin #5125
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
If possible, I would like to build out the visual-diffs in a separate PR. |
| @@ -53,14 +73,56 @@ export const PopoverMixin = superclass => class extends superclass { | |||
| :host([_opened]) { | |||
| display: inline-block; | |||
| } | |||
| :host([_location="block-start"]) { | |||
There was a problem hiding this comment.
These logical positioning terms are being used to align more closely with what the browser is doing, as well as to set us up for supporting other locations.
block-start -> top (this PR)
block-end -> bottom (this PR)
inline-start -> left (future PR)
inline-end -> right (future PR)
| } | ||
|
|
||
| .pointer { | ||
| clip: rect(-5px, 21px, 8px, -7px); |
There was a problem hiding this comment.
We were able to ditch some old pointer CSS with our fixed positioning. 🎉
| @@ -72,26 +134,37 @@ export const PopoverMixin = superclass => class extends superclass { | |||
| animation: var(--d2l-popover-animation-name, var(--d2l-popover-default-animation-name)) 300ms ease; | |||
| } | |||
| } | |||
|
|
|||
| :host([_offscreen]) { | |||
There was a problem hiding this comment.
As with fixed position dropdown, we position offscreen when the opener is scrolled out of view.
| } | ||
|
|
||
| _clearDismissible() { | ||
| #addRepositionHandlers() { |
There was a problem hiding this comment.
This code is basically copied from DropdownContentMixin. The only real difference is that we need to handle the opener IntersectionObserver here, since the opener could literally be any element, as compared to dropdown, where we do this wire-up in DropdownOpenerMixin.
| if (!this._dismissibleId) return; | ||
| clearDismissible(this._dismissibleId); | ||
| this._dismissibleId = null; | ||
| } | ||
|
|
||
| _focusContent(container) { | ||
| #constrainSpaceAround(spaceAround, spaceRequired, openerRect) { |
There was a problem hiding this comment.
This is basically adapted from DropdownContentMixin, except the boundary constraints aren't included here (yet), and align is changed to position span to align with what the browser is doing for positioning in the logical 3x3 grid.
| return this.shadowRoot.querySelector('.content-container'); | ||
| } | ||
|
|
||
| #getLocation(spaceAround, spaceAroundScroll, spaceRequired) { |
There was a problem hiding this comment.
This method basically defines where we will place the popover based on the specified preferred location, based on the space available in the viewport and document.
| return this.shadowRoot.querySelector('.pointer'); | ||
| } | ||
|
|
||
| #getPointerPosition(openerRect) { |
There was a problem hiding this comment.
This logic is almost exactly the same as DropdownContentMixin but I adjusted the calculation for the RTL align/span cases since I noticed they were not working quite right.
| return position; | ||
| } | ||
|
|
||
| #getPosition(spaceAround, openerRect, contentRect) { |
There was a problem hiding this comment.
This logic is the same as DropdownContentMixin, with some renaming.
| return position; | ||
| } | ||
|
|
||
| #getPositionXAdjustment(spaceAround, openerRect, contentRect) { |
There was a problem hiding this comment.
This logic is the same as DropdownContentMixin with some renaming.
| } | ||
|
|
||
| _renderPopover() { | ||
| const content = html`<div class="content"><slot></slot></div>`; | ||
| async #position(contentRect, options) { |
There was a problem hiding this comment.
This logic is the same as DropdownContentMixin with some renaming. Was also nice to ditch the non-fixed positioning logic.
GAUD-6456 (positioning)
GAUD-7121 (sizing)
GAUD-7120 (pointer)
This PR adds
block-start(above) andblock-end(end) positioning to thePopoverMixin. The fixed positioning logic was adapted fromDropdownContentMixin. It also adds sizing logic since that's necessary for the positioning calculations.It does not include
inline-start(left) andinline-end(right) positioning. That will be added in a future PR.The
PopoverMixindemo is not in ourindex.html. Here is a link to it.