@automattic/charts 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.5",
+		"@automattic/number-formatters": "^1.1.6",
 		"@babel/runtime": "7.29.2",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -84,8 +84,8 @@
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
 		"@wordpress/icons": "^12.0.0",
-		"@wordpress/theme": "0.10.0",
-		"@wordpress/ui": "0.9.0",
+		"@wordpress/theme": "0.11.0",
+		"@wordpress/ui": "0.11.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -99,8 +99,8 @@
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
-		"@storybook/addon-docs": "10.3.3",
-		"@storybook/react": "10.3.3",
+		"@storybook/addon-docs": "10.3.5",
+		"@storybook/react": "10.3.5",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -110,9 +110,9 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "32.5.0",
-		"@wordpress/element": "6.43.0",
-		"@wordpress/private-apis": "1.43.0",
+		"@wordpress/components": "32.6.0",
+		"@wordpress/element": "6.44.0",
+		"@wordpress/private-apis": "1.44.0",
 		"babel-jest": "30.3.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
 		"esbuild": "0.27.4",
@@ -126,7 +126,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.3",
+		"storybook": "10.3.5",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -7,10 +7,6 @@
 }
 
 .main-metric {
-	display: flex;
-	align-items: baseline;
-	gap: 8px;
-	margin-bottom: 24px;
 	height: 20px;
 }
 
@@ -18,27 +14,24 @@
 	overflow: hidden;
 	color: #1e1e1e;
 	text-overflow: ellipsis;
-	font-size: var(--wpds-font-size-xl, 18px);
+	font-size: var(--wpds-typography-font-size-xl, 18px);
 	font-style: normal;
