[WIP] Emotion & Propagate

.babelrc.js

@@ -18,7 +18,14 @@ module.exports = {
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
     }],
     ["@babel/typescript", { isTSX: true, allExtensions: true }],
-    "@babel/react"
+    "@babel/react",
+    [
+      "@emotion/babel-preset-css-prop",
+      {
+        "autoLabel": false,
+        "labelFormat": "[local]"
+      },
+    ],
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",

package.json

@@ -55,6 +55,7 @@
     "@types/react-window": "^1.8.1",
     "chroma-js": "^2.0.4",
     "classnames": "^2.2.5",
+    "emotion-theming": "^10.0.27",
     "highlight.js": "^9.12.0",
     "html": "^1.0.0",
     "html-format": "^1.0.1",
@@ -89,6 +90,8 @@
     "@elastic/charts": "^19.6.3",
     "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
+    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@emotion/core": "^10.0.28",
     "@svgr/core": "5.0.1",
     "@svgr/plugin-svgo": "^4.0.3",
     "@types/classnames": "^2.2.6",
@@ -213,6 +216,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
+    "@emotion/core": "10.x",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "moment": "^2.13.0",

scripts/babel/proptypes-from-ts-props/index.js

@@ -1,3 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
 /* eslint-disable new-cap */
 
 const fs = require('fs');
