Fix react-vis overrides (#1123)

* Nesting react-vis owned class into SeriesContainer * Fix wrongly updated tests * Enable classes composition on SeriesChart * Update CHANGELOG
elastic · Aug 20, 2018 · 91dbf4e · 91dbf4e
1 parent 5a0ff16
commit 91dbf4e
Show file tree

Hide file tree

Showing 19 changed files with 62 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,8 @@
 - `EuiWrappingPopover` only re-attach anchor element on unmount if anchor element is still attached to DOM
 ([#1114](https://github.com/elastic/eui/pull/1114))
 
+- Fixed `EuiSeriesChart` overrides `react-vis` classes.([#1123](https://github.com/elastic/eui/pull/1123))
+
 ## [`3.5.1`](https://github.com/elastic/eui/tree/v3.5.1)
 
 - Fixed a bug around `indeterminate` checkboxes ([#1110](https://github.com/elastic/eui/pull/1110))

diff --git a/src/components/series_chart/_index.scss b/src/components/series_chart/_index.scss
@@ -1,11 +1,12 @@
 /* react-vis scss styles copied and pasted from react-vis lib */
-@import "styles/react_vis/plot";
-@import "styles/react_vis/legends";
-@import "styles/react_vis/radial-chart";
-@import "styles/react_vis/treemap";
+.euiSeriesChartContainer {
+  @import "styles/react_vis/plot";
+  @import "styles/react_vis/legends";
+  @import "styles/react_vis/radial-chart";
+  @import "styles/react_vis/treemap";
+  @import "styles/react_vis/overrides";
+}
 
 @import "series/index";
-@import "axis/index";
 @import "legend";
 @import "line_annotation";
-@import "series_chart";
diff --git a/src/components/series_chart/_series_chart.scss b/src/components/series_chart/_series_chart.scss
diff --git a/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiDefaultAxis render default axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -464,7 +464,7 @@ exports[`EuiDefaultAxis render rotated 90deg default axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div

diff --git a/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap b/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiHorizontalGrid render the horizontal grid 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div

diff --git a/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap b/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiVerticalGrid render the vertical grid 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div

diff --git a/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiXAxis render the x axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div

diff --git a/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiYAxis render the y axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div

diff --git a/src/components/series_chart/axis/_index.scss b/src/components/series_chart/axis/_index.scss
diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiCrosshairX render the X crosshair 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div

diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiCrosshairY render the Y crosshair 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div

diff --git a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap
@@ -43,7 +43,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = `
     >
       <div
         aria-label="aria-label"
-        className="testClass1 testClass2"
+        className="testClass1 testClass2 euiSeriesChartContainer"
         data-test-subj="test subject string"
       >
         <XYPlot

diff --git a/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap b/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiHorizontalBarSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -440,7 +442,7 @@ exports[`EuiHorizontalBarSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -876,7 +878,9 @@ exports[`EuiHorizontalBarSeries renders stacked bar chart 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"

diff --git a/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap b/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiHorizontalRectSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -440,7 +442,7 @@ exports[`EuiHorizontalRectSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -876,7 +878,9 @@ exports[`EuiHorizontalRectSeries renders stacked bar chart 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"

diff --git a/src/components/series_chart/series/__snapshots__/line_series.test.js.snap b/src/components/series_chart/series/__snapshots__/line_series.test.js.snap
@@ -35,7 +35,9 @@ exports[`EuiLineSeries all props are rendered 1`] = `
       yPadding={0}
       yType="linear"
     >
-      <div>
+      <div
+        className="euiSeriesChartContainer"
+      >
         <XYPlot
           animation={true}
           className=""
@@ -4156,7 +4158,7 @@ exports[`EuiLineSeries is rendered 1`] = `
     >
       <div
         aria-label="aria-label"
-        className="testClass1 testClass2"
+        className="testClass1 testClass2 euiSeriesChartContainer"
         data-test-subj="test subject string"
       >
         <XYPlot

diff --git a/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap b/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiVerticalBarSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -501,7 +503,7 @@ exports[`EuiVerticalBarSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -998,7 +1000,9 @@ exports[`EuiVerticalBarSeries renders stacked bar chart 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"

diff --git a/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap b/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiVerticalRectSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -521,7 +523,7 @@ exports[`EuiVerticalRectSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -1038,7 +1040,9 @@ exports[`EuiVerticalRectSeries renders stacked vertical histogram 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"

diff --git a/src/components/series_chart/series_chart.js b/src/components/series_chart/series_chart.js
@@ -1,4 +1,5 @@
 import React, { PureComponent, Fragment } from 'react';
+import classNames from 'classnames';
 import { XYPlot, AbstractSeries  } from 'react-vis';
 import { makeFlexible } from './utils/flexible';
 import PropTypes from 'prop-types';
@@ -108,6 +109,7 @@ class XYChart extends PureComponent {
       orientation,
       crosshairValue,
       onCrosshairUpdate,
+      className,
       ...rest
     } = this.props;
 
@@ -127,8 +129,12 @@ class XYChart extends PureComponent {
 
     const Crosshair = orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX;
     const seriesNames = this._getSeriesNames(children);
+    const classes = classNames(className, 'euiSeriesChartContainer');
     return (
-      <div {...rest}>
+      <div
+        className={classes}
+        {...rest}
+      >
         <XYPlot
           ref={this._xyPlotRef}
           dontCheckIfEmpty

diff --git a/src/components/series_chart/axis/_grids.scss → ...ies_chart/styles/react_vis/overrides.scss b/src/components/series_chart/axis/_grids.scss → ...ies_chart/styles/react_vis/overrides.scss
@@ -1,3 +1,8 @@
+.rv-xy-plot {
+  width: 100% !important;  // this because react-vis fix the width of the container in px
+  height: 100% !important; // avoid a correct computation of the component size
+}
+
 // NOTE: the current implementation of react-vis doesn't supports
 // adding classes to grid lines but only a style prop is supported.
 // We can overwrite here the original react-vis class or overwrite