fix: cleanup story, update prop naming, fix hover issues

elastic · Jul 13, 2020 · 8b303ea · 8b303ea
1 parent 2c3825a
commit 8b303ea
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 45 deletions.
diff --git a/.storybook/style.scss b/.storybook/style.scss
@@ -57,3 +57,8 @@ html.echVisualTesting {
     padding-bottom: 200px;
   }
 }
+
+// for using EuiWrappingPopover in stories
+.euiPopover__anchor {
+  width: 100%;
+}
diff --git a/src/components/legend/_legend_item.scss b/src/components/legend/_legend_item.scss
@@ -16,22 +16,31 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     }
   }
 
+  &__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;
-
-    &:hover {
-      background-color: #e7f0f7;
-    }
   }
 
-  &__main:hover ~ .echLegendItem__action {
-    display: block;
+  &__mainWrapper {
+    @include euiTextTruncate;
+    width: 100%;
+    flex: 1 1 auto;
   }
 
   &__action {
@@ -85,8 +94,10 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
 
   &--right,
   &--left {
-    padding-top: $legendItemVerticalPadding;
-    padding-bottom: $legendItemVerticalPadding;
+    .echLegendItem__mainWrapper {
+      padding-top: $legendItemVerticalPadding;
+      padding-bottom: $legendItemVerticalPadding;
+    }
   }
 
   @include internetExplorerOnly {
@@ -96,8 +107,10 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
       margin-right: $euiSizeL;
     }
 
-    padding-top: $legendItemVerticalPadding;
-    padding-bottom: $legendItemVerticalPadding;
+    .echLegendItem__mainWrapper {
+      padding-top: $legendItemVerticalPadding;
+      padding-bottom: $legendItemVerticalPadding;
+    }
   }
 
   &--hidden {

diff --git a/src/components/legend/legend_item.tsx b/src/components/legend/legend_item.tsx
@@ -223,14 +223,16 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
           onMouseLeave={this.onLegendItemMouseOut}
           style={style}
         >
-          <div className="echLegendItem__main">
-            <ItemColor
-              color={color}
-              isSeriesHidden={isSeriesHidden}
-              hasColorPicker={hasColorPicker}
-              onClick={this.handleColorClick(hasColorPicker)}
-            />
-            <ItemLabel label={label} onClick={this.handleLabelClick(seriesIdentifier)} />
+          <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)} />
+            </div>
           </div>
           <div
             className={classNames('echLegendItem__action', {
@@ -241,8 +243,8 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
               && (
                 <Action
                   seriesIdentifier={seriesIdentifier}
-                  onOpen={() => this.setState({ actionActive: true })}
-                  onClose={() => this.setState({ actionActive: false })}
+                  activateAction={() => this.setState({ actionActive: true })}
+                  deactivateAction={() => this.setState({ actionActive: false })}
                 />
               )}
           </div>

diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx
@@ -190,19 +190,22 @@ export interface ExternalPointerEventsSettings {
   }
 }
 
+/**
+ * @public
+ */
 export interface LegendActionProps {
   /**
-   * Callback when action is opened by user
+   * Callback to indicate when action is activated
    *
    * Use when openning a popover where you want to persist the action button
    */
-  onOpen: () => void;
+  activateAction: () => void;
   /**
-   * Callback to close action
+   * Callback to indicate when action is deactivated
    *
    * Use when openning a popover where you want to persist the action button
    */
-  onClose: () => void;
+  deactivateAction: () => void;
   /**
    * Series id for the given series
    */

diff --git a/stories/legend/11_legend_actions.tsx b/stories/legend/11_legend_actions.tsx
@@ -17,17 +17,15 @@
  * under the License.
  */
 
-import { EuiIcon, EuiPopover, EuiContextMenu, EuiContextMenuPanelDescriptor } from '@elastic/eui';
-import { boolean } from '@storybook/addon-knobs';
+import { EuiIcon, EuiPopover, EuiContextMenu, EuiContextMenuPanelDescriptor, EuiWrappingPopover, EuiColorPicker, EuiSpacer, EuiButton } from '@elastic/eui';
 import React, { useState } from 'react';
 
-import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendAction, XYChartSeriesIdentifier } from '../../src';
+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';
 
-export const Example = () => {
-  const hideActions = boolean('Hide actions', false);
-  const [popoverId, setPopoverId] = useState<string | null>(null);
+const getAction = (hideActions: boolean): LegendAction => ({ activateAction, deactivateAction, seriesIdentifier }) => {
+  const [popoverOpen, setPopoverOpen] = useState(false);
 
   const getPanels = (series: XYChartSeriesIdentifier, onClose: () => void): EuiContextMenuPanelDescriptor[] => [
     {
@@ -38,7 +36,7 @@ export const Example = () => {
           name: 'Alert series specId',
           icon: <EuiIcon type="iInCircle" size="m" />,
           onClick: () => {
-            setPopoverId(null);
+            setPopoverOpen(false);
             onClose();
             setTimeout(() => {
               window.alert(`Selected series: ${series.specId}`);
@@ -49,7 +47,7 @@ export const Example = () => {
           name: 'Alert series keys',
           icon: <EuiIcon type="tokenKey" size="m" />,
           onClick: () => {
-            setPopoverId(null);
+            setPopoverOpen(false);
             onClose();
             setTimeout(() => {
               window.alert(`Selected series: [${series.seriesKeys.join(', ')}]`);
@@ -60,7 +58,7 @@ export const Example = () => {
           name: 'Filter series',
           icon: <EuiIcon type="filter" size="m" />,
           onClick: () => {
-            setPopoverId(null);
+            setPopoverOpen(false);
             onClose();
             setTimeout(() => {
               window.alert('Series Filtered!');
@@ -71,7 +69,7 @@ export const Example = () => {
           name: 'Like series',
           icon: <EuiIcon type="starFilled" size="m" />,
           onClick: () => {
-            setPopoverId(null);
+            setPopoverOpen(false);
             onClose();
             setTimeout(() => {
               window.alert('Series liked!!!');
@@ -93,11 +91,11 @@ export const Example = () => {
         marginRight: 4,
       }}
       onClick={() => {
-        if (key === popoverId) {
-          setPopoverId(null);
+        if (popoverOpen) {
+          setPopoverOpen(false);
           onClose();
         } else {
-          setPopoverId(key);
+          setPopoverOpen(true);
           onOpen();
         }
       }}
@@ -106,29 +104,56 @@ export const Example = () => {
     </div>
   );
 
-  const Action: LegendAction = ({ onOpen, onClose, seriesIdentifier }) => (
+  return (
     <EuiPopover
       id="contextMenuNormal"
-      button={hideActions ? <div /> : getButton(seriesIdentifier.key, onOpen, onClose)}
-      isOpen={popoverId === seriesIdentifier.key}
+      button={hideActions ? <div /> : getButton(seriesIdentifier.key, activateAction, deactivateAction)}
+      isOpen={popoverOpen}
       closePopover={() => {
-        setPopoverId(null);
-        onClose();
+        setPopoverOpen(false);
+        deactivateAction();
       }}
       panelPaddingSize="none"
       withTitle
       anchorPosition="upLeft"
     >
       <EuiContextMenu
         initialPanelId={0}
-        panels={getPanels(seriesIdentifier as XYChartSeriesIdentifier, onClose)}
+        panels={getPanels(seriesIdentifier as XYChartSeriesIdentifier, deactivateAction)}
       />
     </EuiPopover>
   );
+};
+
+const renderColorPicker: LegendColorPicker = ({ anchor, color, onClose, onChange }) => (
+  <EuiWrappingPopover
+    isOpen
+    button={anchor}
+    closePopover={onClose}
+    anchorPosition="leftCenter"
+  >
+    <EuiColorPicker display="inline" color={color} onChange={onChange} />
+    <EuiSpacer size="m" />
+    <EuiButton fullWidth size="s" onClick={onClose}>
+      Done
+    </EuiButton>
+  </EuiWrappingPopover>
+);
+
+export const Example = () => {
+  const hideActions = false;
+  const showLegendExtra = true;
+  const showColorPicker = true;
 
   return (
     <Chart className="story-chart">
-      <Settings showLegend showLegendExtra legendPosition={getPositionKnob()} legendAction={Action} />
+      <Settings
+        showLegend
+        showLegendExtra={showLegendExtra}
+        legendPosition={getPositionKnob('Legend position')}
+        legendAction={getAction(hideActions)}
+        legendColorPicker={showColorPicker ? renderColorPicker : undefined}
+      />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 

diff --git a/stories/legend/9_color_picker.tsx b/stories/legend/9_color_picker.tsx
@@ -46,7 +46,7 @@ export const Example = () => {
       onChangeAction(color);
     };
     return (
-      <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose}>
+      <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter">
         <EuiColorPicker display="inline" color={color} onChange={handleChange} />
         <EuiSpacer size="m" />
         <EuiButton fullWidth size="s" onClick={handleClose}>