@@ -503,7 +523,7 @@ function getPropTypesForNode(node, optional, state) {
     // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together
     case 'TSIntersectionType':
       const usableNodes = [...node.types].filter(node => {
-        let nodePropTypes = getPropTypesForNode(node, true, state);
+        const nodePropTypes = getPropTypesForNode(node, true, state);
 
         if (
           types.isMemberExpression(nodePropTypes) &&
@@ -753,11 +773,14 @@ function getPropTypesForNode(node, optional, state) {
         ),
         [
           types.arrayExpression(
-            node.properties.map(property =>
-              types.stringLiteral(
-                property.key.name || property.key.name || property.key.value
-              )
-            )
+            node.properties.map(property => {
+              if (property.key) {
+                return types.stringLiteral(
+                  property.key.name || property.key.value
+                )
+              }
+              return null;
+            })
           ),
         ]
       );

src-docs/src/components/guide_rule/_index.scss

@@ -1,4 +1,4 @@
-@import 'guide_rule';
-@import 'guide_rule_title';
-@import 'guide_rule_example';
-@import 'guide_rule_description';
+// @import 'guide_rule';
+// @import 'guide_rule_title';
+// @import 'guide_rule_example';
+// @import 'guide_rule_description';

src-docs/src/components/guide_rule/guide_rule.js

@@ -1,25 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { css } from '@emotion/core';
+import usePropagate from '../../../../src/services/propagate/use_propagate';
 import { EuiFlexGroup } from '../../../../src/components';
 
 import { GuideRuleDescription } from './guide_rule_description';
+import { componentClassName as guideRuleTitleClass } from './guide_rule_title';
 
-export const GuideRule = ({
-  children,
-  className,
-  heading,
-  description,
-  ...rest
-}) => {
-  const classes = classNames(
-    'guideRule',
-    {
-      'guideRule--hasHeading': heading,
-      'guideRule--hasDescription': description,
-    },
-    className
-  );
+export const GuideRule = ({ children, heading, description, ...rest }) => {
+  const [sizes] = usePropagate(['sizes']);
+
+  let siblingMarginTop = sizes.euiSizeL;
+  if (description) {
+    siblingMarginTop = sizes.euiSizeXXL * 1.5;
+  }
+  if (heading) {
+    siblingMarginTop = sizes.euiSizeXXL * 2;
+  }
+  const guideRule = css`
+    margin-top: ${sizes.euiSizeXXL}px;
+
+    & + & {
+      margin-top: ${siblingMarginTop}px;
+    }
+
+    // Not sure this pattern is great
+    .${guideRuleTitleClass} + & {
+      ${!heading && 'margin-top: 0'};
+    }
+  `;
 
   let descriptionNode;
 
@@ -30,10 +39,10 @@ export const GuideRule = ({
   }
 
   return (
-    <div className={classes} {...rest}>
+    <div css={guideRule} {...rest}>
       {descriptionNode}
 
-      <EuiFlexGroup className="guideRule__exampleRow" gutterSize="xl" wrap>
+      <EuiFlexGroup gutterSize="xl" wrap>
         {children}
       </EuiFlexGroup>
     </div>

src-docs/src/components/guide_rule/guide_rule_description.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { css } from '@emotion/core';
+import usePropagate from '../../../../src/services/propagate/use_propagate';
 import { EuiText } from '../../../../src/components';
 
 export const GuideRuleDescription = ({
   children,
-  className,
   heading,
   description,
   ...rest
 }) => {
-  const classes = classNames('guideRule__description', className);
+  const [sizes] = usePropagate(['sizes']);
+
+  const guideRule_Description = css`
+    margin-bottom: ${sizes.euiSizeXL}px;
+  `;
 
   let headingNode;
 
@@ -19,7 +23,7 @@ export const GuideRuleDescription = ({
   }
 
   return (
-    <div className={classes} {...rest}>
+    <div css={guideRule_Description} {...rest}>
       <EuiText grow={false}>
         {headingNode}
         <p>{description}</p>

src-docs/src/components/guide_rule/guide_rule_example.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { css } from '@emotion/core';
+import usePropagate from '../../../../src/services/propagate/use_propagate';
 import { EuiFlexItem, EuiPanel } from '../../../../src/components';
 
-const typeToClassNameMap = {
-  do: 'guideRule__example--do',
-  dont: 'guideRule__example--dont',
-};
-
 const typeToSubtitleTextMap = {
   do: 'Do',
   dont: "Don't",
 };
 
 export const GuideRuleExample = ({
   children,
-  className,
   type,
   text,
   panel,
@@ -25,14 +20,49 @@ export const GuideRuleExample = ({
   panelStyles,
   ...rest
 }) => {
-  const classes = classNames(
-    'guideRule__example',
-    typeToClassNameMap[type],
-    {
-      'guideRule__example--frame': frame,
-    },
-    className
-  );
+  const [colors, sizes, typography] = usePropagate([
+    'colors',
+    'sizes',
+    'typography',
+  ]);
+
+  const guideRuleExample = css`
+    pre {
+      margin-bottom: 0;
+      padding: 0;
+    }
+  `;
+
+  const guideRuleExamplePanel = css`
+    border-bottom: 2px solid;
+    margin-bottom: ${sizes.euiSizeS}px;
+    flex-grow: 1; /* 1 */
+
+    ${!panel && `padding-bottom: ${sizes.euiSize}px;`}
+
+    ${type === 'do' && `border-bottom-color: ${colors.euiColorSuccess};`}
+
+    ${type === 'dont' && `border-bottom-color: ${colors.euiColorDanger};`}
+
+    ${frame &&
+      `padding: ${sizes.euiSizeL}px;
+      background-color: ${colors.euiColorLightestShade};
+      display: flex;
+      align-items: center;
+      justify-content: space-around;`}
+  `;
+
+  const guideRuleExampleCaption = css`
+    @include euiFontSizeS; // TODO: not yet part of emotion theme
+    font-size: ${typography.euiFontSizeS}px; // TODO: not yet part of emotion theme
+    line-height: ${typography.euiLineHeight}; // TODO: not yet part of emotion theme
+    max-height: ${typography.euiFontSizeS * typography.euiLineHeight}px; /* 1 */
+    overflow-y: visible; /* 1 */
+
+    ${type === 'do' && `color: ${colors.euiColorSuccessText};`}
+
+    ${type === 'dont' && `color: ${colors.euiColorDanger};`}
+  `;
 
   const ChildrenComponent = panel ? EuiPanel : 'div';
 
@@ -41,15 +71,13 @@ export const GuideRuleExample = ({
   return (
     <EuiFlexItem
       component="figure"
-      className={classes}
+      css={guideRuleExample}
       style={styles}
       {...rest}>
-      <ChildrenComponent
-        className="guideRule__example__panel"
-        style={panelStyles}>
+      <ChildrenComponent css={guideRuleExamplePanel} style={panelStyles}>
         {children}
       </ChildrenComponent>
-      <figcaption className="guideRule__caption">
+      <figcaption css={guideRuleExampleCaption}>
         {text || typeToSubtitleTextMap[type]}
       </figcaption>
     </EuiFlexItem>

src-docs/src/components/guide_rule/guide_rule_title.js

@@ -1,13 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { css } from '@emotion/core';
+import usePropagate from '../../../../src/services/propagate/use_propagate';
 import { EuiTitle } from '../../../../src/components';
 
+export const componentClassName = 'euiGuideRuleTitle';
+
 export const GuideRuleTitle = ({ children, className, ...rest }) => {
-  const classes = classNames('guideRule__title', className);
+  const [sizes, borders] = usePropagate(['sizes', 'borders']);
+
+  const classes = classNames(componentClassName, className);
+
+  const guideRuleTitle = css`
+    margin-top: ${sizes.euiSizeXXL}px;
+    border-top: 1px solid ${borders.euiBorderColor};
+    padding-top: ${sizes.euiSizeXXL}px;
+    margin-bottom: ${sizes.euiSizeS}px;
+  `;
 
   return (
-    <EuiTitle className={classes} {...rest}>
+    <EuiTitle css={guideRuleTitle} className={classes} {...rest}>
       <h2>{children}</h2>
     </EuiTitle>
   );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ThemeContext } from '../with_theme';
-import { EuiSelect, EuiFormRow } from '../../../../src/components';
+import { EuiButton, EuiSelect, EuiFormRow } from '../../../../src/components';
 import { EUI_THEMES } from '../../../../src/themes';
 
 export const GuideThemeSelector = () => {
@@ -14,15 +14,27 @@ export const GuideThemeSelector = () => {
 
 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>
+    <>
+      <EuiFormRow label="Theme">
+        <EuiSelect
+          options={EUI_THEMES}
+          value={context.theme}
+          onChange={e => {
+            context.changeTheme(e.target.value);
+          }}
+          aria-label="Switch the theme"
+        />
+      </EuiFormRow>
+      <EuiFormRow label="euiColorLightShade">
+        <EuiButton size="s" onClick={context.randomizeLightShade}>
+          Randomize
+        </EuiButton>
+      </EuiFormRow>
+      <EuiFormRow label="euiColorHighlight">
+        <EuiButton size="s" onClick={context.randomizeHighlight}>
+          Randomize
+        </EuiButton>
+      </EuiFormRow>
+    </>
   );
 };