Skip to content

feat: filter popover: flip placement above the trigger row when bottom-anchored (#912)#915

Open
frano-m wants to merge 1 commit into
mainfrom
fran/278-filter-position
Open

feat: filter popover: flip placement above the trigger row when bottom-anchored (#912)#915
frano-m wants to merge 1 commit into
mainfrom
fran/278-filter-position

Conversation

@frano-m
Copy link
Copy Markdown
Contributor

@frano-m frano-m commented May 11, 2026

Summary

Closes #912.

  • Migrates the Filter popover from MUI Popover (anchor-position) to MUI Popper (Popper.js) so the popover flips above the trigger row when there isn't enough room below — keeping the selected filter label visible. Default placement bottom-start, fallbacks top-start then right.
  • Adds PopperProvider (src/components/common/Popper/provider/) for popper open/anchor state, a local Backdrop (Popper doesn't ship one), and a useCloseOnEscape hook that listens in capture phase and stopPropagations — so Escape closes only the filter popover, not parent Dialog/Modal contexts (preserves prior Popover-as-Modal scoping behaviour).
  • Splits transitions: new MenuTransition (Grow with placement-driven transformOrigin) and refactored DrawerTransition (Slide). Aligns src/styles/common/mui/popper.ts and paper.ts to the svgIcon.ts pattern (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

  • Visual: open a filter near the bottom of the viewport — popper flips above the trigger row, label stays visible
  • Visual: open a filter in drawer surface (mobile breakpoint) — popper sits over the open drawer and slides in from the left
  • Escape inside a filter popover that sits inside a parent Dialog/Modal closes only the filter (parent Dialog stays open) — regression test for consumers like brc-analytics ColumnFilters in workflow stepper
  • Backdrop click closes the popper and any ancestor drawer
  • Escape inside an open filter popover closes the popover and any ancestor drawer
  • Drawer-mode IconButton close still closes both popper and drawer
  • Range filter and select filter views render correctly in both menu and drawer surfaces
  • No regressions in existing Filter, FilterMenu, FilterRange, Filters stories
image image image image

…m-anchored (#912)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings May 11, 2026 04:10
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Filter from Popover (anchorPosition) to Popper with flip/offset modifiers and placement-aware transitions.
  • Introduces a reusable PopperProvider for 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.

Comment thread src/components/Filter/components/Filter/filter.tsx
Comment thread src/components/Filter/components/Filter/filter.styles.ts
@frano-m frano-m marked this pull request as ready for review May 11, 2026 04:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Filter popover: flip placement above the trigger row when bottom-anchored

3 participants