@automattic/charts 1.1.0 → 1.2.0

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

@@ -1,6 +1,7 @@
 import { Group } from '@visx/group';
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import {
 	type RefAttributes,
@@ -16,10 +17,11 @@ import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '.
 import styles from './base-legend.module.scss';
 import type { BaseLegendProps } from '../types';
 
-const orientationToFlexDirection = {
-	horizontal: 'row' as const,
-	vertical: 'column' as const,
-};
+const ALIGNMENT_TO_FLEX = {
+	start: 'flex-start',
+	center: 'center',
+	end: 'flex-end',
+} as const;
 
 // Component for legend text with truncation detection
 // Moved outside BaseLegend to prevent recreation on every render
@@ -159,6 +161,8 @@ export const BaseLegend: ForwardRefExoticComponent<
 			[ interactive, handleLegendClick ]
 		);
 
+		const flexAlignment = ALIGNMENT_TO_FLEX[ alignment ] ?? 'center';
+
 		return render ? (
 			render( items )
 		) : (
@@ -168,20 +172,17 @@ export const BaseLegend: ForwardRefExoticComponent<
 				labelTransform={ labelTransform }
 			>
 				{ labels => (
-					<div
+					<Stack
 						ref={ ref }
+						direction={ orientation === 'vertical' ? 'column' : 'row' }
+						gap={ orientation === 'vertical' ? 'sm' : 'lg' }
+						align={ orientation === 'vertical' ? flexAlignment : undefined }
+						justify={ orientation === 'horizontal' ? flexAlignment : undefined }
+						wrap={ orientation === 'horizontal' ? 'wrap' : undefined }
 						role="list"
 						data-testid={ `legend-${ orientation }` }
-						className={ clsx(
-							styles.legend,
-							styles[ `legend--${ orientation }` ],
-							styles[ `legend--alignment-${ alignment }` ],
-							className
-						) }
-						style={ {
-							flexDirection: orientationToFlexDirection[ orientation ],
-							...theme.legend?.containerStyles,
-						} }
+						className={ clsx( styles.legend, className ) }
+						style={ theme.legend?.containerStyles }
 					>
 						{ labels.map( ( label, i ) => {
 							const visible = isSeriesVisible( label.text );
@@ -257,28 +258,29 @@ export const BaseLegend: ForwardRefExoticComponent<
 											labelClassName
 										) }
 										style={ {
-											justifyContent: labelJustifyContent,
 											flex: labelFlex,
 											margin: labelMargin,
 											...theme.legend?.labelStyles,
 										} }
 									>
-										<LegendText
-											text={ label.text }
-											textOverflow={ textOverflow }
-											maxWidth={ maxWidth }
-										/>
-										{ matchedItem?.value != null && matchedItem.value !== '' && (
-											<span className={ styles[ 'legend-item-value' ] }>
-												{ '\u00A0' }
-												{ matchedItem.value }
-											</span>
-										) }
+										<Stack align="center" gap="sm" justify={ labelJustifyContent }>
+											<LegendText
+												text={ label.text }
+												textOverflow={ textOverflow }
+												maxWidth={ maxWidth }
+											/>
+											{ matchedItem?.value != null && matchedItem.value !== '' && (
+												<span className={ styles[ 'legend-item-value' ] }>
+													{ '\u00A0' }
+													{ matchedItem.value }
+												</span>
+											) }
+										</Stack>
 									</LegendLabel>
 								</LegendItem>
 							);
 						} ) }
-					</div>
+					</Stack>
 				) }
 			</LegendOrdinal>
 		);

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 {