[DEPRECATIONS] Remove EUI Charts, Sass deprecations (#2108)

* Remove eui chart components

* fix comment in sass responsive stuff

* sass deprecations removed

* update yarn

* remove k6 theme

* cl

* fix card docs due to xpack logo being deprecated

* cl

CHANGELOG.md

@@ -4,6 +4,12 @@
 
 - Fixed `EuiComboBox`'s padding on the right ([#2135](https://github.com/elastic/eui/pull/2135))
 
+**Breaking changes**
+
+- Removed `EuiSeriesChart` and related components. Please look to [Elastic Charts](https://github.com/elastic/elastic-charts) for a replacement. ([#2135](https://github.com/elastic/eui/pull/2108))
+- Removed `eui_k6_theme` related Sass and JSON files ([#2135](https://github.com/elastic/eui/pull/2108))
+- Removed no longer used Sass mixins and variables in `EuiForm`, `EuiCallOut`, and `EuiRange` components ([#2135](https://github.com/elastic/eui/pull/2108))
+
 ## [`12.4.0`](https://github.com/elastic/eui/tree/v12.4.0)
 
 - Centered the square of the `popout` glyph in the artboard ([#2120](https://github.com/elastic/eui/pull/2120))

package.json

@@ -60,7 +60,6 @@
     "react-input-autosize": "^2.2.1",
     "react-is": "~16.3.0",
     "react-virtualized": "^9.18.5",
-    "react-vis": "1.10.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^1.1.0",
     "uuid": "^3.1.0"

src-docs/src/components/guide_section/guide_section.js

@@ -372,10 +372,6 @@ export class GuideSection extends Component {
         /(from )'(..\/)+src\/services(\/?';)/,
         "from '@elastic/eui/lib/services';"
       )
-      .replace(
-        /(from )'(..\/)+src\/experimental(\/?';)/,
-        "from '@elastic/eui/lib/experimental';"
-      )
       .replace(/(from )'(..\/)+src\/components\/.*?';/, "from '@elastic/eui';");
 
     return (

src-docs/src/components/guide_theme_selector/guide_theme_selector.js

@@ -16,14 +16,6 @@ export class GuideThemeSelector extends Component {
         text: 'Dark',
         value: 'dark',
       },
-      {
-        text: 'K6',
-        value: 'k6',
-      },
-      {
-        text: 'K6 dark',
-        value: 'k6_dark',
-      },
     ];
 
     this.state = {

src-docs/src/index.js

@@ -15,17 +15,11 @@ import { registerTheme } from './services';
 import Routes from './routes';
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
-import themeK6Light from './theme_k6_light.scss';
-import themeK6Dark from './theme_k6_dark.scss';
 
 registerTheme('light', [themeLight]);
 
 registerTheme('dark', [themeDark]);
 
-registerTheme('k6', [themeK6Light]);
-
-registerTheme('k6_dark', [themeK6Dark]);
-
 // Set up app
 
 const store = configureStore();

src-docs/src/routes.js

@@ -176,18 +176,6 @@ import { ToggleExample } from './views/toggle/toggle_example';
 
 import { WindowEventExample } from './views/window_event/window_event_example';
 
-import { XYChartExample } from './views/series_chart/series_chart_example';
-
-import { XYChartAxisExample } from './views/series_chart_axis/series_axis_example';
-
-import { XYChartBarExample } from './views/series_chart_bar/bar_example';
-
-import { XYChartHistogramExample } from './views/series_chart_histogram/histogram_example';
-
-import { XYChartAreaExample } from './views/series_chart_area/area_example';
-
-import { XYChartLineExample } from './views/series_chart_line/line_example';
-
 import { Changelog } from './views/package/changelog';
 
 import { I18nTokens } from './views/package/i18n_tokens';
@@ -351,17 +339,6 @@ const navigation = [
       SelectableExample,
     ].map(example => createExample(example)),
   },
-  {
-    name: 'Charts (deprecated)',
-    items: [
-      XYChartExample,
-      XYChartAxisExample,
-      XYChartLineExample,
-      XYChartAreaExample,
-      XYChartBarExample,
-      XYChartHistogramExample,
-    ].map(example => createExample(example)),
-  },
   {
     name: 'Utilities',
     items: [

src-docs/src/views/card/card.js

@@ -7,7 +7,7 @@ import {
   EuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana'];
+const icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
 
 const cardNodes = icons.map(function(item, index) {
   return (

src-docs/src/views/color_palette/color_palette_example.js

@@ -14,10 +14,6 @@ import ColorPaletteCustom from './color_palette_custom';
 const colorPaletteCustomSource = require('!!raw-loader!./color_palette_custom');
 const colorPaletteCustomHtml = renderToHtml(ColorPaletteCustom);
 
-import ColorPaletteHistogram from './color_palette_histogram';
-const colorPaletteHistogramSource = require('!!raw-loader!./color_palette_histogram');
-const colorPaletteHistogramHtml = renderToHtml(ColorPaletteHistogram);
-
 export const ColorPaletteExample = {
   title: 'Color Palettes',
   sections: [
@@ -83,26 +79,5 @@ export const ColorPaletteExample = {
       ),
       demo: <ColorPaletteCustom />,
     },
-    {
-      title: 'Usage examples',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: colorPaletteHistogramSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPaletteHistogramHtml,
-        },
-      ],
-      text: (
-        <p>
-          Apply the colors from <EuiCode>eui_palettes.js</EuiCode> or the{' '}
-          <EuiCode>colorPalette</EuiCode>
-          service to the <EuiCode>color</EuiCode> prop of EUI chart components.
-        </p>
-      ),
-      demo: <ColorPaletteHistogram />,
-    },
   ],
 };