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

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.
elastic · Jul 15, 2019 · 90a1ba7 · 90a1ba7
1 parent 8551baa
commit 90a1ba7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
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 {