-	font-weight: var(--wpds-font-weight-medium, 499);
-	line-height: var(--wpds-font-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	line-height: var(--wpds-typography-line-height-sm, 20px);
 	margin: 0;
 }
 
 .change-indicator {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
-	font-weight: var(--wpds-font-weight-medium, 499);
-	line-height: var(--wpds-font-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	line-height: var(--wpds-typography-line-height-sm, 20px);
 	margin: 0;
 }
 
 .funnel-container {
-	display: flex;
-	gap: 16px;
-	align-items: flex-end;
 	flex: 1;
 	min-height: 200px;
 	width: 100%;
@@ -47,8 +40,6 @@
 .funnel-step {
 	flex: 1 1 0;
 	min-width: 0;
-	display: flex;
-	flex-direction: column;
 	height: 100%;
 
 	&--animated {
@@ -60,37 +51,26 @@
 	}
 }
 
-.step-header {
-	margin-bottom: 24px;
-}
-
 .step-label {
 	color: #757575;
-	font-size: var(--wpds-font-size-sm, 12px);
-	font-style: normal;
-	font-weight: var(--wpds-font-weight-regular, 400);
-	line-height: var(--wpds-font-line-height-xs, 16px);
-	margin: 0 0 2px 0;
-	display: block;
+	font-size: var(--wpds-typography-font-size-sm, 12px);
+	font-weight: var(--wpds-typography-font-weight-regular, 400);
+	line-height: var(--wpds-typography-line-height-xs, 16px);
+	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .step-rate {
 	color: #1e1e1e;
-	font-size: var(--wpds-font-size-md, 13px);
-	font-style: normal;
-	font-weight: var(--wpds-font-weight-medium, 499);
-	line-height: var(--wpds-font-line-height-sm, 20px);
-	margin: 0;
-	display: block;
+	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	line-height: var(--wpds-typography-line-height-xs, 16px);
 }
 
 .bar-container {
 	flex: 1;
-	display: flex;
-	align-items: flex-end;
-	border-radius: 4px;
+	border-radius: var(--wpds-border-radius-md, 4px);
 	position: relative;
 	cursor: pointer;
 }
@@ -98,7 +78,7 @@
 .funnel-bar {
 	width: 100%;
 	min-height: 4px;
-	border-radius: 4px 4px 0 0;
+	border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
 
 	&--animated {
 		transform-origin: bottom;
@@ -116,41 +96,34 @@
 }
 
 .tooltip-wrapper {
-	display: inline-flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: flex-start;
-	gap: 4px;
-
-	border-bottom: 1px solid var(--Gray-Gray-5, #dcdcde);
+	border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
 	background: var(--black-white-white, #fff);
 
 	// Override .visx-tooltip inline styles.
-	border-radius: 4px !important;
-	padding: 12px !important;
+	border-radius: var(--wpds-border-radius-md, 4px) !important;
+	padding: var(--wpds-dimension-padding-md, 12px) !important;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;
 
 }
 
 .tooltip-title {
 	color: #1e1e1e;
-	font-size: var(--wpds-font-size-sm, 12px);
+	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-style: normal;
-	font-weight: var(--wpds-font-weight-regular, 400);
-	line-height: var(--wpds-font-line-height-xs, 16px);
+	font-weight: var(--wpds-typography-font-weight-regular, 400);
+	line-height: var(--wpds-typography-line-height-xs, 16px);
 }
 
 .tooltip-content {
 	color: #1e1e1e;
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
-	font-weight: var(--wpds-font-weight-medium, 499);
-	line-height: var(--wpds-font-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	line-height: var(--wpds-typography-line-height-sm, 20px);
 }
 
 .empty-state {
 	text-align: center;
-	padding: 48px 24px;
 	color: #6b7280;
-	font-size: var(--wpds-font-size-lg, 16px);
+	font-size: var(--wpds-typography-font-size-lg, 16px);
 }

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

@@ -263,13 +263,13 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 
 	// Default tooltip rendering function
 	const renderDefaultTooltip = ( step: FunnelStep ) => (
-		<>
+		<Stack direction="column" align="flex-start" gap="xs">
 			<div className={ styles[ 'tooltip-title' ] }>{ step.label }</div>
 			<div className={ styles[ 'tooltip-content' ] }>
 				{ formatPercentage( step.rate ) }
 				{ ` • ${ step.count ?? 'no' } items` }
 			</div>
-		</>
+		</Stack>
 	);
 
 	// Validate data
@@ -300,6 +300,8 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		return (
 			<Stack
 				direction="column"
+				align="center"
+				justify="center"
 				data-testid="conversion-funnel-chart"
 				className={ clsx(
 					styles[ 'conversion-funnel-chart' ],
@@ -322,6 +324,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		<>
 			<Stack
 				direction="column"
+				gap="xl"
 				data-testid="conversion-funnel-chart"
 				ref={ node => {
 					// Set containerRef for @visx coordinate system
@@ -344,27 +347,31 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 						changeColor,
 					} )
 				) : (
-					<div className={ styles[ 'main-metric' ] }>{ renderDefaultMainMetric() }</div>
+					<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
+						{ renderDefaultMainMetric() }
+					</Stack>
 				) }
 
 				{ /* Funnel Steps */ }
-				<div className={ styles[ 'funnel-container' ] }>
+				<Stack direction="row" align="flex-end" gap="lg" className={ styles[ 'funnel-container' ] }>
 					{ steps.map( ( step, index ) => {
 						const barHeight = ( step.rate / maxRate ) * 100;
 						const { isBlurred } = getStepState( step.id );
 
 						return (
-							<div
+							<Stack
 								key={ step.id }
+								direction="column"
 								data-testid="funnel-step"
 								className={ clsx(
 									styles[ 'funnel-step' ],
 									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
 									isBlurred && styles[ 'funnel-step--blurred' ]
 								) }
+								gap="xl"
 							>
 								{ /* Step Label and Rate */ }
-								<div className={ styles[ 'step-header' ] }>
+								<Stack direction="column" gap="xs">
 									{ renderStepLabel ? (
 										renderStepLabel( {
 											step,
@@ -385,10 +392,12 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 											{ formatPercentage( step.rate ) }
 										</span>
 									) }
-								</div>
+								</Stack>
 
 								{ /* Funnel Bar */ }
-								<div
+								<Stack
+									direction="column"
+									justify="flex-end"
 									className={ styles[ 'bar-container' ] }
 									onClick={ stepHandlers.get( step.id )?.onClick }
 									onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
@@ -407,11 +416,11 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 											backgroundColor: barColor,
 										} }
 									/>
-								</div>
-							</div>
+								</Stack>
+							</Stack>
 						);
 					} ) }
-				</div>
+				</Stack>
 			</Stack>
 
 			{ /* Tooltip Portal */ }

package/src/charts/geo-chart/geo-chart.module.scss

@@ -1,6 +1,3 @@
 .container {
 	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
 }

package/src/charts/geo-chart/geo-chart.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
 import { Chart, type GoogleChartOptions } from 'react-google-charts';
@@ -57,13 +58,15 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 
 	// Render loading placeholder
 	const loadingPlaceholder = (
-		<div
+		<Stack
+			align="center"
+			justify="center"
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart-loading"
 			style={ { width, height } }
 		>
 			{ renderPlaceholder ? renderPlaceholder() : __( 'Loading map', 'jetpack-charts' ) }
-		</div>
+		</Stack>
 	);
 
 	// Google charts doesn't accept CSS variables, so we need to convert them to hex colors
@@ -144,7 +147,9 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	);
 
 	return (
-		<div
+		<Stack
+			align="center"
+			justify="center"
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
 			style={ { width, height, backgroundColor } }
@@ -157,7 +162,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 				options={ options }
 				loader={ loadingPlaceholder }
 			/>
-		</div>
+		</Stack>
 	);
 };
 

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -21,6 +21,10 @@
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr;
+	// Outlier: not tokenized. The leaderboard's compact bar + gap + bar
+	// rhythm (6px bar, 6px row-gap, 6px bar) is intentional and does not
+	// map to any WPDS dimension token — gap-sm (8px) breaks the visual
+	// balance between the rows and the bars.
 	row-gap: 6px;
 	isolation: isolate;
 
@@ -34,7 +38,7 @@
 		}
 
 		.label {
-			padding-left: 8px;
+			padding-left: var(--wpds-dimension-padding-sm, 8px);
 		}
 	}
 
@@ -70,9 +74,9 @@
 }
 
 .emptyState {
-	padding: 32px 16px;
+	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
 	text-align: center;
 	color: #666;
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: italic;
 }

package/src/charts/line-chart/line-chart.module.scss

@@ -17,24 +17,21 @@
 	&__tooltip,
 	&__annotation-label-popover {
 		background: #fff;
-		padding: 0.5rem;
+		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 
 	&__tooltip-date {
-		font-weight: var(--wpds-font-weight-medium, 499);
-		padding-bottom: 10px;
+		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		padding-bottom: var(--wpds-dimension-padding-md, 12px);
 	}
 
 	&__tooltip-row {
-		display: flex;
-		align-items: center;
-		padding: 4px 0;
-		justify-content: space-between;
+		padding: var(--wpds-dimension-padding-xs, 4px) 0;
 	}
 
 	&__tooltip-label {
-		font-weight: var(--wpds-font-weight-medium, 499);
-		padding-right: 1rem;
+		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		padding-right: var(--wpds-dimension-padding-lg, 16px);
 	}
 
 	&__annotations-overlay {
@@ -64,11 +61,14 @@
 		min-width: 125px;
 		background: #fff;
 		border: none;
-		border-radius: 4px;
-		font-size: var(--wpds-font-size-md, 13px);
+		border-radius: var(--wpds-border-radius-md, 4px);
+		font-size: var(--wpds-typography-font-size-md, 13px);
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 		position: fixed;
-		margin: 0.5rem;
+		// Without margin set, the popover has margin:auto which upsets the
+		// positioning relative to the trigger button. A gap token is appropriate
+		// because it creates a gap to the trigger button.
+		margin: var(--wpds-dimension-gap-sm, 8px);
 		visibility: hidden;
 
 		&--visible {
@@ -81,15 +81,8 @@
 		}
 	}
 
-	&__annotation-label-popover-header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: start;
-	}
-
 	&__annotation-label-popover-content {
-		padding: 0.5rem;
+		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 
 	&__annotation-label-popover-close-button {

package/src/charts/line-chart/line-chart.tsx

@@ -4,6 +4,7 @@ import { LinearGradient } from '@visx/gradient';
 import { scaleTime } from '@visx/scale';
 import { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { differenceInHours, differenceInYears } from 'date-fns';
 import {
@@ -103,12 +104,18 @@ const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) =>
 				{ nearestDatum.date?.toLocaleDateString() }
 			</div>
 			{ tooltipPoints.map( point => (
-				<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>
+				<Stack
+					key={ point.key }
+					direction="row"
+					align="center"
+					justify="space-between"
+					className={ styles[ 'line-chart__tooltip-row' ] }
+				>
 					<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>
 					<span className={ styles[ 'line-chart__tooltip-value' ] }>
 						{ formatNumber( point.value ) }
 					</span>
-				</div>
+				</Stack>
 			) ) }
 		</div>
 	);

package/src/charts/line-chart/private/line-chart-annotation-label-popover.tsx

@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { Icon, close } from '@wordpress/icons';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useEffect, useId, useRef, useState } from 'react';
 import { isSafari } from '../../../utils';
@@ -88,7 +89,7 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 				) }
 				data-testid="line-chart-annotation-label-popover"
 			>
-				<div className={ styles[ 'line-chart__annotation-label-popover-header' ] }>
+				<Stack direction="row" align="flex-start" justify="space-between">
 					<div className={ styles[ 'line-chart__annotation-label-popover-content' ] }>
 						{ renderLabelPopover( { title, subtitle } ) }
 					</div>
@@ -102,7 +103,7 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 					>
 						<Icon icon={ close } size={ 16 } />
 					</button>
-				</div>
+				</Stack>
 			</div>
 		</div>
 	);

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -11,11 +11,11 @@
 	}
 
 	.label {
-		font-weight: var(--wpds-font-weight-medium, 499);
-		font-size: var(--wpds-font-size-lg, 16px);
+		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		font-size: var(--wpds-typography-font-size-lg, 16px);
 	}
 
 	.note {
-		font-size: var(--wpds-font-size-md, 13px);
+		font-size: var(--wpds-typography-font-size-md, 13px);
 	}
 }

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -2,6 +2,6 @@
 	text-align: center;
 	width: 100%;
 	height: 100%;
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 	color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
 }

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

