Merge pull request #597 from adobe/clamoureux/legendTitleLimit

feat: add titleLimit to legend

Author: marshallpete

packages/react-spectrum-charts/src/components/Legend/Legend.tsx

@@ -23,6 +23,7 @@ const Legend: FC<LegendProps> = ({
 	highlight = false,
 	isToggleable = false,
 	legendLabels,
+	titleLimit,
 	lineType,
 	lineWidth,
 	onClick,

packages/react-spectrum-charts/src/rscToSbAdapter/legendAdapter.ts

@@ -16,6 +16,7 @@ import { childrenToOptions } from './childrenAdapter';
 
 export const getLegendOptions = ({
 	children,
+	titleLimit,
 	onClick,
 	onMouseOut,
 	onMouseOver,
@@ -25,6 +26,7 @@ export const getLegendOptions = ({
 
 	return {
 		...legendProps,
+		...(titleLimit !== undefined ? { titleLimit } : {}),
 		hasOnClick: Boolean(onClick),
 		hasMouseInteraction: Boolean(onMouseOut || onMouseOver),
 		chartPopovers,

packages/react-spectrum-charts/src/stories/components/Legend/Legend.story.tsx

@@ -53,6 +53,13 @@ Labels.args = { legendLabels, highlight: true, ...defaultProps };
 const LabelLimit = LegendBarStory.bind({});
 LabelLimit.args = { legendLabels: truncatedLegendLabels, ...defaultProps };
 
+const TitleLimit = LegendBarStory.bind({});
+TitleLimit.args = {
+	title: 'Very long legend title that should be truncated',
+	titleLimit: 250,
+	...defaultProps,
+};
+
 const OnClick = LegendBarStory.bind({});
 OnClick.args = {};
 
@@ -77,4 +84,16 @@ Supreme.args = {
 	title: 'Operating system',
 };
 
-export { Basic, Descriptions, Disconnected, Labels, LabelLimit, OnClick, Popover, Position, Title, Supreme };
+export {
+	Basic,
+	Descriptions,
+	Disconnected,
+	Labels,
+	LabelLimit,
+	TitleLimit,
+	OnClick,
+	Popover,
+	Position,
+	Title,
+	Supreme,
+};

packages/react-spectrum-charts/src/stories/components/Legend/Legend.test.tsx

@@ -28,7 +28,7 @@ import {
 	waitFor,
 } from '../../../test-utils';
 import '../../../test-utils/__mocks__/matchMedia.mock.js';
-import { Basic, Descriptions, LabelLimit, OnClick, Popover, Position, Supreme, Title } from './Legend.story';
+import { Basic, Descriptions, LabelLimit, OnClick, Popover, Position, Supreme, Title, TitleLimit } from './Legend.story';
 
 /**
  * Wait for the the duration of the legend tooltip hover delay.
@@ -286,6 +286,15 @@ describe('Legend', () => {
 		).toBeInTheDocument();
 	});
 
+	test('renders with titleLimit', async () => {
+		render(<TitleLimit {...TitleLimit.args} />);
+		const view = await screen.findByRole('graphics-document');
+		expect(view).toBeInTheDocument();
+		// Check that the legend title is present. Note that JSDOM causes this to not match the UI rendered storybook.
+		// We're just testing that the chart renders with the titleLimit prop.
+		expect(screen.getByText('Very long legend title that should be truncated')).toBeInTheDocument();
+	});
+
 	// Legend is not a real React component. This is test just provides test coverage for sonarqube
 	test('Legend pseudo element', async () => {
 		render(<Legend />);

packages/vega-spec-builder/src/legend/legendSpecBuilder.test.ts

@@ -278,6 +278,17 @@ describe('addLegend()', () => {
 			expect(legendSpec.scales).toEqual([...(defaultSpec.scales || []), defaultLegendEntriesScale]);
 		});
 
+		test('should add titleLimit if provided', () => {
+			const legendSpec = addLegend(defaultSpec, {
+				descriptions: [{ seriesName: 'test', description: 'test' }],
+				title: 'My title',
+				titleLimit: 123,
+			});
+			const legend = legendSpec.legends?.[0];
+			expect(legend?.titleLimit).toBe(123);
+			expect(legend?.title).toBe('My title');
+		});
+
 		test('should add fields to scales if they have not been added', () => {
 			const legendSpec = addLegend(
 				{ ...defaultSpec, scales: [{ name: COLOR_SCALE, type: 'ordinal' }] },

packages/vega-spec-builder/src/legend/legendSpecBuilder.ts

@@ -197,8 +197,8 @@ export const formatFacetRefsWithPresets = (
  * @returns
  */
 const getCategoricalLegend = (facets: Facet[], options: LegendSpecOptions): Legend => {
-	const { name, position, title, labelLimit } = options;
-	return {
+	const { name, position, title, labelLimit, titleLimit } = options;
+	const legend: Legend = {
 		fill: `${name}Entries`,
 		direction: ['top', 'bottom'].includes(position) ? 'horizontal' : 'vertical',
 		orient: position,
@@ -207,6 +207,8 @@ const getCategoricalLegend = (facets: Facet[], options: LegendSpecOptions): Lege
 		columns: getColumns(position),
 		labelLimit,
 	};
+	if (titleLimit !== undefined) legend.titleLimit = titleLimit;
+	return legend;
 };
 
 /**
@@ -233,8 +235,14 @@ export const getContinuousLegend = (facet: Facet, options: LegendSpecOptions): L
 	};
 };
 
-const getLegendLayout = ({ position, title }: LegendSpecOptions): Partial<Legend> => {
-	return { direction: ['top', 'bottom'].includes(position) ? 'horizontal' : 'vertical', orient: position, title };
+const getLegendLayout = ({ position, title, titleLimit }: LegendSpecOptions): Partial<Legend> => {
+	const layout: Partial<Legend> = {
+		direction: ['top', 'bottom'].includes(position) ? 'horizontal' : 'vertical',
+		orient: position,
+		title,
+	};
+	if (titleLimit !== undefined) layout.titleLimit = titleLimit;
+	return layout;
 };
 
 /**

packages/vega-spec-builder/src/types/legendSpec.types.ts

@@ -62,6 +62,8 @@ export interface LegendOptions {
 	symbolShape?: SymbolShapeFacet;
 	/** legend title */
 	title?: string;
+	/** The maximum allowed length in pixels of the legend title. */
+	titleLimit?: number;
 
 	// children
 	chartPopovers?: ChartPopoverOptions[];