refactor(legend): remove visibility button (#252)

markov00 · web-flow · commit 90a1ba70ba95 · 2019-07-15T12:10:59.000+02:00
the visibility button is removed in favour of clicking on the legend item title

BREAKING CHANGE: the `onLegendItemClick` click handler is no longer applied when clicking on the title. Instead a simple visibility change is applied.
diff --git a/src/components/legend/_legend_item.scss b/src/components/legend/_legend_item.scss
@@ -32,6 +32,9 @@
   @include euiTextTruncate;
   margin-right: $euiSizeXS;
   flex: 1;
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .echLegendItem__title--selected {
@@ -53,3 +56,7 @@
     display: none;
   }
 }
+
+.echLegendItem-isHidden {
+  color: $euiColorDarkShade;
+}
diff --git a/src/components/legend/legend_item.tsx b/src/components/legend/legend_item.tsx
@@ -46,29 +46,35 @@ class LegendItemComponent extends React.Component<LegendItemProps, LegendItemSta
     const { legendItemKey } = this.props;
     const { color, label, isSeriesVisible, displayValue, onMouseEnter, onMouseLeave } = this.props;
 
-    const onTitleClick = this.onLegendTitleClick(legendItemKey);
+    const onTitleClick = this.onVisibilityClick(legendItemKey);
 
     const showLegendDisplayValue = this.props.chartStore!.showLegendDisplayValue.get();
     const isSelected = legendItemKey === this.props.chartStore!.selectedLegendItemKey.get();
     const hasDisplayValue = this.props.chartStore!.showLegendDisplayValue.get();
     const hasTitleClickListener = Boolean(this.props.chartStore!.onLegendItemClickListener);
+    const itemClasses = classNames('echLegendItem', {
+      'echLegendItem-isHidden': !isSeriesVisible,
+    });
     return (
-      <div className="echLegendItem" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-        {this.renderColor(this.toggleColorPicker, color)}
-        {this.renderVisibilityButton(legendItemKey, isSeriesVisible)}
+      <div className={itemClasses} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        {this.renderColor(this.toggleColorPicker, color, isSeriesVisible)}
         {this.renderTitle(label, onTitleClick, hasTitleClickListener, isSelected, hasDisplayValue)}
         {this.renderDisplayValue(displayValue, showLegendDisplayValue, isSeriesVisible)}
       </div>
     );
   }
-  renderColor(colorClickAction: () => void, color: string | undefined) {
+  renderColor(colorClickAction: () => void, color?: string, isSeriesVisible: boolean = true) {
     if (!color) {
       return null;
     }
-    // TODO add color picler
+    // TODO add color picker
+    const iconType = isSeriesVisible ? 'dot' : 'eyeClosed';
+    const iconColor = isSeriesVisible ? color : undefined;
+    const title = isSeriesVisible ? 'series color' : 'series hidden';
+    const viewBox = isSeriesVisible ? undefined : '-3 -3 22 22';
     return (
-      <div className="echLegendItem__color">
-        <Icon type="dot" aria-label="series color" color={color} onClick={colorClickAction} />
+      <div className="echLegendItem__color" aria-label={title} title={title}>
+        <Icon type={iconType} color={iconColor} onClick={colorClickAction} viewBox={viewBox} />
       </div>
     );
   }
@@ -84,7 +90,7 @@ class LegendItemComponent extends React.Component<LegendItemProps, LegendItemSta
 
   renderTitle(
     title: string | undefined,
-    onTitleClick: () => void,
+    onTitleClick: (event: React.MouseEvent<Element, MouseEvent>) => void,
     hasTitleClickListener: boolean,
     isSelected: boolean,
     hasDisplayValue: boolean,
@@ -153,7 +159,7 @@ class LegendItemComponent extends React.Component<LegendItemProps, LegendItemSta
   //   );
   // }
 
-  private onVisibilityClick = (legendItemKey: string) => (event: React.MouseEvent<SVGElement>) => {
+  private onVisibilityClick = (legendItemKey: string) => (event: React.MouseEvent) => {
     if (event.shiftKey) {
       this.props.chartStore!.toggleSingleSeries(legendItemKey);
     } else {

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,9 @@`
`32`	`32`	`@include euiTextTruncate;`
`33`	`33`	`margin-right: $euiSizeXS;`
`34`	`34`	`flex: 1;`
	`35`	`+ &:hover {`
	`36`	`+ cursor: pointer;`
	`37`	`+ }`
`35`	`38`	`}`
`36`	`39`
`37`	`40`	`.echLegendItem__title--selected {`
`@@ -53,3 +56,7 @@`
`53`	`56`	`display: none;`
`54`	`57`	`}`
`55`	`58`	`}`
	`59`	`+`
	`60`	`+.echLegendItem-isHidden {`
	`61`	`+ color: $euiColorDarkShade;`
	`62`	`+}`