@@ -1,50 +1,9 @@
 .legend {
 	align-self: stretch;
-
-	&--horizontal {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		gap: 16px;
-	}
-
-	&--vertical {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&--alignment-start {
-		justify-content: flex-start;
-	}
-
-	&--alignment-center {
-		justify-content: center;
-	}
-
-	&--alignment-end {
-		justify-content: flex-end;
-	}
-
-	// Vertical legends align on the cross-axis instead
-	&--vertical.legend--alignment-start {
-		align-items: flex-start;
-	}
-
-	&--vertical.legend--alignment-center {
-		align-items: center;
-	}
-
-	&--vertical.legend--alignment-end {
-		align-items: flex-end;
-	}
-
 }
 
 .legend-item {
-	display: flex;
-	align-items: center;
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 
 	&--interactive {
 		cursor: pointer;
@@ -58,7 +17,7 @@
 		&:focus {
 			outline: 2px solid currentColor;
 			outline-offset: 2px;
-			border-radius: 4px;
+			border-radius: var(--wpds-border-radius-md, 4px);
 		}
 
 		&:focus:not(:focus-visible) {
@@ -75,14 +34,6 @@
 	}
 }
 
-.legend-item-label {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-
-	/* Text wrapping is handled at the text level, not the label container */
-}
-
 .legend-item-text {
 
 	&--wrap {
@@ -101,6 +52,6 @@
 }
 
 .legend-item-value {
-	font-weight: var(--wpds-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }