feat: filter popover: flip placement above the trigger row when bottom-anchored (#912)#915
Open
frano-m wants to merge 1 commit into
Open
feat: filter popover: flip placement above the trigger row when bottom-anchored (#912)#915frano-m wants to merge 1 commit into
frano-m wants to merge 1 commit into
Conversation
…m-anchored (#912) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Filter popover implementation to use MUI Popper (Popper.js) so the filter panel can flip above the trigger row when there isn’t enough space below, and introduces shared popper state/transition utilities to support this across menu vs drawer surfaces.
Changes:
- Migrates
FilterfromPopover(anchorPosition) toPopperwith flip/offset modifiers and placement-aware transitions. - Introduces a reusable
PopperProviderfor open/anchor state, plus a local backdrop and Escape-to-close hook. - Refactors shared MUI helper constants to
*_PROPS.*patterns (e.g.,PAPER_PROPS.VARIANT.*,POPPER_PROPS.PLACEMENT.*).
Reviewed changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/common/mui/popper.ts | Adds standardized Popper placement constants (POPPER_PROPS.PLACEMENT.*). |
| src/styles/common/mui/paper.ts | Refactors paper variants into PAPER_PROPS.VARIANT.*. |
| src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.tsx | Removes explicit transitionDuration now that transition timeout is centralized. |
| src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/constants.ts | Updates paper variant usage to PAPER_PROPS.VARIANT.MENU. |
| src/components/Filter/components/VariableSizeList/VariableSizeList.tsx | Disables overscroll behavior on the list root. |
| src/components/Filter/components/Filters/stories/filters.stories.tsx | Adjusts Storybook layout to better exercise bottom-anchored flipping. |
| src/components/Filter/components/FilterRange/filterRange.styles.ts | Simplifies drawer-surface CSS structure. |
| src/components/Filter/components/FilterMenu/filterMenu.styles.ts | Imports FilterProps from the new shared types file. |
| src/components/Filter/components/Filter/types.ts | Extracts FilterProps into a dedicated types module. |
| src/components/Filter/components/Filter/hooks/UseCloseOnEscape/types.ts | Adds prop types for the Escape-close hook. |
| src/components/Filter/components/Filter/hooks/UseCloseOnEscape/hook.ts | Adds capture-phase Escape handler with propagation stop. |
| src/components/Filter/components/Filter/filter.tsx | Replaces Popover with Popper + Backdrop + new transition wiring. |
| src/components/Filter/components/Filter/filter.styles.ts | Updates styling for Popper + paper behavior across surfaces. |
| src/components/Filter/components/Filter/components/Popper/constants.ts | Defines Popper placement + flip/offset modifiers for Filter popper. |
| src/components/Filter/components/Filter/components/MenuTransition/types.ts | Types for placement-aware Grow transition wrapper. |
| src/components/Filter/components/Filter/components/MenuTransition/menuTransition.tsx | Adds placement-driven transformOrigin Grow transition. |
| src/components/Filter/components/Filter/components/MenuTransition/constants.ts | Maps placement → transformOrigin values. |
| src/components/Filter/components/Filter/components/DrawerTransition/types.ts | Types for drawer-surface Slide transition wrapper. |
| src/components/Filter/components/Filter/components/DrawerTransition/drawerTransition.tsx | Refactors drawer transition component implementation. |
| src/components/Filter/components/Filter/components/DrawerTransition/constants.ts | Centralizes Slide props/timeouts for drawer transition. |
| src/components/Filter/components/Filter/components/Backdrop/types.ts | Defines Backdrop prop typing for Filter usage. |
| src/components/Filter/components/Filter/components/Backdrop/constants.ts | Sets Backdrop transition slotProps. |
| src/components/Filter/components/Filter/components/Backdrop/backdrop.tsx | Adds portaled backdrop and Escape-to-close wiring. |
| src/components/Filter/components/Filter/components/Backdrop/backdrop.styles.ts | Styles the transparent backdrop and disables overscroll. |
| src/components/common/Popper/provider/types.ts | Defines context/provider types for popper open/anchor state. |
| src/components/common/Popper/provider/provider.tsx | Implements PopperProvider state management (anchorEl/open). |
| src/components/common/Popper/provider/hook.ts | Adds usePopper context hook. |
| src/components/common/Popper/provider/context.ts | Creates Popper context with default values. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #912.
Popover(anchor-position) to MUIPopper(Popper.js) so the popover flips above the trigger row when there isn't enough room below — keeping the selected filter label visible. Default placementbottom-start, fallbackstop-startthenright.PopperProvider(src/components/common/Popper/provider/) for popper open/anchor state, a localBackdrop(Popper doesn't ship one), and auseCloseOnEscapehook that listens in capture phase andstopPropagations — so Escape closes only the filter popover, not parent Dialog/Modal contexts (preserves prior Popover-as-Modal scoping behaviour).MenuTransition(Grow with placement-driventransformOrigin) and refactoredDrawerTransition(Slide). Alignssrc/styles/common/mui/popper.tsandpaper.tsto thesvgIcon.tspattern (POPPER_PROPS.PLACEMENT.*,PAPER_PROPS.VARIANT.*).Addresses the consuming-app request in human-pangenomics/hprc-data-explorer#278; original report at clevercanary/cc-design#307.
Test plan