@automattic/charts 0.56.7 → 0.58.0

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

@@ -53,13 +53,15 @@ describe( 'LineChart', () => {
 		],
 	};
 
-	const renderWithTheme = ( props = {}, themeName = 'default' ) => {
+	const renderWithTheme = ( props = {}, themeName = 'default', children = undefined ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
 			<GlobalChartsProvider theme={ theme }>
 				{ /* @ts-expect-error TODO Fix the missing props */ }
-				<LineChart { ...defaultProps } { ...props } />
+				<LineChart { ...defaultProps } { ...props }>
+					{ children }
+				</LineChart>
 			</GlobalChartsProvider>
 		);
 	};
@@ -130,36 +132,56 @@ describe( 'LineChart', () => {
 	} );
 
 	describe( 'Legend', () => {
+		const multiSeriesData = [
+			{
+				label: 'Series A',
+				data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+			},
+			{
+				label: 'Series B',
+				data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+			},
+		];
+
 		test( 'shows legend when showLegend is true', () => {
-			renderWithTheme( {
-				showLegend: true,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-					},
-					{
-						label: 'Series B',
-						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: true, data: multiSeriesData } );
 			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
 		} );
 
 		test( 'hides legend when showLegend is false', () => {
-			renderWithTheme( {
-				showLegend: false,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: false, data: multiSeriesData } );
 			expect( screen.queryByText( 'Series A' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'renders composition legend as child component', () => {
+			renderWithTheme( { data: multiSeriesData }, 'default', <LineChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderWithTheme(
+				{ data: multiSeriesData, showLegend: false },
+				'default',
+				<LineChart.Legend />
+			);
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderWithTheme( { data: multiSeriesData }, 'default', <LineChart.Legend position="top" /> );
+
+			// Legend should appear before the chart content in DOM order
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'role="grid"' )
+			);
+		} );
 	} );
 
 	describe( 'Gradient Fill', () => {
@@ -1178,7 +1200,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ true }
+						legend={ { interactive: true } }
 						chartId="test-interactive-chart"
 					/>
 				</GlobalChartsProvider>
@@ -1200,7 +1222,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ false }
+						legend={ { interactive: false } }
 						chartId="test-non-interactive-chart"
 					/>
 				</GlobalChartsProvider>
@@ -1218,7 +1240,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ true }
+						legend={ { interactive: true } }
 						// No chartId provided
 					/>
 				</GlobalChartsProvider>

package/src/charts/line-chart/types.ts

@@ -41,7 +41,6 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 		showVertical?: boolean;
 		showHorizontal?: boolean;
 	};
-	legendInteractive?: boolean;
 	children?: ReactNode;
 }
 

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

@@ -18,7 +18,12 @@ import {
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
 import { getStringWidth } from '../../visx/text';
-import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import {
+	ChartSVG,
+	ChartHTML,
+	useChartChildren,
+	renderLegendSlot,
+} from '../private/chart-composition';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive, ResponsiveConfig } from '../private/with-responsive';
@@ -93,13 +98,6 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 */
 	legendValueDisplay?: LegendValueDisplay;
 
-	/**
-	 * Enable interactive legend items that can toggle segment visibility.
-	 * Requires chartId and GlobalChartsProvider.
-	 * When segments are hidden, percentages are recalculated so visible segments total 100%.
-	 */
-	legendInteractive?: boolean;
-
 	/**
 	 * Use the children prop to render additional elements on the chart.
 	 */
