chore(charts): remove eui chart theme (#7572)

elastic · Mar 15, 2024 · 53c140e · 53c140e
1 parent bb132ea
commit 53c140e
Show file tree

Hide file tree

Showing 36 changed files with 279 additions and 534 deletions.
diff --git a/changelogs/upcoming/7572.md b/changelogs/upcoming/7572.md
@@ -0,0 +1,5 @@
+**Deprecations**
+
+- Deprecated all charts theme exports in favor of `@elastic/charts` exports:
+  - Deprecated `EUI_CHARTS_THEME_<DARK|LIGHT>` in favor of `<DARK|LIGHT>_THEME` from `@elastic/charts`. ([#7572](https://github.com/elastic/eui/pull/7572))
+  - Deprecated `EUI_SPARKLINE_THEME_PARTIAL` in favor of `useSparklineOverrides` theme from the kibana `charts` plugin `theme` service.
diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
     "@cypress/react": "^7.0.3",
     "@cypress/react18": "^2.0.0",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^64.0.2",
+    "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",

diff --git a/src-docs/src/components/guide_section/_utils.test.js b/src-docs/src/components/guide_section/_utils.test.js
@@ -8,13 +8,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import { EuiButton } from '../src/components';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
         dedent(`
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -26,13 +26,13 @@ describe('renderJsSourceCode', () => {
             import { EuiCode } from '../../../src/components/code';
             import { EuiCallOut } from '../../../src/components/callout';
             import { useGeneratedHtmlId } from '../../../src/services';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`),
         })
       ).toEqual(
         dedent(`
             import { EuiCode, EuiCallOut, useGeneratedHtmlId } from '@elastic/eui';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`)
       );
     });
@@ -43,7 +43,7 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import { EuiButton, EuiFlexGroup, EuiFlexItem } from '../../src/components';
             import { useGeneratedHtmlId } from '../../src/services';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`),
         })
       ).toEqual(
@@ -54,7 +54,7 @@ describe('renderJsSourceCode', () => {
               EuiFlexItem,
               useGeneratedHtmlId,
             } from '@elastic/eui';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`)
       );
     });
@@ -63,14 +63,14 @@ describe('renderJsSourceCode', () => {
       expect(
         renderJsSourceCode({
           default: dedent(`
-            import { EUI_CHARTS_THEME_DARK } from '@elastic/eui';
-  
+            import { SOME_RANDOM_IMPORT } from '@elastic/eui';
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
-          import { EUI_CHARTS_THEME_DARK } from '@elastic/eui';
-  
+          import { SOME_RANDOM_IMPORT } from '@elastic/eui';
+
           export default () => 'Hello world!';`)
       );
     });
@@ -80,13 +80,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
           import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
-  
+
           export default () => 'Hello world!';`)
       );
     });
@@ -99,14 +99,14 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import { EuiButton } from '../../src/components';
             import React, { useState } from 'react';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
         dedent(`
             import React, { useState } from 'react';
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -129,7 +129,7 @@ describe('renderJsSourceCode', () => {
               _mockDepMultiline,
               mockDepMultiline,
             } from 'fakeDep000';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
@@ -146,7 +146,7 @@ describe('renderJsSourceCode', () => {
               _mockDepMultiline,
               mockDepMultiline,
             } from 'fakeDep000';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -159,7 +159,7 @@ describe('renderJsSourceCode', () => {
             import { EuiButton } from '@elastic/eui';
             // @ts-ignore no types definitions
             import hello from 'world';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
@@ -180,15 +180,15 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import React, { useState } from 'react';
-  
+
             import { EuiButton } from '../../src/components';
-  
+
             import { useGeneratedHtmlId } from '../../../src/services';
-  
+
             import hello from 'world';
-  
+
             import { data } from '../data_store';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
@@ -197,7 +197,7 @@ describe('renderJsSourceCode', () => {
             import { EuiButton, useGeneratedHtmlId } from '@elastic/eui';
             import hello from 'world';
             import { data } from '../data_store';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -211,13 +211,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -227,13 +227,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import React from 'react';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import React from 'react';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -243,13 +243,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -260,14 +260,14 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import React from 'react';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import React from 'react';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -278,14 +278,14 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import { is } from '@elastic/eui';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import { is } from '@elastic/eui';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -301,7 +301,7 @@ describe('renderJsSourceCode', () => {
               EuiButton,
               EuiCode,
             } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
@@ -326,7 +326,7 @@ describe('renderJsSourceCode', () => {
             const jsCode = \`/* I'm an example of JS */
             import React from 'react';
             const hello = 'world';\`;
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
@@ -337,7 +337,7 @@ describe('renderJsSourceCode', () => {
             const jsCode = \`/* I'm an example of JS */
             import React from 'react';
             const hello = 'world';\`;
-  
+
             export default () => 'Hello world!';`)
       );
     });

diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss
@@ -5,4 +5,3 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
-@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss
@@ -5,4 +5,3 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
-@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
@@ -8,22 +8,13 @@ import {
   euiPaletteGray,
   useEuiTheme,
 } from '../../../../src/services';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
   const id = htmlIdGenerator()();
-
-  /**
-   * Setup theme based on current light/dark theme
-   */
+  const { colorMode } = useEuiTheme();
   const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
+  const chartBaseTheme = useChartBaseTheme();
 
   const bandLabels = ['freezing', 'cold', 'brisk', 'warm', 'hot'];
   const bands = [0, 100, 125, 150, 250];
@@ -50,7 +41,7 @@ export default () => {
       <EuiSpacer />
       <Chart size={{ height: 200 }}>
         <Settings
-          theme={euiChartTheme.theme}
+          baseTheme={chartBaseTheme}
           ariaLabelledBy={id}
           ariaDescription="This goal chart has a target of 260."
           ariaUseDefaultSummary={false}

diff --git a/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
@@ -1,25 +1,15 @@
 import React from 'react';
 import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
 import { EuiTitle, EuiSpacer } from '../../../../src/components';
-import { useEuiTheme, htmlIdGenerator } from '../../../../src/services';
+import { htmlIdGenerator } from '../../../../src/services';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
   const id = htmlIdGenerator()();
 
-  /**
-   * Setup theme based on current light/dark theme
-   */
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const { vizColors } = euiChartTheme.theme.colors!;
+  const { vizColors } = chartBaseTheme.colors;
 
   type Data = { fruit: string; count: number };
   const data: Data[] = [
@@ -49,7 +39,7 @@ export default () => {
       <EuiSpacer />
       <Chart size={{ height: 200 }}>
         <Settings
-          theme={euiChartTheme.theme}
+          baseTheme={chartBaseTheme}
           ariaLabelledBy={id}
           ariaDescription="There is a great variety of reported favorite fruit"
           ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,3 @@

		// Elastic charts
		@import '~@elastic/charts/dist/theme';
		@import '../../src/themes/charts/theme';