Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Jul 31, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
94dc4ca
fix(legend): fix color anchor, add action context, fix action padding
nickofthyme Jul 30, 2020
ddc9652
test: update screenshots with changes
nickofthyme Jul 30, 2020
d0c2e26
fix: api changes and changed snapshots
nickofthyme Jul 30, 2020
2b67e89
Merge branch 'master' into legend-item-updates
nickofthyme Jul 30, 2020
db83ea4
Merge branch 'master' into legend-item-updates
nickofthyme Jul 31, 2020
fda6d02
fix: action sizing, component memoization
nickofthyme Jul 31, 2020
8709bab
test: update flaky screenshot
nickofthyme Jul 31, 2020
bc9ca08
fix: test only
nickofthyme Jul 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions api/charts.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -767,6 +767,8 @@ export type LegendAction = ComponentType<LegendActionProps>;

// @public
export interface LegendActionProps {
color: string;
label: string;
series: SeriesIdentifier;
}

Expand Down
Binary file modified ...ies-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/__snapshots__/chart.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>"`;
48 changes: 22 additions & 26 deletions src/components/icons/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Loading