🔨 (grapher) refactor modals and entity selector (#3490)

[Cycle 2024.2: Entity selector](#3349) | [Designs](https://www.figma.com/file/X5mOEX8zULS6qyHocUYdmh/Grapher-UI?type=design&node-id=2523%3A6266&mode=design&t=7edFp79OOjz6RENz-1) ## 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
owid · May 3, 2024 · a484995 · a484995
1 parent e186b8e
commit a484995
Show file tree

Hide file tree

Showing 23 changed files with 414 additions and 431 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -46,9 +46,6 @@ nav.controlsRow .chart-controls .settings-menu {
     // chart-type label
     //
     .settings-menu-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
         background: white;
         padding: 9px $indent 3px $indent;
         position: sticky;

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -9,7 +9,6 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { ChartDimension } from "../chart/ChartDimension"
 import { makeSelectionArray } from "../chart/ChartUtils.js"
 import { AxisConfig } from "../axis/AxisConfig"
-import { CloseButton } from "../closeButton/CloseButton.js"
 
 import { AxisScaleToggle } from "./settings/AxisScaleToggle"
 import { AbsRelToggle, AbsRelToggleManager } from "./settings/AbsRelToggle"
@@ -30,6 +29,7 @@ import {
     TableFilterToggle,
     TableFilterToggleManager,
 } from "./settings/TableFilterToggle"
+import { OverlayHeader } from "../core/OverlayHeader"
 
 const {
     LineChart,
@@ -315,12 +315,11 @@ export class SettingsMenu extends React.Component<{
                         ...this.layout,
                     }}
                 >
-                    <div className="settings-menu-header">
-                        <div className="grapher_h5-black-caps grapher_light">
-                            {menuTitle}
-                        </div>
-                        <CloseButton onClick={() => this.toggleVisibility()} />
-                    </div>
+                    <OverlayHeader
+                        className="settings-menu-header"
+                        title={menuTitle}
+                        onDismiss={this.toggleVisibility}
+                    />
 
                     <div className="settings-menu-controls">
                         <SettingsGroup

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -9,7 +9,6 @@ import {
     reaction,
 } from "mobx"
 import { bind } from "decko"
-import a from "indefinite"
 import {
     uniqWith,
     isEqual,
@@ -2606,10 +2605,7 @@ export class Grapher
                 <div className="CaptionedChartAndSidePanel">
                     <CaptionedChart manager={this} />
                     {this.sidePanelBounds && (
-                        <SidePanel
-                            title={this.entitySelectorTitle}
-                            bounds={this.sidePanelBounds}
-                        >
+                        <SidePanel bounds={this.sidePanelBounds}>
                             <EntitySelector manager={this} />
                         </SidePanel>
                     )}
@@ -2625,7 +2621,6 @@ export class Grapher
 
                 {/* entity selector in a slide-in drawer */}
                 <SlideInDrawer
-                    title={this.entitySelectorTitle}
                     active={this.isEntitySelectorDrawerOpen}
                     toggle={() => {
                         this.isEntitySelectorModalOrDrawerOpen =
@@ -3115,14 +3110,6 @@ export class Grapher
             : timeColumn.formatValue(value)
     }
 
-    @computed get entitySelectorTitle(): string {
-        return this.canHighlightEntities
-            ? `Select ${this.entityTypePlural}`
-            : this.canChangeEntity
-              ? `Choose ${a(this.entityType)}`
-              : `Add/remove ${this.entityTypePlural}`
-    }
-
     @computed get canSelectMultipleEntities(): boolean {
         if (this.numSelectableEntityNames < 2) return false
         if (this.addCountryMode === EntitySelectionMode.MultipleEntities)

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -6,9 +6,8 @@ export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config"
 export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage"
 export const GRAPHER_DRAWER_ID = "grapher-drawer"
 export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
-export const GRAPHER_SCROLLABLE_CONTAINER_CLASS = "scrollable-container"
 export const GRAPHER_TIMELINE_CLASS = "timeline-component"
-export const GRAPHER_ENTITY_SELECTOR_CLASS = "entity-selector"
+export const GRAPHER_SIDE_PANEL_CLASS = "side-panel"
 
 export const DEFAULT_GRAPHER_CONFIG_SCHEMA =
     "https://files.ourworldindata.org/schemas/grapher-schema.004.json"

diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
@@ -0,0 +1,12 @@
+.overlay-header {
+    --padding: var(--modal-padding, 16px);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--padding) var(--padding) 16px;
+
+    button {
+        margin-left: 8px;
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+import cx from "classnames"
+import { CloseButton } from "../closeButton/CloseButton.js"
+
+export function OverlayHeader({
+    title,
+    onDismiss,
+    className,
+}: {
+    title: string
+    onDismiss?: () => void
+    className?: string
+}): JSX.Element {
+    return (
+        <div className={cx("overlay-header", className)}>
+            <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
+            {onDismiss && <CloseButton onClick={onDismiss} />}
+        </div>
+    )
+}
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -89,6 +89,7 @@ $zindex-controls-drawer: 150;
 @import "../closeButton/CloseButton.scss";
 @import "../controls/RadioButton.scss";
 @import "../controls/Dropdown.scss";
+@import "../core/OverlayHeader.scss";
 
 .grapher_dark {
     color: $dark-text;