@automattic/charts 1.1.1 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.1.1",
+	"version": "1.2.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -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.10.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",
@@ -121,12 +121,12 @@
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.3.0",
 		"jest-extended": "7.0.0",
-		"postcss": "8.5.6",
+		"postcss": "8.5.10",
 		"postcss-modules": "6.0.1",
 		"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

@@ -14,20 +14,20 @@
 	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;
 }
 
@@ -53,29 +53,24 @@
 
 .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;
-	border-radius: 4px;
+	border-radius: var(--wpds-border-radius-md, 4px);
 	position: relative;
 	cursor: pointer;
 }
@@ -83,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;
@@ -101,35 +96,34 @@
 }
 
 .tooltip-wrapper {
-	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

@@ -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' ],
@@ -369,7 +371,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 								gap="xl"
 							>
 								{ /* Step Label and Rate */ }
-								<div>
+								<Stack direction="column" gap="xs">
 									{ renderStepLabel ? (
 										renderStepLabel( {
 											step,
@@ -390,7 +392,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 											{ formatPercentage( step.rate ) }
 										</span>
 									) }
-								</div>
+								</Stack>
 
 								{ /* Funnel Bar */ }
 								<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,21 +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 {
-		padding: 4px 0;
+		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 {
@@ -61,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 {
@@ -79,7 +82,7 @@
 	}
 
 	&__annotation-label-popover-content {
-		padding: 0.5rem;
+		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 
 	&__annotation-label-popover-close-button {

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

@@ -3,7 +3,7 @@
 }
 
 .legend-item {
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 
 	&--interactive {
 		cursor: pointer;
@@ -17,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) {
@@ -52,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
 }

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

@@ -1,9 +1,9 @@
 .tooltip {
-	padding: 0.5rem;
+	padding: var(--wpds-dimension-padding-sm, 8px);
 	background-color: rgba(0, 0, 0, 0.85);
 	color: #fff;
-	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: absolute;
 	pointer-events: none;

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -2,8 +2,8 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.125em;
-	font-size: var(--wpds-font-size-md, 13px);
-	font-weight: var(--wpds-font-weight-medium, 499);
+	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
 	line-height: 1;
 
 	&--up {