@automattic/charts 4.9.0 → 4.11.0

package/src/components/legend/hooks/use-chart-legend-items.ts

@@ -8,10 +8,12 @@ import {
 } from '../../../providers';
 import { formatPercentage } from '../../../utils';
 import type {
+	ComparisonItemLabel,
 	SeriesData,
 	DataPointDate,
 	DataPointPercentageCalculated,
 	LegendShape,
+	SeriesChartLegendConfig,
 } from '../../../types';
 import type { BaseLegendItem } from '../types';
 import type { GlyphProps } from '@visx/xychart';
@@ -36,7 +38,9 @@ export interface ChartLegendOptions {
 	 * `options.type === 'comparison'`. Skipped when that series already has its own
 	 * item. Pass a string to replace the default label.
 	 */
-	comparisonItem?: boolean | string;
+	comparisonItem?: SeriesChartLegendConfig[ 'comparisonItem' ];
+	/** One static item per comparison series instead; see `SeriesChartLegendConfig`. */
+	comparisonSeriesItems?: SeriesChartLegendConfig[ 'comparisonSeriesItems' ];
 }
 
 /**
@@ -276,6 +280,48 @@ function buildComparisonLegendItem(
 	return { label, color, shapeStyle: shapeStyles, interactive: false };
 }
 
+/**
+ * Builds one static item per comparison series folded into another series' item, named after
+ * that item and styled like the comparison series itself.
+ * @param seriesData       - The series data to search for comparison series
+ * @param items            - The legend items already built from the series
+ * @param formatLabel      - Names an item after the label of the item it was folded into
+ * @param getElementStyles - Function to get element styles
+ * @param legendShape      - The shape type for legend items (string literal or React component)
+ * @return The legend items, in series order
+ */
+function buildPerSeriesComparisonItems(
+	seriesData: SeriesData[],
+	items: BaseLegendItem[],
+	formatLabel: ComparisonItemLabel,
+	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles,
+	legendShape?: LegendShape< SeriesData[], number >
+): BaseLegendItem[] {
+	return seriesData.flatMap( ( series, index ) => {
+		const owner = items.find( item => item.seriesLabels?.includes( series.label ) );
+
+		if (
+			series.options?.type !== 'comparison' ||
+			! owner ||
+			owner.seriesLabels?.[ 0 ] === series.label
+		) {
+			return [];
+		}
+
+		const { color, shapeStyles } = getElementStyles( { data: series, index, legendShape } );
+
+		return [
+			{
+				label: formatLabel( owner.label ),
+				color,
+				shapeStyle: shapeStyles,
+				interactive: false,
+				describesSeries: series.label,
+			},
+		];
+	} );
+}
+
 /**
  * Processes point data into legend items
  * @param pointData          - The point data to process
@@ -339,6 +385,7 @@ export function useChartLegendItems<
 		glyphSize = 8,
 		collapseGroups = false,
 		comparisonItem = false,
+		comparisonSeriesItems,
 		renderGlyph,
 	} = options;
 	const { getElementStyles } = useGlobalChartsContext();
@@ -361,6 +408,20 @@ export function useChartLegendItems<
 				renderGlyph,
 				legendShape
 			);
+
+			if ( comparisonSeriesItems ) {
+				return [
+					...items,
+					...buildPerSeriesComparisonItems(
+						seriesData,
+						items,
+						comparisonSeriesItems,
+						getElementStyles,
+						legendShape
+					),
+				];
+			}
+
 			const comparison = comparisonItem
 				? buildComparisonLegendItem(
 						seriesData,
@@ -396,6 +457,7 @@ export function useChartLegendItems<
 		glyphSize,
 		collapseGroups,
 		comparisonItem,
+		comparisonSeriesItems,
 		renderGlyph,
 		legendShape,
 	] );

package/src/components/legend/private/base-legend.module.scss

@@ -1,5 +1,10 @@
 .legend {
 	align-self: stretch;
+
+	&--horizontal {
+		column-gap: var(--a8c-charts-dimension-legend-column-gap);
+		row-gap: var(--a8c-charts-dimension-legend-row-gap);
+	}
 }
 
 .legend-item {

package/src/components/legend/private/base-legend.tsx

@@ -11,6 +11,7 @@ import {
 	forwardRef,
 	useCallback,
 	useContext,
+	useMemo,
 } from 'react';
 import { ChartInstanceContext } from '../../../charts/private/chart-instance-context';
 import { useTextTruncation } from '../../../hooks';
@@ -115,7 +116,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 > = forwardRef< HTMLDivElement, BaseLegendProps >(
 	(
 		{
-			items,
+			items: allItems,
 			className,
 			orientation = 'horizontal',
 			alignment = 'center',
@@ -154,6 +155,31 @@ export const BaseLegend: ForwardRefExoticComponent<
 		const chartInstanceContext = useContext( ChartInstanceContext );
 		const standaloneScopeClass = useStandaloneScopeClass();
 
+		// Disabling interaction for the whole legend still preserves its series' visibility state.
+		const isSeriesVisible = useCallback(
+			( seriesLabel: string ) => {
+				if ( chartInstanceContext?.isSeriesVisible ) {
+					return chartInstanceContext.isSeriesVisible( seriesLabel );
+				}
+				if ( ! chartId || ! context ) {
+					return true;
+				}
+				return context.isSeriesVisible( chartId, seriesLabel );
+			},
+			[ chartId, chartInstanceContext, context ]
+		);
+
+		const items = useMemo(
+			() =>
+				allItems.filter(
+					item =>
+						item.interactive !== false ||
+						! item.describesSeries ||
+						isSeriesVisible( item.describesSeries )
+				),
+			[ allItems, isSeriesVisible ]
+		);
+
 		// Keep duplicate labels: a static comparison item can share a metric's name.
 		const domain = items.map( item => item.label );
 		const legendScale = scaleOrdinal( {
@@ -189,20 +215,6 @@ export const BaseLegend: ForwardRefExoticComponent<
 			[ interactive, chartId, context ]
 		);
 
-		// Disabling interaction for the whole legend still preserves its series' visibility state.
-		const isSeriesVisible = useCallback(
-			( seriesLabel: string ) => {
-				if ( chartInstanceContext?.isSeriesVisible ) {
-					return chartInstanceContext.isSeriesVisible( seriesLabel );
-				}
-				if ( ! chartId || ! context ) {
-					return true;
-				}
-				return context.isSeriesVisible( chartId, seriesLabel );
-			},
-			[ chartId, chartInstanceContext, context ]
-		);
-
 		// Create event handlers to avoid inline arrow functions
 		const createClickHandler = useCallback(
 			( seriesLabels: string[], itemInteractive: boolean ) => {
@@ -245,13 +257,19 @@ export const BaseLegend: ForwardRefExoticComponent<
 					<Stack
 						ref={ ref }
 						direction={ orientation === 'vertical' ? 'column' : 'row' }
-						gap={ orientation === 'vertical' ? 'sm' : 'lg' }
+						// Stack's gap is inline; horizontal gaps live in CSS so consumers can override them.
+						gap={ orientation === 'vertical' ? 'sm' : undefined }
 						align={ orientation === 'vertical' ? flexAlignment : undefined }
 						justify={ orientation === 'horizontal' ? flexAlignment : undefined }
 						wrap={ orientation === 'horizontal' ? 'wrap' : undefined }
 						role={ interactive ? undefined : 'list' }
 						data-testid={ `legend-${ orientation }` }
-						className={ clsx( standaloneScopeClass, styles.legend, className ) }
+						className={ clsx(
+							standaloneScopeClass,
+							styles.legend,
+							orientation === 'horizontal' && styles[ 'legend--horizontal' ],
+							className
+						) }
 						style={ theme.legend?.containerStyles }
 					>
 						{ labels.map( ( label, i ) => {

package/src/components/legend/test/legend.test.tsx

@@ -801,6 +801,48 @@ describe( 'BaseLegend', () => {
 			expect( staticItem ).not.toHaveClass( 'legend-item--inactive' );
 		} );
 
+		it( 'leaves out a static item while its series is hidden, keeping later swatches aligned', async () => {
+			const user = userEvent.setup();
+			const items = [
+				{ label: 'Views', color: '#0000ff', seriesLabels: [ 'Views', 'Views · previous' ] },
+				{
+					label: 'Visitors',
+					color: '#00ff00',
+					seriesLabels: [ 'Visitors', 'Visitors · previous' ],
+				},
+				{
+					label: 'Views (Prev. 7 days)',
+					color: '#000088',
+					interactive: false,
+					describesSeries: 'Views · previous',
+				},
+				{
+					label: 'Visitors (Prev. 7 days)',
+					color: '#008800',
+					interactive: false,
+					describesSeries: 'Visitors · previous',
+				},
+			];
+
+			render(
+				<GlobalChartsProvider>
+					<BaseLegend items={ items } interactive chartId="test-chart" shape={ TestShape } />
+				</GlobalChartsProvider>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: /^Views/ } ) );
+
+			expect( screen.getAllByTestId( 'legend-item' ).map( item => item.textContent ) ).toEqual( [
+				'Views',
+				'Visitors',
+				'Visitors (Prev. 7 days)',
+			] );
+			expect( screen.getAllByTestId( 'legend-marker' )[ 2 ] ).toHaveAttribute( 'fill', '#008800' );
+
+			await user.click( screen.getByRole( 'button', { name: /^Views/ } ) );
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 4 );
+		} );
+
 		it( 'keeps a comparison item distinct when its label collides', async () => {
 			const user = userEvent.setup();
 			const Example = () => {

package/src/components/legend/types.ts

@@ -63,4 +63,6 @@ export type BaseLegendItem = {
 	seriesLabels?: string[];
 	/** Set to false for a static item that cannot be toggled or dimmed. */
 	interactive?: boolean;
