Add K6 overrides and more advanced theming system

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';