🔨 (grapher) refactor modals and entity selector

[sophiamersmann]

Cycle 2024.2: Entity selector | Designs

Background

• Modals used to come with a sticky header with a title and a close button, making the content area scrollable by default.
• This was convenient when our modals were relatively simple but started breaking down first for the Sources modal (where we need a sticky header on smaller screens only) and then for the entity selector (where we have some more sticky content on the top and bottom)
• For the entity selector in particular, making the entity selector work with the current <Modal /> implementation led to a number of bugs that were difficult to get rid of (1px of text surfacing above the search input, the scrollbar hidden behind the footer)

Summary

• Makes the <Modal />, <SlideInDrawer /> and <SidePanel /> into unopinionated container components that render their children – and nothing else
• Content that is rendered into a modal/drawer/panel is then responsible for making itself scrollable (if necessary)

SVG tester

The SVG tester fails due to the changes in #3373

[sophiamersmann]

• ✨ (entity selector) feedback #3501
• ✨ (entity selector) render drawer within the Grapher frame #3500
• 🔨 (grapher) refactor modals and entity selector #3490 👈
• 🎉 (entity selector) sort by external indicators #3466 : 1 other dependent PR (#3443 )
• 🎉 (entity selector) highlight user location #3452
• 🎉 (entity selector) sort by name or value #3447
• ✨ (entity selector) redesign #3436
• 🔨 (grapher) refactor modals #3435
• 🔨 (grapher) add CloseButton component #3434
• ✨ (entity selector) render into panel, drawer or modal #3373
• ✨ (entity selector) remove slide-in settings drawer #3353 : 2 other dependent PRs (#3356 , #3363 )
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[marcelgerber]

Nice! What a bunch of work to fix these annoying issues...

[sophiamersmann]

Merge activity

• May 3, 4:04 AM EDT: @sophiamersmann started a stack merge that includes this pull request via Graphite.
• May 3, 4:23 AM EDT: Graphite rebased this pull request as part of a merge.
• May 3, 4:24 AM EDT: @sophiamersmann merged this pull request with Graphite.