[Docs only] Adds a ThemeContext context to docs (#2857)

* Adds a ThemeContext context to docs

Stores theme value in local store; Removes need for `with_theme`; Causes console errors by Charts

* Changed method name

* Fixing coloring of a11y badges on colors page

* Fixing chart example

* Removed themeIsLoading and console.log

* Revert "Fixing coloring of a11y badges on colors page"

This reverts commit 6a25012.

* Removed remnants of theme from redux store

Co-authored-by: Chandler Prall <[email protected]>

src-docs/src/actions/action_types.js

@@ -5,9 +5,6 @@ export default keyMirror({
   REGISTER_SECTION: null,
   UNREGISTER_SECTION: null,
 
-  // Theme actions
-  TOGGLE_THEME: null,
-
   // Locale actions
   TOGGLE_LOCALE: null,
 });

src-docs/src/actions/index.js

@@ -1,3 +1 @@
-export { toggleTheme } from './theme_actions';
-
 export { toggleLocale } from './locale_actions';

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -161,10 +161,7 @@ export class GuidePageChrome extends Component {
             closePopover={this.closePopover.bind(this)}>
             <EuiPopoverTitle>Docs options</EuiPopoverTitle>
             <div className="guideOptionsPopover">
-              <GuideThemeSelector
-                onToggleTheme={this.props.onToggleTheme}
-                selectedTheme={this.props.selectedTheme}
-              />
+              <GuideThemeSelector />
               {location.host === 'localhost:8030' ? ( // eslint-disable-line no-restricted-globals
                 <GuideLocaleSelector
                   onToggleLocale={this.props.onToggleLocale}
@@ -332,8 +329,6 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRoute: PropTypes.object.isRequired,
-  onToggleTheme: PropTypes.func.isRequired,
-  selectedTheme: PropTypes.string.isRequired,
   onToggleLocale: PropTypes.func.isRequired,
   selectedLocale: PropTypes.string.isRequired,
   navigation: PropTypes.array.isRequired,

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

@@ -497,7 +497,6 @@ GuideSection.propTypes = {
     PropTypes.arrayOf(PropTypes.string),
   ]),
   children: PropTypes.any,
-  toggleTheme: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
   routes: PropTypes.object.isRequired,
   props: PropTypes.object,

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

@@ -2,20 +2,12 @@ import { connect } from 'react-redux';
 
 import { GuideSection } from './guide_section';
 
-import { getTheme, getRoutes } from '../../store';
-
-import { toggleTheme } from '../../actions';
+import { getRoutes } from '../../store';
 
 function mapStateToProps(state) {
   return {
-    theme: getTheme(state),
     routes: getRoutes(state),
   };
 }
 
-export const GuideSectionContainer = connect(
-  mapStateToProps,
-  {
-    toggleTheme,
-  }
-)(GuideSection);
+export const GuideSectionContainer = connect(mapStateToProps)(GuideSection);

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

@@ -1,59 +1,28 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
+import { ThemeContext } from '../with_theme';
 import { EuiSelect, EuiFormRow } from '../../../../src/components';
+import { EUI_THEMES } from '../../../../src/themes';
 
-export class GuideThemeSelector extends Component {
-  constructor(props) {
-    super(props);
-
-    this.themeOptions = [
-      {
-        text: 'Light',
-        value: 'light',
-      },
-      {
-        text: 'Dark',
-        value: 'dark',
-      },
-      {
-        text: 'Amsterdam: Light',
-        value: 'amsterdam-light',
-      },
-      {
-        text: 'Amsterdam: Dark',
-        value: 'amsterdam-dark',
-      },
-    ];
-
-    this.state = {
-      value: this.themeOptions[0].value,
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
-  };
-
-  render() {
-    return (
-      <EuiFormRow label="Theme">
-        <EuiSelect
-          options={this.themeOptions}
-          value={this.props.selectedTheme}
-          onChange={e => {
-            this.props.onToggleTheme(e.target.value);
-          }}
-          aria-label="Switch the theme"
-        />
-      </EuiFormRow>
-    );
-  }
-}
+export const GuideThemeSelector = () => {
+  return (
+    <ThemeContext.Consumer>
+      {context => <GuideThemeSelectorComponent context={context} />}
+    </ThemeContext.Consumer>
+  );
+};
 
-GuideThemeSelector.propTypes = {
-  onToggleTheme: PropTypes.func.isRequired,
-  selectedTheme: PropTypes.string.isRequired,
+const GuideThemeSelectorComponent = ({ context }) => {
+  return (
+    <EuiFormRow label="Theme">
+      <EuiSelect
+        options={EUI_THEMES}
+        value={context.theme}
+        onChange={e => {
+          context.changeTheme(e.target.value);
+        }}
+        aria-label="Switch the theme"
+      />
+    </EuiFormRow>
+  );
 };

src-docs/src/components/index.js

@@ -9,4 +9,4 @@ export { GuidePage, GuidePageChrome } from './guide_page';
 
 export { GuideSection, GuideSectionTypes } from './guide_section';
 
-export { withTheme } from './with_theme';
+export { ThemeProvider, ThemeContext } from './with_theme';

src-docs/src/components/with_theme/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider, ThemeContext } from './theme_context';

src-docs/src/components/with_theme/theme_context.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
+// @ts-ignore
+import { applyTheme } from '../../services';
+
+const defaultState = {
+  theme: EUI_THEMES[0].value,
+  changeTheme: (themeValue: EUI_THEME['value']) => {
+    applyTheme(themeValue);
+  },
+};
+
+interface State {
+  theme: EUI_THEME['value'];
+}
+
+export const ThemeContext = React.createContext(defaultState);
+
+export class ThemeProvider extends React.Component<object, State> {
+  constructor(props: object) {
+    super(props);
+
+    const theme = localStorage.getItem('theme') || defaultState.theme;
+    applyTheme(theme);
+
+    this.state = {
+      theme,
+    };
+  }
+
+  changeTheme = (themeValue: EUI_THEME['value']) => {
+    this.setState({ theme: themeValue }, () => {
+      localStorage.setItem('theme', themeValue);
+      applyTheme(themeValue);
+    });
+  };
+
+  render() {
+    const { children } = this.props;
+    const { theme } = this.state;
+    return (
+      <ThemeContext.Provider
+        value={{
+          theme,
+          changeTheme: this.changeTheme,
+        }}>
+        {children}
+      </ThemeContext.Provider>
+    );
+  }
+}

src-docs/src/views/app_container.js

@@ -2,14 +2,13 @@ import { connect } from 'react-redux';
 
 import { AppView } from './app_view';
 
-import { getTheme, getRoutes, getLocale } from '../store';
+import { getRoutes, getLocale } from '../store';
 
-import { toggleTheme, toggleLocale } from '../actions';
+import { toggleLocale } from '../actions';
 
 function mapStateToProps(state, ownProps) {
   return {
     currentRoute: ownProps.routes[1],
-    theme: getTheme(state),
     locale: getLocale(state),
     routes: getRoutes(state),
   };
@@ -18,7 +17,6 @@ function mapStateToProps(state, ownProps) {
 export const AppContainer = connect(
   mapStateToProps,
   {
-    toggleTheme,
     toggleLocale,
   }
 )(AppView);

src-docs/src/views/app_view.js

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import { applyTheme, translateUsingPseudoLocale } from '../services';
-
-import { GuidePageChrome } from '../components';
+import { GuidePageChrome, ThemeProvider, ThemeContext } from '../components';
+import { translateUsingPseudoLocale } from '../services';
 
 import {
   EuiErrorBoundary,
@@ -15,21 +14,13 @@ import {
 import { keyCodes } from '../../../src/services';
 
 export class AppView extends Component {
-  updateTheme = () => {
-    applyTheme(this.props.theme);
-  };
-
   componentDidUpdate(prevProps) {
-    this.updateTheme();
-
     if (prevProps.currentRoute.path !== this.props.currentRoute.path) {
       window.scrollTo(0, 0);
     }
   }
 
   componentDidMount() {
-    this.updateTheme();
-
     document.addEventListener('keydown', this.onKeydown);
   }
 
@@ -38,15 +29,7 @@ export class AppView extends Component {
   }
 
   renderContent() {
-    const {
-      children,
-      currentRoute,
-      toggleTheme,
-      theme,
-      toggleLocale,
-      locale,
-      routes,
-    } = this.props;
+    const { children, currentRoute, toggleLocale, locale, routes } = this.props;
 
     const { navigation } = routes;
 
@@ -66,8 +49,6 @@ export class AppView extends Component {
           <EuiErrorBoundary>
             <GuidePageChrome
               currentRoute={currentRoute}
-              onToggleTheme={toggleTheme}
-              selectedTheme={theme}
               onToggleLocale={toggleLocale}
               selectedLocale={locale}
               navigation={navigation}
@@ -76,7 +57,11 @@ export class AppView extends Component {
 
           <div className="guidePageContent">
             <EuiContext i18n={i18n}>
-              {React.cloneElement(children, { selectedTheme: theme })}
+              <ThemeContext.Consumer>
+                {context =>
+                  React.cloneElement(children, { selectedTheme: context.theme })
+                }
+              </ThemeContext.Consumer>
             </EuiContext>
           </div>
         </EuiPageBody>
@@ -85,7 +70,11 @@ export class AppView extends Component {
   }
 
   render() {
-    return <div className="guide">{this.renderContent()}</div>;
+    return (
+      <ThemeProvider>
+        <div className="guide">{this.renderContent()}</div>
+      </ThemeProvider>
+    );
   }
 
   onKeydown = e => {
@@ -121,8 +110,6 @@ export class AppView extends Component {
 AppView.propTypes = {
   children: PropTypes.any,
   currentRoute: PropTypes.object.isRequired,
-  theme: PropTypes.string.isRequired,
-  toggleTheme: PropTypes.func.isRequired,
   locale: PropTypes.string.isRequired,
   toggleLocale: PropTypes.func.isRequired,
   routes: PropTypes.object.isRequired,

src-docs/src/views/elastic_charts/category_chart.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { orderBy, round } from 'lodash';
 
-import { withTheme } from '../../components';
+import { ThemeContext } from '../../components';
 import { Chart, Settings, Axis } from '@elastic/charts';
 
 import {
@@ -28,7 +28,7 @@ import {
   ChartCard,
 } from './shared';
 
-class _CategoryChart extends Component {
+export class CategoryChart extends Component {
   constructor(props) {
     super(props);
 
@@ -74,7 +74,7 @@ class _CategoryChart extends Component {
   };
 
   render() {
-    const isDarkTheme = this.props.theme.includes('dark');
+    const isDarkTheme = this.context.theme.includes('dark');
     const theme = isDarkTheme
       ? EUI_CHARTS_THEME_DARK.theme
       : EUI_CHARTS_THEME_LIGHT.theme;
@@ -236,4 +236,4 @@ class _CategoryChart extends Component {
   }
 }
 
-export const CategoryChart = withTheme(_CategoryChart);
+CategoryChart.contextType = ThemeContext;