From 452bd7d7692c8c54d455c5c8af783124396cf0f5 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Tue, 10 Dec 2024 15:07:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20show=20halos=20for=20text=20wrap?=
 =?UTF-8?q?=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/halo => components/src/Halo}/Halo.tsx |  6 +--
 .../components/src/TextWrap/TextWrapGroup.tsx | 52 +++++++++++++------
 .../@ourworldindata/components/src/index.ts   |  2 +
 .../grapher/src/lineLegend/LineLegend.tsx     | 15 +++---
 .../grapher/src/noDataModal/NoDataModal.tsx   |  2 +-
 .../src/scatterCharts/ComparisonLine.tsx      |  4 +-
 .../scatterCharts/ScatterPointsWithLabels.tsx |  6 +--
 .../src/scatterCharts/ScatterSizeLegend.tsx   |  4 +-
 .../grapher/src/slopeCharts/SlopeChart.tsx    |  7 ++-
 9 files changed, 59 insertions(+), 39 deletions(-)
 rename packages/@ourworldindata/{grapher/src/halo => components/src/Halo}/Halo.tsx (85%)

diff --git a/packages/@ourworldindata/grapher/src/halo/Halo.tsx b/packages/@ourworldindata/components/src/Halo/Halo.tsx
similarity index 85%
rename from packages/@ourworldindata/grapher/src/halo/Halo.tsx
rename to packages/@ourworldindata/components/src/Halo/Halo.tsx
index f8fe4ae21c5..6732a911d03 100644
--- a/packages/@ourworldindata/grapher/src/halo/Halo.tsx
+++ b/packages/@ourworldindata/components/src/Halo/Halo.tsx
@@ -14,7 +14,7 @@ export function Halo(props: {
     id: React.Key
     children: React.ReactElement
     show?: boolean
-    background?: Color
+    outlineColor?: Color
     style?: React.CSSProperties
 }): React.ReactElement {
     const show = props.show ?? true
@@ -22,8 +22,8 @@ export function Halo(props: {
 
     const defaultStyle = {
         ...defaultHaloStyle,
-        fill: props.background ?? defaultHaloStyle.fill,
-        stroke: props.background ?? defaultHaloStyle.stroke,
+        fill: props.outlineColor ?? defaultHaloStyle.fill,
+        stroke: props.outlineColor ?? defaultHaloStyle.stroke,
     }
     const halo = React.cloneElement(props.children, {
         style: {
diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx
index 679c07d3161..05a4f16eda4 100644
--- a/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx
+++ b/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx
@@ -3,6 +3,7 @@ import { computed } from "mobx"
 import { TextWrap } from "./TextWrap"
 import { splitIntoFragments } from "./TextWrapUtils"
 import { Bounds, last, max } from "@ourworldindata/utils"
+import { Halo } from "../Halo/Halo"
 
 interface TextWrapFragment {
     text: string
@@ -249,7 +250,15 @@ export class TextWrapGroup {
     render(
         x: number,
         y: number,
-        { textProps }: { textProps?: React.SVGProps<SVGTextElement> } = {}
+        {
+            showTextOutline,
+            textOutlineColor,
+            textProps,
+        }: {
+            showTextOutline?: boolean
+            textOutlineColor?: string
+            textProps?: React.SVGProps<SVGTextElement>
+        } = {}
     ): React.ReactElement {
         // Alternatively, we could render each TextWrap one by one. That would
         // give us a good but not pixel-perfect result since the text
@@ -259,29 +268,38 @@ export class TextWrapGroup {
         return (
             <>
                 {this.lines.map((line) => {
+                    const key = line.yOffset.toString()
                     const [textX, textY] =
                         line.fragments[0].textWrap.getPositionForSvgRendering(
                             x,
                             y
                         )
                     return (
-                        <text
-                            key={line.yOffset.toString()}
-                            x={textX}
-                            y={textY + line.yOffset}
-                            fontSize={this.fontSize.toFixed(2)}
-                            {...textProps}
+                        <Halo
+                            id={key}
+                            key={key}
+                            show={showTextOutline}
+                            outlineColor={textOutlineColor}
                         >
-                            {line.fragments.map((fragment, index) => (
-                                <tspan
-                                    key={index}
-                                    fontWeight={fragment.textWrap.fontWeight}
-                                >
-                                    {index === 0 ? "" : " "}
-                                    {fragment.text}
-                                </tspan>
-                            ))}
-                        </text>
+                            <text
+                                x={textX}
+                                y={textY + line.yOffset}
+                                fontSize={this.fontSize.toFixed(2)}
+                                {...textProps}
+                            >
+                                {line.fragments.map((fragment, index) => (
+                                    <tspan
+                                        key={index}
+                                        fontWeight={
+                                            fragment.textWrap.fontWeight
+                                        }
+                                    >
+                                        {index === 0 ? "" : " "}
+                                        {fragment.text}
+                                    </tspan>
+                                ))}
+                            </text>
+                        </Halo>
                     )
                 })}
             </>
diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts
index 57b17d1e8ce..3f544ac9044 100644
--- a/packages/@ourworldindata/components/src/index.ts
+++ b/packages/@ourworldindata/components/src/index.ts
@@ -60,3 +60,5 @@ export {
 } from "./SharedDataPageConstants.js"
 
 export { Button } from "./Button/Button.js"
+
+export { Halo } from "./Halo/Halo.js"
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
index 60119c8eed6..647e714666e 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -32,7 +32,7 @@ import {
 import { ChartSeries } from "../chart/ChartInterface"
 import { darkenColorForText } from "../color/ColorUtils"
 import { AxisConfig } from "../axis/AxisConfig.js"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 
 // Minimum vertical space between two legend items
 const LEGEND_ITEM_MIN_SPACING = 4
@@ -168,20 +168,17 @@ class LineLabels extends React.Component<{
                     )
                     const textColor = darkenColorForText(series.color)
                     return (
-                        <Halo
-                            id={key}
-                            key={key}
-                            show={this.showTextOutline}
-                            background={this.textOutlineColor}
-                        >
+                        <React.Fragment key={key}>
                             {series.textWrap.render(labelText.x, labelText.y, {
+                                showTextOutline: this.showTextOutline,
+                                textOutlineColor: this.textOutlineColor,
                                 textProps: {
                                     fill: textColor,
                                     opacity: this.textOpacity,
                                     textAnchor: this.anchor,
                                 },
                             })}
-                        </Halo>
+                        </React.Fragment>
                     )
                 })}
             </g>
@@ -207,7 +204,7 @@ class LineLabels extends React.Component<{
                             id={key}
                             key={key}
                             show={this.showTextOutline}
-                            background={this.textOutlineColor}
+                            outlineColor={this.textOutlineColor}
                         >
                             {series.annotationTextWrap.render(
                                 labelText.x,
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
index a63ea9999b1..c78bd151942 100644
--- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
+++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
@@ -15,7 +15,7 @@ import {
     GRAPHER_DARK_TEXT,
     GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 
 export interface NoDataModalManager {
     canChangeEntity?: boolean
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
index 19fadad9d82..d1e6156d99d 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
@@ -10,7 +10,7 @@ import { computed } from "mobx"
 import { observer } from "mobx-react"
 import { DualAxis } from "../axis/Axis"
 import { generateComparisonLinePoints } from "./ComparisonLineGenerator"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 import { Color, ComparisonLineConfig } from "@ourworldindata/types"
 import { GRAPHER_FONT_SCALE_10_5 } from "../core/GrapherConstants"
 
@@ -125,7 +125,7 @@ export class ComparisonLine extends React.Component<{
                     >
                         <Halo
                             id={`path-${renderUid}`}
-                            background={this.props.backgroundColor}
+                            outlineColor={this.props.backgroundColor}
                         >
                             <textPath
                                 baselineShift="-0.2rem"
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
index 53eb8859604..fd8d306752b 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
@@ -18,7 +18,7 @@ import {
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import React from "react"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 import { MultiColorPolyline } from "./MultiColorPolyline"
 import {
     ScatterPointsWithLabelsProps,
@@ -425,7 +425,7 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                             <Halo
                                 key={series.displayKey + "-endLabel"}
                                 id={series.displayKey + "-endLabel"}
-                                background={this.props.backgroundColor}
+                                outlineColor={this.props.backgroundColor}
                             >
                                 <text
                                     id={makeIdForHumanConsumption(
@@ -561,7 +561,7 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                     <Halo
                         key={`${series.displayKey}-label-${index}`}
                         id={`${series.displayKey}-label-${index}`}
-                        background={this.props.backgroundColor}
+                        outlineColor={this.props.backgroundColor}
                     >
                         <text
                             id={makeIdForHumanConsumption(
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
index 183b78e1c46..935b1b8fe40 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -18,7 +18,7 @@ import {
     GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { CoreColumn } from "@ourworldindata/core-table"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 import {
     ScatterSeries,
     SCATTER_POINT_MAX_RADIUS,
@@ -310,7 +310,7 @@ const LegendItem = ({
             />
             <Halo
                 id={label}
-                background={backgroundColor}
+                outlineColor={backgroundColor}
                 style={{ ...style, strokeWidth: 3.5 }}
             >
                 <text
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index cc08b298085..9177125ea1c 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -80,7 +80,7 @@ import {
     getSeriesName,
 } from "../lineCharts/LineChartHelpers"
 import { SelectionArray } from "../selection/SelectionArray"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 
 type SVGMouseOrTouchEvent =
     | React.MouseEvent<SVGGElement>
@@ -1108,7 +1108,10 @@ export class SlopeChart
             allSlopesStartFromZero
         )
             return (
-                <Halo id="x-axis-zero-label" background={this.backgroundColor}>
+                <Halo
+                    id="x-axis-zero-label"
+                    outlineColor={this.backgroundColor}
+                >
                     <text
                         x={this.startX}
                         y={this.yAxis.place(0)}