@automattic/charts 0.56.7 → 0.58.0

package/src/charts/private/chart-composition/test/use-chart-children.test.tsx

@@ -1,5 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { Group } from '@visx/group';
+import { Legend } from '../../../../components/legend';
 import { ChartSVG, ChartHTML } from '../index';
 import { useChartChildren } from '../use-chart-children';
 
@@ -22,6 +23,7 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 1 );
 		expect( result.current.htmlChildren ).toHaveLength( 0 );
+		expect( result.current.legendChildren ).toHaveLength( 0 );
 		expect( result.current.otherChildren ).toHaveLength( 0 );
 	} );
 
@@ -58,6 +60,7 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 1 );
 		expect( result.current.htmlChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren ).toHaveLength( 0 );
 		expect( result.current.otherChildren ).toHaveLength( 0 );
 	} );
 
@@ -112,6 +115,7 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 0 );
 		expect( result.current.htmlChildren ).toHaveLength( 0 );
+		expect( result.current.legendChildren ).toHaveLength( 0 );
 		expect( result.current.otherChildren ).toHaveLength( 0 );
 	} );
 
@@ -128,4 +132,91 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 3 );
 	} );
+
+	it( 'should extract Legend children to legendChildren with default position bottom', () => {
+		const children = <Legend />;
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'bottom' );
+		expect( result.current.otherChildren ).toHaveLength( 0 );
+	} );
+
+	it( 'should extract Legend children with position top', () => {
+		const children = <Legend position="top" />;
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'top' );
+		expect( result.current.otherChildren ).toHaveLength( 0 );
+	} );
+
+	it( 'should default to bottom for invalid position values', () => {
+		// @ts-expect-error -- testing invalid runtime value
+		const children = <Legend position="left" />;
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'bottom' );
+	} );
+
+	it( 'should exclude Legend children from nonLegendChildren', () => {
+		const children = [
+			<Legend key="legend" position="top" />,
+			<div key="other">Other Content</div>,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.nonLegendChildren ).toHaveLength( 1 );
+	} );
+
+	it( 'should preserve original child order in nonLegendChildren', () => {
+		const children = [
+			<div key="first">First</div>,
+			<Legend key="legend" position="top" />,
+			<Group key="group">
+				<text>SVG</text>
+			</Group>,
+			<div key="last">Last</div>,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.nonLegendChildren ).toHaveLength( 3 );
+		// Verify order matches original (minus the Legend)
+		expect( ( result.current.nonLegendChildren[ 0 ] as React.ReactElement ).key ).toBe( 'first' );
+		expect( ( result.current.nonLegendChildren[ 1 ] as React.ReactElement ).key ).toBe( 'group' );
+		expect( ( result.current.nonLegendChildren[ 2 ] as React.ReactElement ).key ).toBe( 'last' );
+	} );
+
+	it( 'should return empty nonLegendChildren when all children are Legends', () => {
+		const children = [
+			<Legend key="top" position="top" />,
+			<Legend key="bottom" position="bottom" />,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 2 );
+		expect( result.current.nonLegendChildren ).toHaveLength( 0 );
+	} );
+
+	it( 'should extract multiple Legend children by position', () => {
+		const children = [
+			<Legend key="top" position="top" />,
+			<Legend key="bottom" position="bottom" />,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 2 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'top' );
+		expect( result.current.legendChildren[ 1 ].position ).toBe( 'bottom' );
+		expect( result.current.otherChildren ).toHaveLength( 0 );
+	} );
 } );

package/src/charts/private/chart-composition/use-chart-children.ts

@@ -1,11 +1,21 @@
 import { Group } from '@visx/group';
 import { useMemo, Children, isValidElement } from 'react';
