feat(theming): exclude non standard properties from text styles

plouc · May 12, 2024 · 1d4eba0 · 1d4eba0
1 parent 71e70bd
commit 1d4eba0
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 430 deletions.
diff --git a/packages/axes/src/components/AxisTick.tsx b/packages/axes/src/components/AxisTick.tsx
@@ -1,7 +1,7 @@
 import { useMemo, memo } from 'react'
 import * as React from 'react'
 import { animated } from '@react-spring/web'
-import { useTheme } from '@nivo/core'
+import { useTheme, sanitizeSvgTextStyle } from '@nivo/core'
 import { ScaleValue } from '@nivo/scales'
 import { AxisTickProps } from '../types'
 
@@ -54,7 +54,7 @@ const AxisTick = <Value extends ScaleValue>({
                 dominantBaseline={textBaseline}
                 textAnchor={textAnchor}
                 transform={animatedProps.textTransform}
-                style={textStyle}
+                style={sanitizeSvgTextStyle(textStyle)}
             >
                 {`${value}`}
             </animated.text>

diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -58,6 +58,8 @@ export type TextStyle = {
     outlineOpacity: number
 } & Partial<React.CSSProperties>
 
+export function sanitizeSvgTextStyle(style: TextStyle): any
+
 export type CompleteTheme = {
     background: string
     text: TextStyle

diff --git a/packages/core/src/components/dots/DotsItem.js b/packages/core/src/components/dots/DotsItem.js
@@ -1,7 +1,7 @@
 import { createElement, memo } from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated } from '@react-spring/web'
-import { useTheme } from '../../theming'
+import { useTheme, sanitizeSvgTextStyle } from '../../theming'
 import { useMotionConfig } from '../../motion'
 import DotsItemSymbol from './DotsItemSymbol'
 
@@ -27,6 +27,11 @@ const DotsItem = ({
         immediate: !animate,
     })
 
+    console.log({
+        bare: theme.dots.text,
+        sanitized: sanitizeSvgTextStyle(theme.dots.text),
+    })
+
     return (
         <animated.g transform={animatedProps.transform} style={{ pointerEvents: 'none' }}>
             {createElement(symbol, {
@@ -37,7 +42,11 @@ const DotsItem = ({
                 borderColor,
             })}
             {label && (
-                <text textAnchor={labelTextAnchor} y={labelYOffset} style={theme.dots.text}>
+                <text
+                    textAnchor={labelTextAnchor}
+                    y={labelYOffset}
+                    style={sanitizeSvgTextStyle(theme.dots.text)}
+                >
                     {label}
                 </text>
             )}

diff --git a/packages/core/src/theming/helpers.js b/packages/core/src/theming/helpers.js
@@ -0,0 +1,11 @@
+/**
+ * Cleanup theme text style so that all properties
+ * are valid for an SVG text element.
+ *
+ * @param {TextStyle} style
+ */
+export const sanitizeSvgTextStyle = style => {
+    const { outlineWidth, outlineColor, outlineOpacity, ...sanitized } = style
+
+    return sanitized
+}
diff --git a/packages/core/src/theming/index.js b/packages/core/src/theming/index.js
@@ -9,3 +9,4 @@
 export * from './defaultTheme'
 export * from './extend'
 export * from './context'
+export * from './helpers'
diff --git a/packages/legends/src/svg/LegendSvgItem.tsx b/packages/legends/src/svg/LegendSvgItem.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react'
 import * as React from 'react'
-import { useTheme } from '@nivo/core'
+import { useTheme, sanitizeSvgTextStyle } from '@nivo/core'
 import { LegendSvgItemProps } from '../types'
 import { computeItemLayout } from '../compute'
 import { SymbolCircle, SymbolDiamond, SymbolSquare, SymbolTriangle } from './symbols'
@@ -135,7 +135,7 @@ export const LegendSvgItem = ({
             <text
                 textAnchor={labelAnchor}
                 style={{
-                    ...theme.legends.text,
+                    ...sanitizeSvgTextStyle(theme.legends.text),
                     fill: style.itemTextColor ?? textColor ?? theme.legends.text.fill ?? 'black',
                     dominantBaseline: labelAlignment,
                     pointerEvents: 'none',

diff --git a/packages/legends/tests/svg/__snapshots__/LegendSvgItem.test.tsx.snap b/packages/legends/tests/svg/__snapshots__/LegendSvgItem.test.tsx.snap
@@ -44,8 +44,6 @@ exports[`should support bottom-to-top direction 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }
@@ -103,8 +101,6 @@ exports[`should support bottom-to-top direction justified 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }
@@ -162,8 +158,6 @@ exports[`should support left-to-right direction 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }
@@ -221,8 +215,6 @@ exports[`should support left-to-right direction justified 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }
@@ -280,8 +272,6 @@ exports[`should support right-to-left direction 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }
@@ -339,8 +329,6 @@ exports[`should support right-to-left direction justified 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }
@@ -398,8 +386,6 @@ exports[`should support top-to-bottom direction 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }
@@ -457,8 +443,6 @@ exports[`should support top-to-bottom direction justified 1`] = `
         "fill": "#333333",
         "fontFamily": "sans-serif",
         "fontSize": 11,
-        "outlineColor": "transparent",
-        "outlineWidth": 0,
         "pointerEvents": "none",
         "userSelect": "none",
       }