@@ -169,13 +167,7 @@ const PieChartInternal = ( {
 	withTooltips = false,
 	className,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendMaxWidth,
-	legendTextOverflow = 'wrap',
-	legendItemClassName,
-	legendShape = 'circle',
+	legend = {},
 	width: propWidth,
 	height: propHeight,
 	size,
@@ -186,13 +178,15 @@ const PieChartInternal = ( {
 	cornerScale = 0,
 	showLabels = true,
 	legendValueDisplay = 'percentage',
-	legendInteractive = false,
 	children = null,
 	tooltipOffsetX = 0,
 	tooltipOffsetY = -15,
 	renderTooltip = renderDefaultPieTooltip,
 	gap = 'md',
 }: PieChartProps ) => {
+	const legendInteractive = legend.interactive ?? false;
+	const legendPosition = legend.position ?? 'bottom';
+
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId( providedChartId );
 	const [ svgWrapperRef, svgWrapperWidth, svgWrapperHeight ] = useElementSize< HTMLDivElement >();
@@ -236,7 +230,10 @@ const PieChartInternal = ( {
 	const { isValid, message } = validateData( data );
 
 	// Process children to extract compound components
-	const { svgChildren, htmlChildren, otherChildren } = useChartChildren( children, 'PieChart' );
+	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(
+		children,
+		'PieChart'
+	);
 
 	// Memoize metadata to prevent unnecessary re-registration
 	const chartMetadata = useMemo(
@@ -314,13 +311,14 @@ const PieChartInternal = ( {
 
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			maxWidth={ legendMaxWidth }
-			textOverflow={ legendTextOverflow }
-			legendItemClassName={ legendItemClassName }
-			shape={ legendShape }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shapeStyles={ legend.shapeStyles }
+			shape={ legend.shape ?? 'circle' }
 			chartId={ chartId }
 			interactive={ legendInteractive }
 		/>
@@ -351,6 +349,7 @@ const PieChartInternal = ( {
 				} }
 			>
 				{ legendPosition === 'top' && legendElement }
+				{ renderLegendSlot( legendChildren, 'top' ) }
 
 				<div className={ styles[ 'pie-chart__svg-wrapper' ] } ref={ svgWrapperRef }>
 					<svg
@@ -483,6 +482,7 @@ const PieChartInternal = ( {
 				</div>
 
 				{ legendPosition === 'bottom' && legendElement }
+				{ renderLegendSlot( legendChildren, 'bottom' ) }
 
 				{ withTooltips && tooltipOpen && tooltipData && (
 					<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>

package/src/charts/pie-chart/test/composition-api.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Group } from '@visx/group';
 import '@testing-library/jest-dom';
+import { GlobalChartsProvider } from '../../../providers';
 import { PieChartUnresponsive as PieChart } from '../index';
 
 describe( 'PieChart Composition API', () => {
@@ -10,6 +11,16 @@ describe( 'PieChart Composition API', () => {
 		{ label: 'C', value: 30, percentage: 30 },
 	];
 
+	const renderWithChildren = ( props = {}, children = undefined ) => {
+		return render(
+			<GlobalChartsProvider>
+				<PieChart data={ mockData } size={ 400 } { ...props }>
+					{ children }
+				</PieChart>
+			</GlobalChartsProvider>
+		);
+	};
+
 	describe( 'Compound Components', () => {
 		it( 'renders PieChart.SVG children inside the SVG element', () => {
 			render(
@@ -148,4 +159,34 @@ describe( 'PieChart Composition API', () => {
 			expect( svg!.contains( newHtml ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'Composition Legend', () => {
+		test( 'renders composition legend as child component', () => {
+			renderWithChildren( {}, <PieChart.Legend /> );
+
+			const legendItems = screen.getAllByTestId( 'legend-item' );
+			expect( legendItems ).toHaveLength( 3 );
+			expect( legendItems[ 0 ] ).toHaveTextContent( 'A' );
+			expect( legendItems[ 1 ] ).toHaveTextContent( 'B' );
+			expect( legendItems[ 2 ] ).toHaveTextContent( 'C' );
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderWithChildren( { showLegend: false }, <PieChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 3 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderWithChildren( {}, <PieChart.Legend position="top" /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 3 );
+
+			// Legend should appear before the chart SVG in DOM order
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'data-testid="pie-segment"' )
+			);
+		} );
+	} );
 } );

package/src/charts/pie-chart/test/pie-chart.test.tsx

@@ -60,7 +60,7 @@ describe( 'PieChart', () => {
 		test( 'renders legend when showLegend is true', () => {
 			renderWithTheme( {
 				showLegend: true,
-				legendPosition: 'top',
+				legend: { position: 'top' },
 			} );
 
 			// Check that legend container is rendered using accessible queries
@@ -72,7 +72,7 @@ describe( 'PieChart', () => {
 		test( 'renders correct number of legend items', () => {
 			renderWithTheme( {
 				showLegend: true,
-				legendPosition: 'top',
+				legend: { position: 'top' },
 			} );
 
 			// Use getAllByTestId to find legend items
@@ -83,7 +83,7 @@ describe( 'PieChart', () => {
 		test( 'chart renders with legend at top position', () => {
 			renderWithTheme( {
 				showLegend: true,
-				legendPosition: 'top',
+				legend: { position: 'top' },
 			} );
 
 			// Verify the chart renders without errors when legend is at top
@@ -98,7 +98,7 @@ describe( 'PieChart', () => {
 		test( 'chart renders with legend at bottom position', () => {
 			renderWithTheme( {
 				showLegend: true,
-				legendPosition: 'bottom',
+				legend: { position: 'bottom' },
 			} );
 
 			// Verify the chart renders without errors when legend is at bottom
@@ -379,7 +379,7 @@ describe( 'PieChart', () => {
 			renderWithTheme( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-interactive-pie-chart',
 			} );
 
@@ -411,7 +411,7 @@ describe( 'PieChart', () => {
 			renderWithTheme( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-all-hidden-pie-chart',
 			} );
 
@@ -450,7 +450,7 @@ describe( 'PieChart', () => {
 			renderWithTheme( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: false,
+				legend: { interactive: false },
 				chartId: 'test-non-interactive-pie-chart',
 			} );
 
@@ -474,7 +474,7 @@ describe( 'PieChart', () => {
 			renderWithTheme( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-color-consistency-pie-chart',
 			} );
 
@@ -506,7 +506,7 @@ describe( 'PieChart', () => {
 			renderWithTheme( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				legendValueDisplay: 'percentage',
 				chartId: 'test-percentage-recalc-pie-chart',
 			} );

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -17,7 +17,12 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
-import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import {
+	ChartSVG,
+	ChartHTML,
+	useChartChildren,
+	renderLegendSlot,
+} from '../private/chart-composition';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
@@ -98,13 +103,6 @@ export interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercen
 	 */
 	legendValueDisplay?: LegendValueDisplay;
 
-	/**
-	 * Enable interactive legend items that can toggle segment visibility.
-	 * Requires chartId and GlobalChartsProvider.
-	 * When segments are hidden, percentages are recalculated so visible segments total 100%.
-	 */
-	legendInteractive?: boolean;
-
 	/**
 	 * Horizontal offset for tooltip positioning in pixels (default: 0)
 	 */
@@ -167,15 +165,8 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	clockwise = true,
 	withTooltips = false,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendMaxWidth,
-	legendTextOverflow = 'wrap',
-	legendItemClassName,
-	legendShape = 'circle',
+	legend = {},
 	legendValueDisplay = 'percentage',
-	legendInteractive = false,
 	label,
 	animation,
 	note,
@@ -186,6 +177,9 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	renderTooltip = renderDefaultPieSemiCircleTooltip,
 	gap = 'md',
 } ) => {
+	const legendInteractive = legend.interactive ?? false;
+	const legendPosition = legend.position ?? 'bottom';
+
 	const chartId = useChartId( providedChartId );
 	// Measure the SVG wrapper to calculate constrained dimensions
 	const [ svgWrapperRef, svgWrapperWidth, svgWrapperHeight ] = useElementSize< HTMLDivElement >();
@@ -277,7 +271,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	const legendItems = useChartLegendItems( legendData, legendOptions );
 
 	// Process children to extract compound components
-	const { svgChildren, htmlChildren, otherChildren } = useChartChildren(
+	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(
 		children,
 		'PieSemiCircleChart'
 	);
@@ -349,13 +343,14 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			maxWidth={ legendMaxWidth }
-			textOverflow={ legendTextOverflow }
-			legendItemClassName={ legendItemClassName }
-			shape={ legendShape }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shapeStyles={ legend.shapeStyles }
+			shape={ legend.shape ?? 'circle' }
 			chartId={ chartId }
 			interactive={ legendInteractive }
 		/>
@@ -388,6 +383,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 				data-testid="pie-chart-container"
 			>
 				{ legendPosition === 'top' && legendElement }
+				{ renderLegendSlot( legendChildren, 'top' ) }
 
 				<div ref={ svgWrapperRef } className={ styles[ 'pie-semi-circle-chart__svg-wrapper' ] }>
 					<svg
@@ -484,7 +480,8 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					</svg>
 				</div>
 
-				{ legendPosition !== 'top' && legendElement }
+				{ legendPosition === 'bottom' && legendElement }
+				{ renderLegendSlot( legendChildren, 'bottom' ) }
 
 				{ withTooltips && tooltipOpen && tooltipData && (
 					<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>

package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -29,10 +29,10 @@ const mockData = [
 ];
 
 // Helper function to render component with providers
-const renderPieChart = props =>
+const renderPieChart = ( props, children = undefined ) =>
 	render(
 		<GlobalChartsProvider>
-			<PieSemiCircleChart { ...props } />
+			<PieSemiCircleChart { ...props }>{ children }</PieSemiCircleChart>
 		</GlobalChartsProvider>
 	);
 
@@ -256,6 +256,34 @@ describe( 'PieSemiCircleChart', () => {
 		} );
 	} );
 
+	describe( 'Composition Legend', () => {
+		test( 'renders composition legend as child component', () => {
+			renderPieChart( { data: mockData }, <PieSemiCircleChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			expect( screen.getByText( 'Category A' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Category B' ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderPieChart( { data: mockData, showLegend: false }, <PieSemiCircleChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderPieChart( { data: mockData }, <PieSemiCircleChart.Legend position="top" /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+
+			// Legend should appear before the chart SVG in DOM order
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'data-testid="pie-chart-svg"' )
+			);
+		} );
+	} );
+
 	describe( 'Interactive Legend', () => {
 		test( 'filters segments when interactive legend is enabled and segment is toggled', async () => {
 			const user = userEvent.setup();
@@ -267,7 +295,7 @@ describe( 'PieSemiCircleChart', () => {
 			renderPieChart( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-interactive-semi-circle-chart',
 			} );
 
@@ -299,7 +327,7 @@ describe( 'PieSemiCircleChart', () => {
 			renderPieChart( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-all-hidden-semi-circle-chart',
 			} );
 
@@ -326,7 +354,7 @@ describe( 'PieSemiCircleChart', () => {
 			renderPieChart( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: false,
+				legend: { interactive: false },
 				chartId: 'test-non-interactive-semi-circle-chart',
 			} );
 

package/src/charts/private/chart-composition/index.ts

@@ -1,4 +1,6 @@
 export { ChartSVG } from './chart-svg';
 export { ChartHTML } from './chart-html';
+export { renderLegendSlot } from './render-legend-slot';
 export { useChartChildren } from './use-chart-children';
+export type { LegendChild } from './use-chart-children';
 export type { BaseChartSubComponents, ChartComponentWithComposition } from './types';

package/src/charts/private/chart-composition/render-legend-slot.ts

@@ -0,0 +1,22 @@
+import { createElement, Fragment } from 'react';
+import type { LegendChild } from './use-chart-children';
+import type { LegendPosition } from '../../../types';
+import type { ReactNode } from 'react';
+
+/**
+ * Renders legend children filtered by position slot.
+ *
+ * @param {LegendChild[]}  legendChildren - The legend children to filter and render
+ * @param {LegendPosition} position       - The position slot to render
+ * @return {ReactNode[]} Array of legend elements for the given position
+ */
+export function renderLegendSlot(
+	legendChildren: LegendChild[],
+	position: LegendPosition
+): ReactNode[] {
+	return legendChildren
+		.filter( l => l.position === position )
+		.map( ( l, i ) =>
+			createElement( Fragment, { key: `legend-${ position }-${ i }` }, l.element )
+		);
+}

package/src/charts/private/chart-composition/test/render-legend-slot.test.tsx

@@ -0,0 +1,60 @@
+import { createElement } from 'react';
+import { renderLegendSlot } from '../render-legend-slot';
+import type { LegendChild } from '../use-chart-children';
+
+const makeLegend = ( position: 'top' | 'bottom', label: string ): LegendChild => ( {
+	element: createElement( 'div', null, label ),
+	position,
+} );
+
+describe( 'renderLegendSlot', () => {
+	it( 'should return an empty array when given no children', () => {
+		expect( renderLegendSlot( [], 'top' ) ).toHaveLength( 0 );
+	} );
+
+	it( 'should return an empty array when no children match the position', () => {
+		const children = [ makeLegend( 'bottom', 'Legend 1' ) ];
+
+		expect( renderLegendSlot( children, 'top' ) ).toHaveLength( 0 );
+	} );
+
+	it( 'should return a single matching child', () => {
+		const children = [ makeLegend( 'top', 'Legend 1' ) ];
+		const view = renderLegendSlot( children, 'top' );
+
+		expect( view ).toHaveLength( 1 );
+		expect( view[ 0 ] ).toHaveProperty( 'key', 'legend-top-0' );
+	} );
+
+	it( 'should return multiple matching children in order', () => {
+		const children = [ makeLegend( 'bottom', 'Legend 1' ), makeLegend( 'bottom', 'Legend 2' ) ];
+		const view = renderLegendSlot( children, 'bottom' );
+
+		expect( view ).toHaveLength( 2 );
+		expect( view[ 0 ] ).toHaveProperty( 'key', 'legend-bottom-0' );
+		expect( view[ 1 ] ).toHaveProperty( 'key', 'legend-bottom-1' );
+	} );
+
+	it( 'should filter out children with a different position', () => {
+		const children = [
+			makeLegend( 'top', 'Top Legend' ),
+			makeLegend( 'bottom', 'Bottom Legend' ),
+			makeLegend( 'top', 'Another Top Legend' ),
+		];
+
+		expect( renderLegendSlot( children, 'top' ) ).toHaveLength( 2 );
+		expect( renderLegendSlot( children, 'bottom' ) ).toHaveLength( 1 );
+	} );
+
+	it( 'should produce distinct keys for top and bottom slots', () => {
+		const children = [ makeLegend( 'top', 'Top' ), makeLegend( 'bottom', 'Bottom' ) ];
+		const [ topElement, bottomElement ] = [
+			renderLegendSlot( children, 'top' )[ 0 ],
+			renderLegendSlot( children, 'bottom' )[ 0 ],
+		];
+
+		expect( topElement ).toHaveProperty( 'key', 'legend-top-0' );
+		expect( bottomElement ).toHaveProperty( 'key', 'legend-bottom-0' );
+		expect( topElement ).not.toEqual( bottomElement );
+	} );
+} );