+	/** Label of the series this static item describes; the item is left out while it is hidden. */
+	describesSeries?: string;
 };

package/src/components/tooltip/_surface.scss

@@ -0,0 +1,19 @@
+// The chart tooltip box: the look every chart tooltip shares.
+@mixin surface {
+	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
+	background-color: var(--a8c-charts-color-surface);
+	color: var(--a8c-charts-color-label);
+	border-radius: var(--wpds-border-radius-md);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: 1.4;
+	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
+	pointer-events: none;
+	// Beats a host `max-width` on `.visx-tooltip`, even an `!important`
+	// one: WordPress.com's Help Center caps it at 150px.
+	min-width: fit-content;
+
+	@media (forced-colors: active) {
+		border: var(--wpds-border-width-xs) solid CanvasText;
+	}
+}

package/src/components/tooltip/private/bounded-tooltip.tsx

@@ -17,7 +17,7 @@ export type BoundedTooltipProps = Omit< TooltipBoxProps, 'children' > & {
 	placement?: TooltipPlacement;
 };
 
-const DEFAULT_OFFSET = 10;
+export const DEFAULT_OFFSET = 10;
 // Above anything else layered inside a chart, such as the zoom reset button (2).
 // Chart wrappers isolate their stacking context, so it never reaches page chrome.
 export const TOOLTIP_Z_INDEX = 3;
