Skip to content

Commit ed91744

Browse files
nickofthymenickofthyme
authored
feat: shift click legend items & partition legend hover (#648)
- add shit click option to negate a series click in legend - cleanup partition styles on legend items
1 parent 51129cb commit ed91744

11 files changed

Lines changed: 122 additions & 78 deletions

File tree

‎src/chart_types/xy_chart/legend/legend.test.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ describe('Legends', () => {
135135
seriesIdentifier: seriesCollectionValue1a.seriesIdentifier,
136136
isItemHidden: false,
137137
isSeriesHidden: false,
138+
isToggleable: true,
138139
defaultExtra: nullDisplayValue,
139140
},
140141
];
@@ -152,6 +153,7 @@ describe('Legends', () => {
152153
childId: 'y1',
153154
isItemHidden: false,
154155
isSeriesHidden: false,
156+
isToggleable: true,
155157
defaultExtra: nullDisplayValue,
156158
},
157159
{
@@ -161,6 +163,7 @@ describe('Legends', () => {
161163
childId: 'y1',
162164
isItemHidden: false,
163165
isSeriesHidden: false,
166+
isToggleable: true,
164167
defaultExtra: nullDisplayValue,
165168
},
166169
];
@@ -178,6 +181,7 @@ describe('Legends', () => {
178181
seriesIdentifier: seriesCollectionValue1a.seriesIdentifier,
179182
isItemHidden: false,
180183
isSeriesHidden: false,
184+
isToggleable: true,
181185
defaultExtra: nullDisplayValue,
182186
},
183187
{
@@ -187,6 +191,7 @@ describe('Legends', () => {
187191
seriesIdentifier: seriesCollectionValue2a.seriesIdentifier,
188192
isItemHidden: false,
189193
isSeriesHidden: false,
194+
isToggleable: true,
190195
defaultExtra: nullDisplayValue,
191196
},
192197
];
@@ -209,6 +214,7 @@ describe('Legends', () => {
209214
seriesIdentifier: seriesCollectionValue1a.seriesIdentifier,
210215
isItemHidden: false,
211216
isSeriesHidden: false,
217+
isToggleable: true,
212218
defaultExtra: nullDisplayValue,
213219
},
214220
];

‎src/chart_types/xy_chart/legend/legend.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export function computeLegend(
9393
childId: BandedAccessorType.Y1,
9494
isSeriesHidden,
9595
isItemHidden: hideInLegend,
96+
isToggleable: true,
9697
defaultExtra: {
9798
raw: lastValue && lastValue.y1 !== null ? lastValue.y1 : null,
9899
formatted: lastValue && lastValue.y1 !== null ? formatter(lastValue.y1) : null,
@@ -107,6 +108,7 @@ export function computeLegend(
107108
childId: BandedAccessorType.Y0,
108109
isSeriesHidden,
109110
isItemHidden: hideInLegend,
111+
isToggleable: true,
110112
defaultExtra: {
111113
raw: lastValue && lastValue.y0 !== null ? lastValue.y0 : null,
112114
formatted: lastValue && lastValue.y0 !== null ? formatter(lastValue.y0) : null,

‎src/commons/legend.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ export type LegendItem = {
3535
raw: number | null;
3636
formatted: number | string | null;
3737
};
38+
// TODO: Remove when partition layers are toggleable
39+
isToggleable?: boolean;
3840
};
3941

4042
/** @internal */

‎src/components/legend/__snapshots__/legend.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splita\\">splita</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitd\\">splitd</div></li>"`;
3+
exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\">splita</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\">splitd</div></li>"`;
44

5-
exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splita\\">splita</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitd\\">splitd</div></li>"`;
5+
exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\">splita</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\">splitd</div></li>"`;
66

77
exports[`Legend #legendColorPicker should render colorPicker when color is clicked 1`] = `"<div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\">#0c7b93</button><button id=\\"close\\">close</button></div>"`;
88
9-
exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splita\\">splita</div></li><div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\">#0c7b93</button><button id=\\"close\\">close</button></div><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitd\\">splitd</div></li>"`;
9+
exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\">splita</div></li><div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\">#0c7b93</button><button id=\\"close\\">close</button></div><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\">splitd</div></li>"`;

‎src/components/legend/_legend_item.scss‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,11 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
3232
@include euiTextTruncate;
3333
flex: 1 1 auto;
3434

35-
&:hover {
36-
cursor: pointer;
37-
text-decoration: underline;
38-
}
39-
}
40-
41-
&__label--hasClickListener {
42-
&:hover {
43-
cursor: pointer;
35+
&--clickable {
36+
&:hover {
37+
cursor: pointer;
38+
text-decoration: underline;
39+
}
4440
}
4541
}
4642

‎src/components/legend/color.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,22 @@
1616
* specific language governing permissions and limitations
1717
* under the License. */
1818

19-
import React from 'react';
19+
import React, { MouseEventHandler } from 'react';
2020
import classNames from 'classnames';
2121
import { Icon } from '../icons/icon';
2222

2323
interface ColorProps {
2424
color: string;
2525
isSeriesHidden?: boolean;
2626
hasColorPicker: boolean;
27-
onColorClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
27+
onClick?: MouseEventHandler;
2828
}
29+
2930
/**
3031
* Color component used by the legend item
3132
* @internal
3233
*/
33-
export function Color({ color, isSeriesHidden = false, hasColorPicker, onColorClick }: ColorProps) {
34+
export function Color({ color, isSeriesHidden = false, hasColorPicker, onClick }: ColorProps) {
3435
if (isSeriesHidden) {
3536
return (
3637
<div className="echLegendItem__color" aria-label="series hidden" title="series hidden">
@@ -45,7 +46,7 @@ export function Color({ color, isSeriesHidden = false, hasColorPicker, onColorCl
4546
});
4647

4748
return (
48-
<div onClick={onColorClick} className={colorClasses} aria-label="series color" title="series color">
49+
<div onClick={onClick} className={colorClasses} aria-label="series color" title="series color">
4950
<Icon type="dot" color={color} />
5051
</div>
5152
);

‎src/components/legend/label.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,23 @@
1616
* specific language governing permissions and limitations
1717
* under the License. */
1818

19-
import React from 'react';
19+
import React, { MouseEventHandler } from 'react';
2020
import classNames from 'classnames';
2121

2222
interface LabelProps {
2323
label: string;
24-
onLabelClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
25-
hasLabelClickListener: boolean;
24+
onClick?: MouseEventHandler;
2625
}
2726
/**
2827
* Label component used to display text in legend item
2928
* @internal
3029
*/
31-
export function Label({ label, onLabelClick, hasLabelClickListener }: LabelProps) {
30+
export function Label({ label, onClick }: LabelProps) {
3231
const labelClassNames = classNames('echLegendItem__label', {
33-
['echLegendItem__label--hasClickListener']: hasLabelClickListener,
32+
['echLegendItem__label--clickable']: Boolean(onClick),
3433
});
3534
return (
36-
<div className={labelClassNames} title={label} onClick={onLabelClick}>
35+
<div className={labelClassNames} title={label} onClick={onClick}>
3736
{label}
3837
</div>
3938
);

0 commit comments

Comments
 (0)