Skip to content

Commit 6827929

Browse files
committed
Merge remote-tracking branch 'origin/trunk' into dotcom-14866-remove-calypsoify
2 parents 868f95e + efedaf1 commit 6827929

File tree

44 files changed

+279
-70
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+279
-70
lines changed
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: added
3+
4+
Charts: add legendItemClassName prop for custom legend item styling

projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
8484
legendAlignment = 'center',
8585
legendMaxWidth,
8686
legendTextOverflow = 'wrap',
87+
legendItemClassName,
8788
legendShape = 'rect',
8889
gridVisibility: gridVisibilityProp,
8990
renderTooltip,
@@ -385,6 +386,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
385386
alignment={ legendAlignment }
386387
maxWidth={ legendMaxWidth }
387388
textOverflow={ legendTextOverflow }
389+
legendItemClassName={ legendItemClassName }
388390
className={ styles[ 'bar-chart__legend' ] }
389391
shape={ legendShape }
390392
ref={ legendRef }

projects/js-packages/charts/src/components/legend/private/base-legend.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export const BaseLegend: ForwardRefExoticComponent<
7878
itemMargin = '0',
7979
itemDirection = 'row',
8080
legendLabelProps,
81+
legendItemClassName,
8182
...legendItemProps
8283
},
8384
ref
@@ -120,7 +121,11 @@ export const BaseLegend: ForwardRefExoticComponent<
120121
>
121122
{ labels.map( ( label, i ) => (
122123
<LegendItem
123-
className={ clsx( 'visx-legend-item', styles[ 'legend-item' ] ) }
124+
className={ clsx(
125+
'visx-legend-item',
126+
styles[ 'legend-item' ],
127+
legendItemClassName
128+
) }
124129
data-testid="legend-item"
125130
key={ `legend-${ label.text }-${ i }` }
126131
margin={ itemMargin }

projects/js-packages/charts/src/components/legend/test/legend.test.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,20 @@ describe( 'BaseLegend', () => {
4343
expect( legendItems ).toHaveLength( 0 );
4444
} );
4545

46+
test( 'applies legendItemClassName to legend items', () => {
47+
render(
48+
<BaseLegend
49+
items={ defaultItems }
50+
orientation="horizontal"
51+
legendItemClassName="custom-legend-item"
52+
/>
53+
);
54+
const legendItems = screen.getAllByTestId( 'legend-item' );
55+
legendItems.forEach( item => {
56+
expect( item ).toHaveClass( 'custom-legend-item' );
57+
} );
58+
} );
59+
4660
test( 'handles missing values', () => {
4761
const itemsWithoutValues = [
4862
{ label: 'Item 1', color: '#ff0000', value: undefined },

projects/js-packages/charts/src/components/legend/types.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ export type BaseLegendProps = Omit< LegendOrdinalProps, 'shapeStyle' > & {
2424
* - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
2525
*/
2626
textOverflow?: 'ellipsis' | 'wrap';
27+
/**
28+
* Additional CSS class name for legend items.
29+
* This allows consumers to customize individual legend item styling.
30+
*/
31+
legendItemClassName?: string;
2732
};
2833

2934
export type LegendProps = Omit< BaseLegendProps, 'items' > & {

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
214214
legendPosition = 'bottom',
215215
legendMaxWidth,
216216
legendTextOverflow = 'wrap',
217+
legendItemClassName,
217218
renderGlyph = defaultRenderGlyph,
218219
glyphStyle = {},
219220
legendShape = 'line',
@@ -531,6 +532,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
531532
position={ legendPosition }
532533
maxWidth={ legendMaxWidth }
533534
textOverflow={ legendTextOverflow }
535+
legendItemClassName={ legendItemClassName }
534536
className={ styles[ 'line-chart-legend' ] }
535537
shape={ legendShape }
536538
chartId={ chartId }

projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ const PieChartInternal = ( {
138138
legendAlignment = 'center',
139139
legendMaxWidth,
140140
legendTextOverflow = 'wrap',
141+
legendItemClassName,
141142
legendShape = 'circle',
142143
size,
143144
thickness = 1,
@@ -367,6 +368,7 @@ const PieChartInternal = ( {
367368
alignment={ legendAlignment }
368369
maxWidth={ legendMaxWidth }
369370
textOverflow={ legendTextOverflow }
371+
legendItemClassName={ legendItemClassName }
370372
className={ styles[ 'pie-chart-legend' ] }
371373
shape={ legendShape }
372374
ref={ legendRef }

projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
130130
legendAlignment = 'center',
131131
legendMaxWidth,
132132
legendTextOverflow = 'wrap',
133+
legendItemClassName,
133134
legendShape = 'circle',
134135
legendValueDisplay = 'percentage',
135136
label,
@@ -355,6 +356,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
355356
alignment={ legendAlignment }
356357
maxWidth={ legendMaxWidth }
357358
textOverflow={ legendTextOverflow }
359+
legendItemClassName={ legendItemClassName }
358360
shape={ legendShape }
359361
ref={ legendRef }
360362
chartId={ chartId }

projects/js-packages/charts/src/stories/legend-config.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,10 @@ export const legendArgTypes = {
5252
description:
5353
'Controls how text behaves when it exceeds legendMaxWidth. "ellipsis" truncates with ... (ideal for widgets), "wrap" allows text to wrap to multiple lines.',
5454
},
55+
legendItemClassName: {
56+
control: { type: 'text' as const },
57+
table: { category: 'Legend' },
58+
description:
59+
'Additional CSS class name for legend items. This allows consumers to customize individual legend item styling.',
60+
},
5561
};

projects/js-packages/charts/src/types.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,11 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
355355
* - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
356356
*/
357357
legendTextOverflow?: 'ellipsis' | 'wrap';
358+
/**
359+
* Additional CSS class name for legend items.
360+
* This allows consumers to customize individual legend item styling.
361+
*/
362+
legendItemClassName?: string;
358363
/**
359364
* Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
360365
*/

0 commit comments

Comments
 (0)