Add K6 overrides and more advanced theming system (#191)

Adds a more structured theming system to EUI. Docs are available in the wiki. As part of this we added new themes for K6 so that we could use EUI within Kibana.

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Icon size prop now accepts `s`. Adjusted coloring of sidenav arrows ([#178](https://github.com/elastic/eui/pull/197))
 - Add `<EuiErrorBoundary>` ([#198](https://github.com/elastic/eui/pull/198))
 - Export `test` module, which includes `findTestSubject`, `startThrowingReactWarnings`, `stopThrowingReactWarnings`, `requiredProps`, and `takeMountedSnapshot` helpers ([#198](https://github.com/elastic/eui/pull/198))
+- Added a more systematic way to add themes; includes a new K6 theme for Kibana. [(#191)](https://github.com/elastic/eui/pull/191)
 
 **Bug fixes**
 

src-docs/src/actions/theme_actions.js

@@ -1,5 +1,8 @@
 import ActionTypes from './action_types';
 
-export const toggleTheme = () => ({
+export const toggleTheme = theme => ({
   type: ActionTypes.TOGGLE_THEME,
+  data: {
+    theme,
+  },
 });

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

@@ -7,7 +7,6 @@ import {
 } from 'react-router';
 
 import {
-  EuiButtonEmpty,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,6 +15,10 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
 export class GuidePageChrome extends Component {
   constructor(props) {
     super(props);
@@ -66,16 +69,10 @@ export class GuidePageChrome extends Component {
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={this.props.onToggleTheme}
-            className="euiLink"
-            iconSide="right"
-            color="text"
-            iconType="invert"
-          >
-              Flip theme
-          </EuiButtonEmpty>
+          <GuideThemeSelector
+            onToggleTheme={this.props.onToggleTheme}
+            selectedTheme={this.props.selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -203,6 +200,9 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRouteName: PropTypes.string.isRequired,
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+  guidelines: PropTypes.array.isRequired,
   components: PropTypes.array.isRequired,
   sandboxes: PropTypes.array.isRequired,
 };

src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js

@@ -5,20 +5,25 @@ import {
   Link,
 } from 'react-router';
 
-import {
-  GuideSandboxChromeToggle,
-} from './guide_sandbox_chrome_toggle';
-
 import {
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
+import {
+  GuideSandboxChromeToggle,
+} from './guide_sandbox_chrome_toggle';
+
 export const GuideSandboxChrome = ({
   isVisible,
   onToggleTheme,
   onToggleSandboxChrome,
+  selectedTheme,
 }) => {
   const toggle = <GuideSandboxChromeToggle onClick={onToggleSandboxChrome} />;
 
@@ -36,12 +41,10 @@ export const GuideSandboxChrome = ({
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <button
-            onClick={onToggleTheme}
-            className="guideSandboxChrome__link"
-          >
-            Theme
-          </button>
+          <GuideThemeSelector
+            onToggleTheme={onToggleTheme}
+            selectedTheme={selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -54,5 +57,6 @@ GuideSandboxChrome.propTypes = {
   routes: PropTypes.array.isRequired,
   onToggleTheme: PropTypes.func.isRequired,
   onToggleSandboxChrome: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
   isVisible: PropTypes.bool,
 };

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

@@ -76,6 +76,7 @@ export class GuideSection extends Component {
           routes={Routes.getAppRoutes()}
           onToggleTheme={this.props.toggleTheme}
           onToggleSandboxChrome={this.onToggleSandboxChrome}
+          selectedTheme={this.props.theme}
           isVisible={this.state.sandbox.isChromeVisible}
         />
       );
@@ -159,4 +160,5 @@ GuideSection.propTypes = {
   children: PropTypes.any,
   isSandbox: PropTypes.bool,
   toggleTheme: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequired,
 };

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

@@ -4,6 +4,7 @@ import { GuideSection } from './guide_section';
 
 import {
   getIsSandbox,
+  getTheme,
 } from '../../store';
 
 import {
@@ -13,6 +14,7 @@ import {
 function mapStateToProps(state) {
   return {
     isSandbox: getIsSandbox(state),
+    theme: getTheme(state),
   };
 }
 

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

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+} from '../../../../src/components';
+
+export class GuideThemeSelector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isThemePopoverOpen: false,
+    };
+  }
+
+  onThemeButtonClick = () => {
+    this.setState({
+      isThemePopoverOpen: !this.state.isThemePopoverOpen,
+    });
+  };
+
+  closeThemePopover = () => {
+    this.setState({
+      isThemePopoverOpen: false,
+    });
+  };
+
+  render() {
+    const themeButton = (
+      <EuiButtonEmpty
+        size="s"
+        color="text"
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onThemeButtonClick}
+      >
+        Theme
+      </EuiButtonEmpty>
+    );
+
+    const themeOptions = [{
+      name: 'Light',
+      value: 'light',
+    }, {
+      name: 'Dark',
+      value: 'dark',
+    }, {
+      name: 'K6',
+      value: 'k6',
+    }, {
+      name: 'K6 dark',
+      value: 'k6_dark',
+    }].map(option => {
+      const { name, value } = option;
+
+      return (
+        <EuiContextMenuItem
+          key={value}
+          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
+          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
+        >
+          {`${name}`}
+        </EuiContextMenuItem>
+      );
+    });
+
+    return (
+      <EuiPopover
+        id="pageChromeThemePopover"
+        button={themeButton}
+        isOpen={this.state.isThemePopoverOpen}
+        closePopover={this.closeThemePopover}
+        panelPaddingSize="none"
+        withTitle
+        anchorPosition="downRight"
+      >
+        <EuiContextMenuPanel
+          style={{ width: '120px' }}
+          items={themeOptions}
+        />
+      </EuiPopover>
+    );
+  }
+}
+
+GuideThemeSelector.propTypes = {
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1 @@
+export { GuideThemeSelector } from './guide_theme_selector';

src-docs/src/index.js

@@ -20,6 +20,8 @@ import {
 
 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
@@ -29,6 +31,14 @@ registerTheme('dark', [
   themeDark
 ]);
 
+registerTheme('k6', [
+  themeK6Light
+]);
+
+registerTheme('k6_dark', [
+  themeK6Dark
+]);
+
 // Set up app
 
 const store = configureStore();

src-docs/src/store/reducers/theme_reducer.js

@@ -8,7 +8,7 @@ export default function sectionsReducer(state = defaultState, action) {
   switch (action.type) {
     case ActionTypes.TOGGLE_THEME: {
       return {
-        theme: (state.theme === 'light') ? 'dark' : 'light',
+        theme: action.data.theme,
       };
     }
 

src-docs/src/theme_k6_dark.scss

@@ -0,0 +1,2 @@
+@import "../../src/theme_k6_dark";
+@import "./components/guide_components";

src-docs/src/theme_k6_light.scss

@@ -0,0 +1,2 @@
+@import "../../src/theme_k6_light";
+@import "./components/guide_components";

src-docs/src/views/app_view.js

@@ -58,10 +58,18 @@ export class AppView extends Component {
   }
 
   renderContent() {
-    if (this.props.isSandbox) {
+    const {
+      children,
+      currentRoute,
+      isSandbox,
+      toggleTheme,
+      theme,
+    } = this.props;
+
+    if (isSandbox) {
       return (
         <div className="guideSandbox">
-          {this.props.children}
+          {children}
         </div>
       );
     } else {
@@ -71,19 +79,18 @@ export class AppView extends Component {
             <EuiErrorBoundary>
               <EuiPageSideBar>
                 <GuidePageChrome
-                  currentRouteName={this.props.currentRoute.name}
-                  onToggleTheme={this.props.toggleTheme}
-                  routes={this.props.routes}
+                  currentRouteName={currentRoute.name}
+                  onToggleTheme={toggleTheme}
+                  selectedTheme={theme}
                   guidelines={Routes.guidelines}
                   components={Routes.components}
                   sandboxes={Routes.sandboxes}
                 />
               </EuiPageSideBar>
             </EuiErrorBoundary>
-
             <EuiPageContent>
               <EuiPageContentBody>
-                {this.props.children}
+                {children}
               </EuiPageContentBody>
             </EuiPageContent>
           </EuiPageBody>
@@ -104,14 +111,11 @@ export class AppView extends Component {
 AppView.propTypes = {
   children: PropTypes.any,
   currentRoute: PropTypes.object.isRequired,
-  sections: PropTypes.array,
   isSandbox: PropTypes.bool,
-  toggleTheme: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
-  sections: PropTypes.array.isRequired,
+  toggleTheme: PropTypes.func.isRequired,
 };
 
 AppView.defaultProps = {
   currentRoute: {},
-  sections: [],
 };

src/global_styling/core.scss → src/global_styling/index.scss

@@ -1,3 +1,4 @@
 // Core
+@import 'variables/index';
 @import 'mixins/index';
 @import 'reset/index';

src/global_styling/mixins/_index.scss

@@ -2,4 +2,5 @@
 @import 'responsive';
 @import 'shadow';
 @import 'size';
+@import 'typography';
 @import 'helpers';