-import type { ReactNode } from 'react';
+import { Legend } from '../../../components/legend';
+import type { LegendPosition } from '../../../types';
+import type { ReactElement, ReactNode } from 'react';
+
+export type LegendChild = {
+	element: ReactElement;
+	position: LegendPosition;
+};
 
 interface ChartChildren {
 	svgChildren: ReactNode[];
 	htmlChildren: ReactNode[];
+	legendChildren: LegendChild[];
 	otherChildren: ReactNode[];
+	/** All children except Legend, in original order. */
+	nonLegendChildren: ReactNode[];
 }
 
 /**
@@ -21,10 +31,23 @@ export function useChartChildren( children: ReactNode, chartType: string ): Char
 	return useMemo( () => {
 		const svg: ReactNode[] = [];
 		const html: ReactNode[] = [];
+		const legend: LegendChild[] = [];
 		const other: ReactNode[] = [];
+		const nonLegend: ReactNode[] = [];
 
 		Children.forEach( children, child => {
 			if ( isValidElement( child ) ) {
+				// Extract Legend children for position-based slot rendering
+				if ( child.type === Legend ) {
+					const rawPosition = child.props?.position;
+					const position =
+						rawPosition === 'top' || rawPosition === 'bottom' ? rawPosition : 'bottom';
+
+					legend.push( { element: child as ReactElement, position } );
+
+					return;
+				}
+
 				// Check displayName for compound components
 				const childType = child.type as { displayName?: string };
 				const displayName = childType?.displayName;
@@ -51,8 +74,17 @@ export function useChartChildren( children: ReactNode, chartType: string ): Char
 					other.push( child );
 				}
 			}
+
+			// Preserve original order of all non-Legend children
+			nonLegend.push( child );
 		} );
 
-		return { svgChildren: svg, htmlChildren: html, otherChildren: other };
+		return {
+			svgChildren: svg,
+			htmlChildren: html,
+			legendChildren: legend,
+			otherChildren: other,
+			nonLegendChildren: nonLegend,
+		};
 	}, [ children, chartType ] );
 }

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

@@ -1,4 +1,5 @@
 .legend {
+	align-self: stretch;
 
 	&--horizontal {
 		display: flex;
@@ -11,52 +12,33 @@
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
-
-		&.legend--alignment-start {
-			align-items: flex-start;
-		}
-
-		&.legend--alignment-center {
-			align-items: center;
-		}
-
-		&.legend--alignment-end {
-			align-items: flex-end;
-		}
 	}
 
-	// Position-based styles
-	&--position-top {
-		position: relative;
-
-		&.legend--alignment-start {
-			justify-content: flex-start;
-		}
-
-		&.legend--alignment-center {
-			justify-content: center;
-		}
+	&--alignment-start {
+		justify-content: flex-start;
+	}
 
-		&.legend--alignment-end {
-			justify-content: flex-end;
-		}
+	&--alignment-center {
+		justify-content: center;
 	}
 
-	&--position-bottom {
-		position: relative;
+	&--alignment-end {
+		justify-content: flex-end;
+	}
 
-		&.legend--alignment-start {
-			justify-content: flex-start;
-		}
+	// Vertical legends align on the cross-axis instead
+	&--vertical.legend--alignment-start {
+		align-items: flex-start;
+	}
 
-		&.legend--alignment-center {
-			justify-content: center;
-		}
+	&--vertical.legend--alignment-center {
+		align-items: center;
+	}
 
-		&.legend--alignment-end {
-			justify-content: flex-end;
-		}
+	&--vertical.legend--alignment-end {
+		align-items: flex-end;
 	}
+
 }
 
 .legend-item {

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

@@ -67,32 +67,37 @@ export const BaseLegend: ForwardRefExoticComponent<
 			items,
 			className,
 			orientation = 'horizontal',
-			position = 'bottom',
 			alignment = 'center',
-			maxWidth,
-			textOverflow = 'wrap',
 			shape = 'rect',
 			fill = valueOrIdentityString,
 			size = valueOrIdentityString,
 			labelFormat = valueOrIdentity,
 			labelTransform = labelTransformFactory,
-			shapeWidth = 16,
-			shapeHeight = 16,
-			shapeMargin = '2px 4px 2px 0',
-			labelAlign = 'left',
-			labelFlex = '0 0 auto', // Use natural width instead of expanding to fill space
-			labelMargin = '0 4px',
-			itemMargin = '0',
-			itemDirection = 'row',
-			legendLabelProps,
-			legendItemClassName,
+			itemStyles,
+			itemClassName,
+			labelStyles,
+			labelClassName,
+			shapeStyles,
 			render,
 			interactive = false,
 			chartId,
-			...legendItemProps
 		},
 		ref
 	) => {
+		const { margin: itemMargin = '0', flexDirection: itemDirection = 'row' } = itemStyles ?? {};
+		const {
+			justifyContent: labelJustifyContent = 'flex-start',
+			flex: labelFlex = '0 0 auto',
+			margin: labelMargin = '0 4px',
+			maxWidth,
+			textOverflow = 'wrap',
+		} = labelStyles ?? {};
+		const {
+			width: shapeWidth = 16,
+			height: shapeHeight = 16,
+			margin: shapeMargin = '2px 4px 2px 0',
+		} = shapeStyles ?? {};
+
 		const theme = useGlobalChartsTheme();
 		const context = useContext( GlobalChartsContext );
 
@@ -171,18 +176,18 @@ export const BaseLegend: ForwardRefExoticComponent<
 							styles.legend,
 							styles[ `legend--${ orientation }` ],
 							styles[ `legend--alignment-${ alignment }` ],
-							styles[ `legend--position-${ position }` ],
 							className
 						) }
 						style={ {
 							flexDirection: orientationToFlexDirection[ orientation ],
-							...theme.legendContainerStyles,
+							...theme.legend?.containerStyles,
 						} }
 					>
 						{ labels.map( ( label, i ) => {
 							const visible = isSeriesVisible( label.text );
 							const handleClick = createClickHandler( label.text );
 							const handleKeyDown = createKeyDownHandler( label.text );
+							const matchedItem = items[ i ];
 
 							return (
 								<LegendItem
@@ -191,7 +196,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 										styles[ 'legend-item' ],
 										interactive && styles[ 'legend-item--interactive' ],
 										! visible && styles[ 'legend-item--inactive' ],
-										legendItemClassName
+										itemClassName
 									) }
 									data-testid="legend-item"
 									key={ `legend-${ label.text }-${ i }` }
@@ -211,7 +216,6 @@ export const BaseLegend: ForwardRefExoticComponent<
 											? `${ label.text }: ${ visible ? 'visible' : 'hidden' }. Toggle visibility.`
 											: undefined
 									}
-									{ ...legendItemProps }
 								>
 									{ items[ i ]?.renderGlyph ? (
 										<svg
@@ -246,24 +250,28 @@ export const BaseLegend: ForwardRefExoticComponent<
 										/>
 									) }
 									<LegendLabel
-										className={ clsx( 'visx-legend-label', styles[ 'legend-item-label' ] ) }
+										data-testid="legend-label"
+										className={ clsx(
+											'visx-legend-label',
+											styles[ 'legend-item-label' ],
+											labelClassName
+										) }
 										style={ {
-											justifyContent: labelAlign,
+											justifyContent: labelJustifyContent,
 											flex: labelFlex,
 											margin: labelMargin,
-											...theme.legendLabelStyles,
+											...theme.legend?.labelStyles,
 										} }
-										{ ...legendLabelProps }
 									>
 										<LegendText
 											text={ label.text }
 											textOverflow={ textOverflow }
 											maxWidth={ maxWidth }
 										/>
-										{ items.find( item => item.label === label.text )?.value && (
+										{ matchedItem?.value != null && matchedItem.value !== '' && (
 											<span className={ styles[ 'legend-item-value' ] }>
 												{ '\u00A0' }
-												{ items.find( item => item.label === label.text )?.value }
+												{ matchedItem.value }
 											</span>
 										) }
 									</LegendLabel>

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

@@ -46,12 +46,12 @@ describe( 'BaseLegend', () => {
 		expect( legendItems ).toHaveLength( 0 );
 	} );
 
-	test( 'applies legendItemClassName to legend items', () => {
+	test( 'applies itemClassName to legend items', () => {
 		render(
 			<BaseLegend
 				items={ defaultItems }
 				orientation="horizontal"
-				legendItemClassName="custom-legend-item"
+				itemClassName="custom-legend-item"
 			/>
 		);
 		const legendItems = screen.getAllByTestId( 'legend-item' );
@@ -60,16 +60,65 @@ describe( 'BaseLegend', () => {
 		} );
 	} );
 
+	test( 'applies labelClassName to legend labels', () => {
+		render(
+			<BaseLegend
+				items={ defaultItems }
+				orientation="horizontal"
+				labelClassName="custom-legend-label"
+			/>
+		);
+		const labels = screen.getAllByTestId( 'legend-label' );
+		labels.forEach( label => {
+			expect( label ).toHaveClass( 'custom-legend-label' );
+		} );
+	} );
+
 	test( 'handles missing values', () => {
 		const itemsWithoutValues = [
-			{ label: 'Item 1', color: '#ff0000', value: undefined },
-			{ label: 'Item 2', color: '#00ff00', value: undefined },
+			{ label: 'Item 1', color: '#ff0000' },
+			{ label: 'Item 2', color: '#00ff00' },
 		];
 		render( <BaseLegend items={ itemsWithoutValues } orientation="horizontal" /> );
 		expect( screen.getByText( 'Item 1' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument();
 	} );
 
+	test( 'does not render value span for empty string values', () => {
+		const itemsWithEmptyValues = [
+			{ label: 'Item 1', color: '#ff0000', value: '' },
+			{ label: 'Item 2', color: '#00ff00', value: '' },
+		];
+		render( <BaseLegend items={ itemsWithEmptyValues } orientation="horizontal" /> );
+		expect( screen.getByText( 'Item 1' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument();
+		expect( screen.queryByText( '\u00A0' ) ).not.toBeInTheDocument();
+	} );
+
+	test( 'renders numeric value of 0 without hiding it', () => {
+		const itemsWithZeroValue = [
+			{ label: 'Item 1', color: '#ff0000', value: 0 },
+			{ label: 'Item 2', color: '#00ff00', value: '0%' },
+		];
+		render( <BaseLegend items={ itemsWithZeroValue } orientation="horizontal" /> );
+		expect( screen.getByText( '0' ) ).toBeInTheDocument();
+		expect( screen.getByText( '0%' ) ).toBeInTheDocument();
+	} );
+
+	test( 'renders each value next to its corresponding label by index', () => {
+		const itemsWithDistinctValues = [
+			{ label: 'Alpha', value: '100', color: '#ff0000' },
+			{ label: 'Beta', value: '200', color: '#00ff00' },
+			{ label: 'Gamma', value: '300', color: '#0000ff' },
+		];
+		render( <BaseLegend items={ itemsWithDistinctValues } orientation="horizontal" /> );
+		const legendItems = screen.getAllByTestId( 'legend-item' );
+		expect( legendItems ).toHaveLength( 3 );
+		expect( legendItems[ 0 ] ).toHaveTextContent( /Alpha.*100/ );
+		expect( legendItems[ 1 ] ).toHaveTextContent( /Beta.*200/ );
+		expect( legendItems[ 2 ] ).toHaveTextContent( /Gamma.*300/ );
+	} );
+
 	test( 'applies custom className', () => {
 		render(
 			<BaseLegend items={ defaultItems } className="custom-legend" orientation="horizontal" />
@@ -106,108 +155,155 @@ describe( 'BaseLegend', () => {
 			{ label: 'Another Long Label for Testing', value: '30%', color: '#00ff00' },
 		];
 
-		test( 'renders with maxWidth constraint', () => {
-			render( <BaseLegend items={ longLabelItems } maxWidth="150px" orientation="horizontal" /> );
-			const legendItems = screen.getAllByTestId( 'legend-item' );
-			expect( legendItems ).toHaveLength( 2 );
-			// Note: maxWidth is applied to LegendLabel via inline styles,
-			// which is harder to test without DOM traversal
+		test( 'applies maxWidth and minWidth styles to label text', () => {
+			render(
+				<BaseLegend
+					items={ longLabelItems }
+					labelStyles={ { maxWidth: '150px' } }
+					orientation="horizontal"
+				/>
+			);
+			const labels = screen.getAllByText( /Long Label/ );
+			labels.forEach( label => {
+				expect( label ).toHaveStyle( { maxWidth: '150px', minWidth: 0 } );
+			} );
 		} );
 
-		test( 'renders with maxWidth as string', () => {
-			render( <BaseLegend items={ longLabelItems } maxWidth="10rem" orientation="horizontal" /> );
-			const legendItems = screen.getAllByTestId( 'legend-item' );
-			expect( legendItems ).toHaveLength( 2 );
-			// Note: maxWidth is applied to LegendLabel via inline styles
+		test( 'supports different CSS units for maxWidth', () => {
+			render(
+				<BaseLegend
+					items={ longLabelItems }
+					labelStyles={ { maxWidth: '10rem' } }
+					orientation="horizontal"
+				/>
+			);
+			const labels = screen.getAllByText( /Long Label/ );
+			labels.forEach( label => {
+				expect( label ).toHaveStyle( { maxWidth: '10rem' } );
+			} );
 		} );
 
-		test( 'renders correctly with and without maxWidth', () => {
+		test( 'does not apply maxWidth styles when omitted', () => {
 			const { rerender } = render(
 				<BaseLegend items={ longLabelItems } orientation="horizontal" />
 			);
 
-			// Without maxWidth, legend items should render normally
-			let legendItems = screen.getAllByTestId( 'legend-item' );
-			expect( legendItems ).toHaveLength( 2 );
+			let labels = screen.getAllByText( /Long Label/ );
+			labels.forEach( label => {
+				expect( label ).not.toHaveStyle( { maxWidth: '150px' } );
+			} );
 
-			// With maxWidth, legend items should still render
-			rerender( <BaseLegend items={ longLabelItems } maxWidth="150px" orientation="horizontal" /> );
-			legendItems = screen.getAllByTestId( 'legend-item' );
-			expect( legendItems ).toHaveLength( 2 );
+			rerender(
+				<BaseLegend
+					items={ longLabelItems }
+					labelStyles={ { maxWidth: '150px' } }
+					orientation="horizontal"
+				/>
+			);
+			labels = screen.getAllByText( /Long Label/ );
+			labels.forEach( label => {
+				expect( label ).toHaveStyle( { maxWidth: '150px', minWidth: 0 } );
+			} );
 		} );
 
-		test( 'renders with different textOverflow values', () => {
-			// Test ellipsis behavior - should render without errors
+		test( 'applies maxWidth styles for both textOverflow modes', () => {
 			const { rerender } = render(
 				<BaseLegend
 					items={ longLabelItems }
-					maxWidth="150px"
-					textOverflow="ellipsis"
+					labelStyles={ { maxWidth: '150px', textOverflow: 'ellipsis' } }
 					orientation="horizontal"
 				/>
 			);
 			let labels = screen.getAllByText( /Long Label/ );
-			expect( labels ).toHaveLength( 2 );
+			labels.forEach( label => {
+				expect( label ).toHaveStyle( { maxWidth: '150px', minWidth: 0 } );
+			} );
 
-			// Test wrap behavior - should render without errors
 			rerender(
 				<BaseLegend
 					items={ longLabelItems }
-					maxWidth="150px"
-					textOverflow="wrap"
+					labelStyles={ { maxWidth: '150px', textOverflow: 'wrap' } }
 					orientation="horizontal"
 				/>
 			);
 			labels = screen.getAllByText( /Long Label/ );
-			expect( labels ).toHaveLength( 2 );
+			labels.forEach( label => {
+				expect( label ).toHaveStyle( { maxWidth: '150px', minWidth: 0 } );
+			} );
 		} );
 
-		test( 'renders ellipsis mode without errors', () => {
-			// Render with ellipsis overflow
+		test( 'applies maxWidth=0px correctly', () => {
 			render(
 				<BaseLegend
 					items={ longLabelItems }
-					maxWidth="50px"
-					textOverflow="ellipsis"
+					labelStyles={ { maxWidth: '0px', textOverflow: 'ellipsis' } }
 					orientation="horizontal"
 				/>
 			);
-
-			// Verify the text is rendered
 			const labels = screen.getAllByText( /Long Label/ );
-			expect( labels ).toHaveLength( 2 );
+			labels.forEach( label => {
+				expect( label ).toHaveStyle( { maxWidth: '0px', minWidth: 0 } );
+			} );
 		} );
 
-		test( 'renders wrap mode without errors', () => {
-			// Render with wrap overflow
+		test( 'applies legend-item-text--ellipsis class when textOverflow is ellipsis and maxWidth is set', () => {
 			render(
 				<BaseLegend
 					items={ longLabelItems }
-					maxWidth="50px"
-					textOverflow="wrap"
+					labelStyles={ { maxWidth: '150px', textOverflow: 'ellipsis' } }
 					orientation="horizontal"
 				/>
 			);
+			const labels = screen.getAllByText( /Long Label/ );
+			labels.forEach( label => {
+				expect( label ).toHaveClass( 'legend-item-text--ellipsis' );
+				expect( label ).not.toHaveClass( 'legend-item-text--wrap' );
+			} );
+		} );
 
-			// Verify the text is rendered
+		test( 'applies legend-item-text--wrap class when textOverflow is wrap and maxWidth is set', () => {
+			render(
+				<BaseLegend
+					items={ longLabelItems }
+					labelStyles={ { maxWidth: '150px', textOverflow: 'wrap' } }
+					orientation="horizontal"
+				/>
+			);
 			const labels = screen.getAllByText( /Long Label/ );
-			expect( labels ).toHaveLength( 2 );
+			labels.forEach( label => {
+				expect( label ).toHaveClass( 'legend-item-text--wrap' );
+				expect( label ).not.toHaveClass( 'legend-item-text--ellipsis' );
+			} );
 		} );
 
-		test( 'handles maxWidth={0} correctly', () => {
-			// maxWidth={0} should apply 0-pixel constraint (not be treated as "no constraint")
+		test( 'does not apply overflow class when maxWidth is not set', () => {
 			render(
 				<BaseLegend
 					items={ longLabelItems }
-					maxWidth="0px"
-					textOverflow="ellipsis"
+					labelStyles={ { textOverflow: 'ellipsis' } }
 					orientation="horizontal"
 				/>
 			);
+			const labels = screen.getAllByText( /Long Label/ );
+			labels.forEach( label => {
+				expect( label ).not.toHaveClass( 'legend-item-text--ellipsis' );
+				expect( label ).not.toHaveClass( 'legend-item-text--wrap' );
+			} );
+		} );
 
-			// Should still render the legend items
-			const legendItems = screen.getAllByTestId( 'legend-item' );
-			expect( legendItems ).toHaveLength( 2 );
+		test( 'does not apply overflow class when maxWidth is not set and textOverflow is wrap', () => {
+			render(
+				<BaseLegend
+					items={ longLabelItems }
+					labelStyles={ { textOverflow: 'wrap' } }
+					orientation="horizontal"
+				/>
+			);
+			const labels = screen.getAllByText( /Long Label/ );
+			labels.forEach( label => {
+				expect( label ).not.toHaveClass( 'legend-item-text--wrap' );
+				expect( label ).not.toHaveClass( 'legend-item-text--ellipsis' );
+			} );
 		} );
 	} );