Fix the usage of dataframe column menu in dialog #10359
Conversation
There was a problem hiding this comment.
This PR also applies two minor styling improvements. Use rem size for top margin, Move border to the inner element of the column menu (-> works better with the rounding of theming)
e2e_playwright/shared/app_utils.py
Outdated
| page.wait_for_function(check_script, arg=font_family, timeout=timeout) | ||
|
|
||
|
|
||
| def is_element_in_bounding_box_of( |
There was a problem hiding this comment.
nit: is_element_in_bounding_box_of -> is_child_bounding_box_inside_parents
and I would probably swap the two arguments, child first and then the parent because the child element is mentioned in the function name first, too
e2e_playwright/st_dialog_test.py
Outdated
| column_menu = app.get_by_test_id("stDataFrameColumnMenu") | ||
| expect(column_menu).to_be_visible() | ||
| expect(column_menu).to_be_in_viewport() | ||
| assert is_element_in_bounding_box_of(df_element, column_menu) |
There was a problem hiding this comment.
nit: should we have a screenshot test for the open menu inside of dialogs as well? Checking the bounding box is great, but it could be inside of the bounding box and still look weird, right?
There was a problem hiding this comment.
that was the first version, but I decided against screenshots since I don't want to spread out screenshots too much, and we already have a screenshot tests for column menu within dataframe in the normal dataframe tests.
The dataframe column menu is broken when used in dialog or popover:  The reason is that the `position: fixed` doesn't work in this context since the dialog uses a transform -> which influences the position fixed. To fix this, we are putting the column menu inside the dataframe portal div that is also used for the cell overlays. - Closes #10357 - Added e2e test --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
Describe your changes
The dataframe column menu is broken when used in dialog or popover:
The reason is that the
position: fixeddoesn't work in this context since the dialog uses a transform -> which influences the position fixed. To fix this, we are putting the column menu inside the dataframe portal div that is also used for the cell overlays.GitHub Issue Link (if applicable)
st.dataframeColumn Menu Misalignment Insidest.dialog#10357Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.