search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
281 stars 77 forks source link

[Panel] popover in panel constrained to panel content #10180

Closed COV-GIS closed 2 weeks ago

COV-GIS commented 2 weeks ago

Check existing issues

Actual Behavior

As of 2.12.0 a popover in a panel is constrained to the content area of the panel excluding the title and footer areas. This can cause unnecessary y overflow/scrolling and the popup not aligning with the header action if trigger thereby.

2.12.0

image

2.11.1

image

This is particularly an issue with floating panels that may not have all the necessary height in the content area.

image

image

Expected Behavior

Popover should use the entire panel.

image

Reproduction Sample

https://codepen.io/COV-GIS/pen/RwzBgGW

Reproduction Steps

  1. Switch between the 2.11.1 and 2.12.0 resource tags.
  2. Click on the gear iconed action.

Reproduction Version

2.12.0

Relevant Info

No response

Regression?

2.11.1

Priority impact

impact - p2 - want for an upcoming milestone

Impact

It would be nice to have this fixed sooner than later.

Calcite package

Esri team

N/A

geospatialem commented 2 weeks ago

@COV-GIS adding overlay-positioning="fixed" to the popover should mitigate the above: https://codepen.io/geospatialem/pen/vYqaeMo

<calcite-popover auto-close closable heading="Options" scale="s" overlay-positioning="fixed" placement="bottom-end">
    ...
</calcite-popover>
driskull commented 2 weeks ago

This is due to the setting of the position:relative in this PR: https://github.com/Esri/calcite-design-system/pull/10117

The way to avoid this is to move the popover outside of the panel. Like so: https://codepen.io/driskull/pen/yLdqPPq?editors=1000

COV-GIS commented 2 weeks ago

Thanks @geospatialem and @driskull.

I have tried to avoid using fixed positioning unless absolutely necessary. But looks like that will have to be the way to go in this case. Not practical to create a separate popover component to create outside the panel on account of my component having the panel element itself the root of the vnode.

Closing.

Can you answer a quick unrelated question @driskull? Why is panel (and by extension dialog) footer now focusable? And only by clicking the footer or heading; but not by tabbing. If it needs to be for accessibility or the like it should also include the top focus:

image

macandcheese commented 2 weeks ago

@COV-GIS We should be improving the focus behavior soon, you can track in this related issue: https://github.com/Esri/calcite-design-system/issues/10022