Calcite-components: Bug: popper content not positioned outside panel container

[jcfranco]

Actual Behavior

The popper content from some components is not positioned correctly when placed inside a panel.

Note: this is likely to happen outside of calcite-panel scenarios

Expected Behavior

Popper content to be positioned outside of calcite-panel.

Reproduction Steps or Sample

https://codepen.io/jcfranco/pen/mdRgmzB?editors=1000

Note that the above codepen is non-exhaustive and only shows this issue w/ calcite-dropdown and calcite-tooltip

Relevant Info

_Version_: @esri/[email protected]

• [x] CDN
• [ ] NPM package

Setting strategy: "fixed" when creating poppers seems to fix the issue, but needs further testing/review.

cc @AdelheidF

[driskull]

@jcfranco do you think we should just expose the strategy setting on every component using popper? We don't always want it fixed otherwise it won't be hidden on internal scrolls like below.

Possible fixes:

1. expose strategy as defined in Popper and if more strategies are added we can expose them.
2. Expose boolean 'fixed' prop.

[driskull]

current:

[driskull]

related to #1913

[jcfranco]

@driskull I like option 2. Could we use another name to make it easier on users to know when to enable? WDYT?

[driskull]

Could we use another name to make it easier on users to know when to enable? WDYT?

Yes, but not appendToBody because it doesn't do that. What are you proposing?

I like strategy because it aligns with popper and if they add another option.

[driskull]

@paulcpederson @caripizza @macandcheese @bstifle ^

Do you have any opinions on the name? Trying to see if there's a name that ties in popover context. Make it easier to associate that it is for the popping content and not the component itself.

[paulcpederson]

That is a really hard concept to express succinctly in a prop! Maybe popup-positioning: "absolute" | "fixed"?

[macandcheese]

Yeah this is a tough one, ha. Kind of hard to sum up what the resultant change will be, maybe something like positioning-type, overflow-positioning?

Strategy does seem a little hard to parse initially, Popup-positioning is reasonable to me.

[jcfranco]

Throwing in a few more into the ring:

• overlayPositioning
• popperPositioning // Popper's term for poppable content; good if we used 'popper' in our doc (not the lib)
• openPositioning
• openingStrategy

Overall, I think all of the suggestions in this thread are more expressive than strategy by itself.

[driskull]

I'm good with overlayPositioning or popperPositioning. Overlay might be better if we want to not expose popper.

[AdelheidF]

I like openPositioning. Most users won't know what popper means and I don't think of overlay when opening a small dropdown. Popup is not being used anywhere else, I think.

[macandcheese]

To clarify, would this be a prop for all components that use popper? Combobox, Date, Modal (?), Popover, Tooltip, etc...

[driskull]

To clarify, would this be a prop for all components that use popper? Combobox, Date, Modal (?), Popover, Tooltip, etc...

Yes, that's the idea.

I like openPositioning. Most users won't know what popper means and I don't think of overlay when opening a small dropdown. Popup is not being used anywhere else, I think.

The only issue with 'open' is that some components use 'active', like dropdown.

[macandcheese]

overlayPositioning seems to work across multiple components, without the possible conflation with active mentioned above... I'm good with that.

[driskull]

I'm ok with 'openPositioning' if we rename all 'active' props to be 'open' :)

It creates more work but I think we aren't really consistent with open vs active on some of these.

[macandcheese]

For all popper / "overlay" components? That's a fine distinction to me... But we use it places like calcite-block too where it's never an overlay. I think we probably also need to refactor Alert to use popper now that I think of it.

[driskull]

But we use it places like calcite-block too where it's never an overlay. I think we probably also need to refactor Alert to use popper now that I think of it.

I don't think alert or block need to use popper.

[driskull]

Alert is always at the bottom and not tied to a reference element. It doesn't need any popper logic.

[jcfranco]

FWIW, block's design didn't include any overlay.

[macandcheese]

Agree with block, was an example of a non-floaty that had 'open' nomenclature.

Alert actually has some other positioning use-cases where Popper could help, I mentioned it because it could use "absolute" in addition to fixed, as that's often requested when folks want to put an alert in a modal. I'll open a separate issue for that as it's not related to the discussion here, but should use whatever the resultant feature is.

[driskull]

Closing. reopen if still an issue.