refactor: legend styles with latest design changes

elastic · Jul 16, 2020 · 5b6f1a2 · 5b6f1a2
1 parent a07e23a
commit 5b6f1a2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 102 deletions.
diff --git a/src/components/legend/_legend_item.scss b/src/components/legend/_legend_item.scss
@@ -8,48 +8,24 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
   user-select: none;
   align-items: center;
   width: 100%;
-  height: 100%;
 
   &:not(&--hidden) {
     .echLegendItem__color--changable {
       cursor: pointer;
     }
   }
 
-  &__mainWrapper:hover {
-    .echLegendItem__main {
-      background-color: #e7f0f7;
-    }
-
-    ~ .echLegendItem__action {
-      display: block;
-    }
-  }
-
-  &__main {
-    @include euiTextTruncate;
-    width: 100%;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    padding-right: $euiSizeXS;
-    align-items: center;
-    flex: 1 1 auto;
-  }
-
-  &__mainWrapper {
-    @include euiTextTruncate;
-    width: 100%;
-    flex: 1 1 auto;
+  &:hover {
+    background-color: #e7f0f7;
   }
 
   &__action {
     height: 100%;
     cursor: pointer;
-
-    &:hover {
-      background-color: #e7f0f7;
-    }
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: $euiSizeXS;
   }
 
   &__color {
@@ -91,10 +67,8 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
 
   &--right,
   &--left {
-    .echLegendItem__mainWrapper {
-      padding-top: $legendItemVerticalPadding;
-      padding-bottom: $legendItemVerticalPadding;
-    }
+    margin-top: $legendItemVerticalPadding;
+    margin-bottom: $legendItemVerticalPadding;
   }
 
   @include internetExplorerOnly {
@@ -104,10 +78,8 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
       margin-right: $euiSizeL;
     }
 
-    .echLegendItem__mainWrapper {
-      padding-top: $legendItemVerticalPadding;
-      padding-bottom: $legendItemVerticalPadding;
-    }
+    margin-top: $legendItemVerticalPadding;
+    margin-bottom: $legendItemVerticalPadding;
   }
 
   &--hidden {

diff --git a/src/components/legend/color.tsx b/src/components/legend/color.tsx
@@ -48,7 +48,12 @@ export function Color({ color, isSeriesHidden = false, hasColorPicker, onClick }
   });
 
   return (
-    <div onClick={onClick} className={colorClasses} aria-label="series color" title="series color">
+    <div
+      onClick={hasColorPicker ? onClick : undefined}
+      className={colorClasses}
+      aria-label="series color"
+      title={hasColorPicker ? 'change series color' : 'series color'}
+    >
       <Icon type="dot" color={color} />
     </div>
   );

diff --git a/src/components/legend/legend_item.tsx b/src/components/legend/legend_item.tsx
@@ -223,27 +223,18 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
           onMouseLeave={this.onLegendItemMouseOut}
           style={style}
         >
-          <div className="echLegendItem__mainWrapper">
-            <div className="echLegendItem__main">
-              <ItemColor
-                color={color}
-                isSeriesHidden={isSeriesHidden}
-                hasColorPicker={hasColorPicker}
-                onClick={this.handleColorClick(hasColorPicker)}
-              />
-              <ItemLabel label={label} onClick={this.handleLabelClick(seriesIdentifier)} />
-              {showExtra && extra != null && renderExtra(extra, isSeriesHidden)}
-            </div>
-          </div>
-
+          <ItemColor
+            color={color}
+            isSeriesHidden={isSeriesHidden}
+            hasColorPicker={hasColorPicker}
+            onClick={this.handleColorClick(hasColorPicker)}
+          />
+          <ItemLabel label={label} onClick={this.handleLabelClick(seriesIdentifier)} />
+          {showExtra && extra != null && renderExtra(extra, isSeriesHidden)}
           {Action
             && (
               <div className="echLegendItem__action">
-                <Action
-                  seriesIdentifier={seriesIdentifier}
-                  activateAction={() => this.setState({ actionActive: true })}
-                  deactivateAction={() => this.setState({ actionActive: false })}
-                />
+                <Action series={seriesIdentifier} />
               </div>
             )}
         </li>

diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx
@@ -197,21 +197,9 @@ export interface ExternalPointerEventsSettings {
  */
 export interface LegendActionProps {
   /**
-   * Callback to indicate when action is activated
-   *
-   * Use when openning a popover where you want to persist the action button
-   */
-  activateAction: () => void;
-  /**
-   * Callback to indicate when action is deactivated
-   *
-   * Use when openning a popover where you want to persist the action button
+   * Series identifier for the given series
    */
-  deactivateAction: () => void;
-  /**
-   * Series id for the given series
-   */
-  seriesIdentifier: SeriesIdentifier;
+  series: SeriesIdentifier;
 }
 /**
  * Legend action component used to render actions next to legend items

diff --git a/stories/legend/11_legend_actions.tsx b/stories/legend/11_legend_actions.tsx
@@ -18,16 +18,17 @@
  */
 
 import { EuiIcon, EuiPopover, EuiContextMenu, EuiContextMenuPanelDescriptor, EuiWrappingPopover, EuiColorPicker, EuiSpacer, EuiButton } from '@elastic/eui';
+import { boolean } from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendAction, XYChartSeriesIdentifier, LegendColorPicker } from '../../src';
 import * as TestDatasets from '../../src/utils/data_samples/test_dataset';
 import { getPositionKnob } from '../utils/knobs';
 
-const getAction = (hideActions: boolean): LegendAction => ({ activateAction, deactivateAction, seriesIdentifier }) => {
+const getAction = (hideActions: boolean): LegendAction => ({ series }) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
 
-  const getPanels = (series: XYChartSeriesIdentifier, onClose: () => void): EuiContextMenuPanelDescriptor[] => [
+  const getPanels = (series: XYChartSeriesIdentifier): EuiContextMenuPanelDescriptor[] => [
     {
       id: 0,
       title: 'Legend Actions',
@@ -37,7 +38,6 @@ const getAction = (hideActions: boolean): LegendAction => ({ activateAction, dea
           icon: <EuiIcon type="iInCircle" size="m" />,
           onClick: () => {
             setPopoverOpen(false);
-            onClose();
             setTimeout(() => {
               window.alert(`Selected series: ${series.specId}`);
             }, 100);
@@ -48,7 +48,6 @@ const getAction = (hideActions: boolean): LegendAction => ({ activateAction, dea
           icon: <EuiIcon type="tokenKey" size="m" />,
           onClick: () => {
             setPopoverOpen(false);
-            onClose();
             setTimeout(() => {
               window.alert(`Selected series: [${series.seriesKeys.join(', ')}]`);
             }, 100);
@@ -59,7 +58,6 @@ const getAction = (hideActions: boolean): LegendAction => ({ activateAction, dea
           icon: <EuiIcon type="filter" size="m" />,
           onClick: () => {
             setPopoverOpen(false);
-            onClose();
             setTimeout(() => {
               window.alert('Series Filtered!');
             }, 100);
@@ -70,7 +68,6 @@ const getAction = (hideActions: boolean): LegendAction => ({ activateAction, dea
           icon: <EuiIcon type="starFilled" size="m" />,
           onClick: () => {
             setPopoverOpen(false);
-            onClose();
             setTimeout(() => {
               window.alert('Series liked!!!');
             }, 100);
@@ -80,7 +77,7 @@ const getAction = (hideActions: boolean): LegendAction => ({ activateAction, dea
     },
   ];
 
-  const getButton = (key: string, onOpen: () => void, onClose: () => void) => (
+  const Button = (
     <div
       style={{
         display: 'flex',
@@ -90,15 +87,7 @@ const getAction = (hideActions: boolean): LegendAction => ({ activateAction, dea
         marginLeft: 4,
         marginRight: 4,
       }}
-      onClick={() => {
-        if (popoverOpen) {
-          setPopoverOpen(false);
-          onClose();
-        } else {
-          setPopoverOpen(true);
-          onOpen();
-        }
-      }}
+      onClick={() => setPopoverOpen(!popoverOpen)}
     >
       <EuiIcon size="s" type="pencil" />
     </div>
@@ -107,19 +96,16 @@ const getAction = (hideActions: boolean): LegendAction => ({ activateAction, dea
   return (
     <EuiPopover
       id="contextMenuNormal"
-      button={hideActions ? <div /> : getButton(seriesIdentifier.key, activateAction, deactivateAction)}
+      button={hideActions ? <div /> : Button}
       isOpen={popoverOpen}
-      closePopover={() => {
-        setPopoverOpen(false);
-        deactivateAction();
-      }}
+      closePopover={() => setPopoverOpen(false)}
       panelPaddingSize="none"
       withTitle
       anchorPosition="upLeft"
     >
       <EuiContextMenu
         initialPanelId={0}
-        panels={getPanels(seriesIdentifier as XYChartSeriesIdentifier, deactivateAction)}
+        panels={getPanels(series as XYChartSeriesIdentifier)}
       />
     </EuiPopover>
   );
@@ -141,9 +127,9 @@ const renderColorPicker: LegendColorPicker = ({ anchor, color, onClose, onChange
 );
 
 export const Example = () => {
-  const hideActions = false;
-  const showLegendExtra = true;
-  const showColorPicker = true;
+  const hideActions = boolean('Hide legend action', false);
+  const showLegendExtra = !boolean('Hide legend extra', false);
+  const showColorPicker = !boolean('Hide color picker', true);
 
   return (
     <Chart className="story-chart">
@@ -174,12 +160,7 @@ Example.story = {
   parameters: {
     info: {
       text:
-        `The \`legendAction\` action prop allows you to pass a render function/component that will render next to the legend item.
-
-
-The \`onOpen\` and \`onClose\` props of the \`LegendAction\` component should be used when it is desirable to persist the action after clicked.
-For example when using an action with a popover context menu. Without using \`onOpen\` and \`onClose\` the action element will only appear when
-the item is hovered over`,
+        'The `legendAction` action prop allows you to pass a render function/component that will render next to the legend item.',
     },
   },
 };