@@ -43,7 +43,7 @@ const findLayoutParent = ( node: Element ): Element | null => {
 // The first ancestor that cuts its overflow off. The box may leave the chart
 // wrapper but never this element, which is what a body-level portal used to
 // guarantee by never being inside one.
-const findClippingAncestor = ( wrapper: Element ): Element | null => {
+export const findClippingAncestor = ( wrapper: Element ): Element | null => {
 	let element = wrapper.parentElement;
 	while ( element && element !== document.body ) {
 		if ( isClipping( element ) ) {

package/src/components/tooltip/tooltip-box.module.scss

@@ -1,21 +1,7 @@
 // `.surface` is the look alone, for a chart that positions the box itself.
-// The box carries the tooltip scope class inside TooltipTheme, so these roles
-// resolve for the dark tooltip theme, as in @wordpress/ui's Tooltip popup.
+@use "surface";
+
 .surface {
-	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
-	background-color: var(--a8c-charts-color-surface);
-	color: var(--a8c-charts-color-label);
-	border-radius: var(--wpds-border-radius-md);
-	font-family: var(--wpds-typography-font-family-body);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: 1.4;
-	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
-	pointer-events: none;
-	// Beats a host `max-width` on `.visx-tooltip`, even an `!important`
-	// one: WordPress.com's Help Center caps it at 150px.
-	min-width: fit-content;
 
-	@media (forced-colors: active) {
-		border: var(--wpds-border-width-xs) solid CanvasText;
-	}
+	@include surface.surface;
 }

package/src/hooks/test/use-xychart-theme.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../providers';
 import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
 import { ChartScopeContext } from '../../providers/chart-scope';
 import { useXYChartTheme } from '../use-xychart-theme';
@@ -68,6 +69,27 @@ describe( 'useXYChartTheme', () => {
 		document.body.removeChild( scope );
 	} );
 
+	it.each( [
+		[ -12, 11 ],
+		[ Infinity, 11 ],
+		[ 14, 14 ],
+		[ '-12px', 11 ],
+		[ '12.px', 11 ],
+		[ '9'.repeat( 400 ) + 'px', 11 ],
+		[ '0.875rem', '0.875rem' ],
+		[ 'var(--size)', 'var(--size)' ],
+	] )( 'renders a theme fontSize of %p as %p', ( fontSize, expected ) => {
+		const wrapper = ( { children }: { children: ReactNode } ) => (
+			<GlobalChartsProvider theme={ { svgLabelSmall: { fontSize } } }>
+				{ children }
+			</GlobalChartsProvider>
+		);
+
+		const { result } = renderHook( () => useXYChartTheme( [] ), { wrapper } );
+
+		expect( result.current.axisStyles.x.bottom.tickLabel.fontSize ).toBe( expected );
+	} );
+
 	it( 'gives the y axis its own roles, resolving to none', () => {
 		const { result } = renderHook( () => useXYChartTheme( [] ) );
 

package/src/hooks/use-xychart-theme.ts

@@ -3,9 +3,36 @@ import { useMemo } from 'react';
 import { useGlobalChartsTheme } from '../providers';
 import { CATALOG_POINTERS } from '../providers/chart-context/private/catalog-pointers';
 import { useChartScopeElement } from '../providers/chart-scope';
-import { createCssVariableResolver } from '../utils';
+import { createCssVariableResolver, resolveFontSize } from '../utils';
 import type { SeriesData } from '../types';
 
+type LabelStyle = { fontSize?: number | string };
+
+const STARTS_LIKE_A_NUMBER = /^[+-]?[\d.]/;
+const NON_NEGATIVE_CSS_NUMBER = /^\+?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+|%)?$/i;
+
+const isRenderableFontSize = ( fontSize: number | string ): boolean => {
+	if ( typeof fontSize === 'number' ) {
+		return resolveFontSize( fontSize ) !== undefined;
+	}
+	// A pattern, not `CSS.supports`, so SSR and the browser agree; `resolveFontSize` would drop renderable `rem`. Keywords, `var()` and `calc()` pass through.
+	const value = fontSize.trim();
+	if ( ! STARTS_LIKE_A_NUMBER.test( value ) ) {
+		return true;
+	}
+	return NON_NEGATIVE_CSS_NUMBER.test( value ) && Number.isFinite( parseFloat( value ) );
+};
+
+// visx writes `fontSize` straight onto `<text>`, where an invalid one renders at the browser's 16px default; dropping it lets visx use its own default.
+const withRenderableFontSize = < T extends LabelStyle >( style?: T ): T | undefined => {
+	if ( style?.fontSize === undefined || isRenderableFontSize( style.fontSize ) ) {
+		return style;
+	}
+	const rest = { ...style };
+	delete rest.fontSize;
+	return rest;
+};
+
 export const useXYChartTheme = ( data: SeriesData[] ) => {
 	const theme = useGlobalChartsTheme();
 	const scopeElement = useChartScopeElement();
@@ -47,7 +74,11 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 			xTickLineStyles: { ...theme.xTickLineStyles, stroke: CATALOG_POINTERS.tickX },
 			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
 			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
-			svgLabelSmall: { ...theme.svgLabelSmall, fill: CATALOG_POINTERS.labelAxis },
+			svgLabelSmall: {
+				...withRenderableFontSize( theme.svgLabelSmall ),
+				fill: CATALOG_POINTERS.labelAxis,
+			},
+			svgLabelBig: withRenderableFontSize( theme.svgLabelBig ),
 		} );
 	}, [ theme, seriesColorKey, scopeElement ] );
 };

package/src/index.ts

@@ -68,6 +68,7 @@ export type {
 	LegendPosition,
 	ChartLegendConfig,
 	SeriesChartLegendConfig,
+	ComparisonItemLabel,
 	SeriesVisibilityProps,
 	BaseChartProps,
 	GoogleDataTableColumn,

package/src/styles/chart-scope.scss

@@ -10,9 +10,9 @@
 // the same element wins. Chart roots deliberately do NOT re-declare these: an
 // element's own declaration beats an inherited one, so re-declaring lower down
 // would shadow a consumer override set inside the provider tree.
-// The tooltip box re-declares the catalog under its own class, so a rule on
-// .a8c-charts-scope does not land on the dark box.
-:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
+// The tooltip boxes (ours and Google's GeoChart one) re-declare the catalog on
+// themselves, so a rule on .a8c-charts-scope does not land on the dark box.
+:where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip) {
 	// The series palette. GlobalChartsProvider resolves these five slots at its
 	// wrapper and seeds ColorCache with whatever resolves; a slot that resolves
 	// to nothing is skipped, so setting only slots 1 and 3 gives a two-color
@@ -87,11 +87,13 @@
 
 	--a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md);
 	--a8c-charts-dimension-leaderboard-column-gap: var(--wpds-dimension-gap-xs);
+	--a8c-charts-dimension-legend-column-gap: var(--wpds-dimension-gap-lg);
+	--a8c-charts-dimension-legend-row-gap: var(--wpds-dimension-gap-sm);
 }
 
 @media (forced-colors: active) {
 
-	:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
+	:where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip) {
 		--a8c-charts-color-label-axis: CanvasText;
 		--a8c-charts-color-grid: GrayText;
 		--a8c-charts-color-axis-x: GrayText;

package/src/styles/test/chart-scope.test.ts

@@ -127,7 +127,9 @@ describe( 'chart scope catalog', () => {
 			expect( mediaRules[ 0 ].cssRules ).toHaveLength( 1 );
 
 			const rule = mediaRules[ 0 ].cssRules[ 0 ] as CSSStyleRule;
-			expect( rule.selectorText ).toBe( ':where(.a8c-charts-scope, .a8c-charts-tooltip-scope)' );
+			expect( rule.selectorText ).toBe(
+				':where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip)'
+			);
 			expect(
 				Object.fromEntries(
 					Array.from( rule.style ).map( property => [
@@ -172,7 +174,9 @@ describe( 'chart scope catalog', () => {
 	} );
 
 	it( 'scopes the catalog to the chart and tooltip scope classes rather than :root', () => {
-		expect( stylesheet ).toMatch( /:where\(\.a8c-charts-scope, \.a8c-charts-tooltip-scope\)\s*{/ );
+		expect( stylesheet ).toMatch(
+			/:where\(\.a8c-charts-scope, \.a8c-charts-tooltip-scope, \.geo-chart \.google-visualization-tooltip\)\s*{/
+		);
 		expect( stylesheet ).not.toMatch( /(^|\s):root\s*{/ );
 	} );
 

package/src/types.ts

@@ -394,9 +394,15 @@ export type ChartTheme = {
 	 *
 	 * `fontFamily: 'inherit'` is load-bearing here — it overrides the font stack
 	 * `buildChartTheme` injects inline on SVG `<text>`.
+	 *
+	 * Give `fontSize` in pixels (`12` or `'12px'`). Margins and pie labels cannot measure `rem`, `em`, `%` or `var()`, so they use the default size and labels can clip (CHARTS-303). An invalid size is dropped.
 	 */
 	svgLabelSmall?: Omit< TextProps, 'fill' >;
-	/** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
+	/**
+	 * Styles for large SVG text (eg. axis titles), passed through to the XYChart theme.
+	 *
+	 * Give `fontSize` in pixels, as for `svgLabelSmall`.
+	 */
 	svgLabelBig?: TextProps;
 	annotationStyles?: ThemeAnnotationStyles;
 	/** LeaderboardChart specific settings */
@@ -654,6 +660,9 @@ export type ChartLegendConfig< T = DataPoint | DataPointDate | LeaderboardEntry
 	shapeStyles?: LegendShapeStyles;
 };
 
+/** Names a comparison series' legend item after the label of the series it is compared with. */
+export type ComparisonItemLabel = ( seriesLabel: string ) => string;
+
 /**
  * Legend config for charts built from `SeriesData` (line, bar, area). Adds `collapseGroups` on top
  * of the shared config. It is intentionally absent from the base `ChartLegendConfig` so point-based
@@ -674,6 +683,11 @@ export type SeriesChartLegendConfig = ChartLegendConfig< SeriesData[] > & {
 	 * Pass a string to replace the default label.
 	 */
 	comparisonItem?: boolean | string;
+	/**
+	 * Append one static item per comparison series instead, named by calling this with the label
+	 * of the series it is compared with, and left out while that series is hidden.
+	 */
+	comparisonSeriesItems?: ComparisonItemLabel;
 };
 
 /**
@@ -704,6 +718,10 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
 	 * Additional CSS class name for the chart container
 	 */
 	className?: string;
+	/**
+	 * Accessible name of the chart. Name it after what it shows, and give each chart on a page a different name. Each chart type has a localized default, such as "Line chart".
+	 */
+	ariaLabel?: string;
 	/**
 	 * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
 	 */

package/src/utils/resolve-font-size.ts

@@ -1,13 +1,16 @@
+const toFontSize = ( size: number ): number | undefined =>
+	Number.isFinite( size ) && size >= 0 ? size : undefined;
+
 /**
  * Resolve a theme `fontSize` value into a plain number suitable for
  * canvas-based measurement (e.g. `getStringWidth`).
  *
  * Accepts:
- * - A number — returned as-is
+ * - A finite, non-negative number — returned as-is
  * - A pixel string like `"12px"` — parsed and returned as a number
  *
- * Returns `undefined` for any other input (missing value, NaN, or
- * relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
+ * Returns `undefined` for any other input (missing value, a non-finite or
+ * negative size, or relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
  * their own default. Relative units are intentionally rejected because
  * we cannot resolve them to absolute pixels here without a parent
  * computed style, and silently returning the unitless prefix
@@ -18,19 +21,15 @@
  */
 export const resolveFontSize = ( val?: number | string ): number | undefined => {
 	if ( typeof val === 'number' ) {
-		return isNaN( val ) ? undefined : val;
+		return toFontSize( val );
 	}
 
 	if ( typeof val === 'string' ) {
 		// Only accept plain numeric strings or pixel values.
 		// Reject rem, em, %, vh, vw, etc. — they cannot be resolved to
 		// absolute pixels without a computed style context.
-		const match = val.trim().match( /^(-?\d+\.?\d*|-?\.\d+)(px)?$/ );
-		if ( ! match ) {
-			return undefined;
-		}
-		const parsed = parseFloat( match[ 1 ] );
-		return isNaN( parsed ) ? undefined : parsed;
+		const match = val.trim().match( /^\+?((?:\d*\.)?\d+)(px)?$/ );
+		return match ? toFontSize( parseFloat( match[ 1 ] ) ) : undefined;
 	}
 
 	return undefined;

package/src/utils/test/resolve-font-size.test.ts

@@ -11,8 +11,8 @@ describe( 'resolveFontSize', () => {
 			expect( resolveFontSize( 13.5 ) ).toBe( 13.5 );
 		} );
 
-		it( 'returns undefined for NaN', () => {
-			expect( resolveFontSize( NaN ) ).toBeUndefined();
+		it.each( [ NaN, Infinity, -12 ] )( 'returns undefined for %p', val => {
+			expect( resolveFontSize( val ) ).toBeUndefined();
 		} );
 	} );
 
@@ -25,8 +25,17 @@ describe( 'resolveFontSize', () => {
 		it( 'parses pixel strings', () => {
 			expect( resolveFontSize( '12px' ) ).toBe( 12 );
 			expect( resolveFontSize( '13.5px' ) ).toBe( 13.5 );
+			expect( resolveFontSize( '.5px' ) ).toBe( 0.5 );
+			expect( resolveFontSize( '+12px' ) ).toBe( 12 );
 		} );
 
+		it.each( [ '12.px', '12.', '-12px', '-.5', '9'.repeat( 400 ) + 'px' ] )(
+			'rejects %p, which is not a valid font size',
+			val => {
+				expect( resolveFontSize( val ) ).toBeUndefined();
+			}
+		);
+
 		it( 'trims whitespace before parsing', () => {
 			expect( resolveFontSize( '  14px  ' ) ).toBe( 14 );
 		} );