fix(legend): fix color anchor, add action context, fix action padding (…

…opensearch-project#774)

- change color picker anchor to the color dot icon
- fix eui popover styles pollution with EuiWrappingPopover
- add resolved label and color to legend action component to avoid recomputing
- add action padding to legend width when action is provided

packages/osd-charts/api/charts.api.md

@@ -767,6 +767,8 @@ export type LegendAction = ComponentType<LegendActionProps>;
 
 // @public
 export interface LegendActionProps {
+    color: string;
+    label: string;
     series: SeriesIdentifier;
 }
 

packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" 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=\\"test\\">test</div></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g transform=\\"translate(10, 10) rotate(0)\\"></g></svg></div></div></div>"`;
+exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color\\" aria-label=\\"series color\\" title=\\"series color\\"><div><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" 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><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\">test</div></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g transform=\\"translate(10, 10) rotate(0)\\"></g></svg></div></div></div>"`;

packages/osd-charts/src/components/icons/icon.tsx

@@ -18,7 +18,7 @@
  */
 
 import classNames from 'classnames';
-import React, { SVGAttributes } from 'react';
+import React, { SVGAttributes, memo } from 'react';
 
 import { deepEqual } from '../../utils/fast_deep_equal';
 import { AlertIcon } from './assets/alert';
@@ -56,34 +56,30 @@ interface IconProps {
 /** @internal */
 export type IconComponentProps = Omit<SVGAttributes<SVGElement>, 'color' | 'type'> & IconProps;
 
-/** @internal */
-export class Icon extends React.Component<IconComponentProps> {
-  shouldComponentUpdate(nextProps: IconComponentProps) {
-    return !deepEqual(this.props, nextProps);
-  }
+function IconComponent({ type, color, className, tabIndex, ...rest }: IconComponentProps) {
+  let optionalCustomStyles = null;
 
-  render() {
-    const { type, color, className, tabIndex, ...rest } = this.props;
-    let optionalCustomStyles = null;
-
-    if (color) {
-      optionalCustomStyles = { color };
-    }
+  if (color) {
+    optionalCustomStyles = { color };
+  }
 
-    const classes = classNames('echIcon', className);
+  const classes = classNames('echIcon', className);
 
-    const Svg = (type && typeToIconMap[type]) || EmptyIcon;
+  const Svg = (type && typeToIconMap[type]) || EmptyIcon;
 
-    /*
-     * This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
-     * focusable="false".
-     *   - If there's no tab index specified, we'll default the icon to not be focusable,
-     *     which is how SVGs behave in Chrome, Safari, and FF.
-     *   - If tab index is -1, then the consumer wants the icon to not be focusable.
-     *   - For all other values, the consumer wants the icon to be focusable.
-     */
-    const focusable = tabIndex == null || tabIndex === -1 ? 'false' : 'true';
+  /*
+   * This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
+   * focusable="false".
+   *   - If there's no tab index specified, we'll default the icon to not be focusable,
+   *     which is how SVGs behave in Chrome, Safari, and FF.
+   *   - If tab index is -1, then the consumer wants the icon to not be focusable.
+   *   - For all other values, the consumer wants the icon to be focusable.
+   */
+  const focusable = tabIndex == null || tabIndex === -1 ? 'false' : 'true';
 
-    return <Svg className={classes} {...optionalCustomStyles} tabIndex={tabIndex} focusable={focusable} {...rest} />;
-  }
+  return <Svg className={classes} {...optionalCustomStyles} tabIndex={tabIndex} focusable={focusable} {...rest} />;
 }
+IconComponent.displayName = 'Icon';
+
+/** @internal */
+export const Icon = memo(IconComponent, deepEqual);