[CSS-in-JS] @emotion/react in src/

.babelrc.js

@@ -13,6 +13,12 @@ module.exports = {
     }],
     ["@babel/typescript", { isTSX: true, allExtensions: true }],
     "@babel/react",
+    [
+      "@emotion/babel-preset-css-prop",
+      {
+        "labelFormat": "[filename]-[local]"
+      },
+    ],
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",

CHANGELOG.md

@@ -1,6 +1,16 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
-No public interface changes since `41.2.0`.
+### Feature: CSS-in-JS ([#5121](https://github.com/elastic/eui/pull/5121))
+
+- Added reset and global styles via CSS-in-JS with `@emotion/react/Global`
+- Added `EuiProvider`, a React context provider for theming and global styles
+- Added `isDefaultTheme` and `isLegacyTheme` utilities
+
+**Breaking changes**
+
+- Added `@emotion/react` to `peerDependencies`
+- Amsterdam is now the default theme, deprecated and renamed old theme as "legacy"
+- Re-organized Sass files including where the `globals` are imported from
 
 ## [`41.2.0`](https://github.com/elastic/eui/tree/v41.2.0)
 
@@ -234,7 +244,7 @@ No public interface changes since `41.2.0`.
 
 ## [`37.5.0`](https://github.com/elastic/eui/tree/v37.5.0)
 
-### Feature: Emotion ([#4511](https://github.com/elastic/eui/pull/4511))
+### Feature: CSS-in-JS ([#4511](https://github.com/elastic/eui/pull/4511))
 
 - Added `EuiThemeProvider`, a React context provider for theme values and color mode selection
 - Added `useEuiTheme` React hook, and `withEuiTheme` React HOC for consuming the EuiTheme

README.md

@@ -6,20 +6,7 @@
 
 Check out our [full documentation site][docs] which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. We also have a [FAQ][faq] that covers common usage questions. For other general questions regarding EUI, check out the [Discussions tab](https://github.com/elastic/eui/discussions).
 
-## Installation
-
-To install the Elastic UI Framework into an existing project, use the `yarn` CLI (`npm` is not supported).
-
-```
-yarn add @elastic/eui
-```
-
-Note that EUI has [several `peerDependencies` requirements](package.json) that will also need to be installed if starting with a blank project. You can read more about other ways to [consume EUI][consuming].
-
-```
-yarn add @elastic/eui @elastic/datemath moment prop-types
-```
-
+The rest of this doc will detail how to run and contribute to the **EUI documentation** site locally.
 
 ## Running Locally
 
@@ -31,22 +18,22 @@ You will probably want to install a node version manager. [nvm](https://github.c
 
 To install and use the correct node version with `nvm`:
 
-```
+```bash
 nvm install
 ```
 
 ### Documentation
 
 You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.
 
-```
+```bash
 yarn
 yarn start
 ```
 
 If another process is already listening on port 8030, the next free port will be used. Alternatively, you can specify a port:
 
-```
+```bash
 yarn start --port 9000
 ```
 
@@ -75,7 +62,6 @@ directly in the code. And unit test coverage for the UI components allows us to
   * [Creating components manually](wiki/creating-components-manually.md)
   * [Creating components with Yeoman](wiki/creating-components-yeoman.md)
 * [Creating icons](wiki/creating-icons.md)
-* [Theming](wiki/theming.md)
 * [Testing](wiki/testing.md)
   * [Accessibility Testing](wiki/automated-accessibility-testing.md)
 * [Documentation](wiki/documentation-guidelines.md)

cypress/support/index.js

@@ -14,4 +14,4 @@
 // ***********************************************************
 
 import '@cypress/code-coverage/support';
-import '../../dist/eui_theme_amsterdam_dark.css';
+import '../../dist/eui_theme_dark.css';

package.json

@@ -114,7 +114,9 @@
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.0.0",
+    "@emotion/cache": "^11.4.0",
     "@emotion/eslint-plugin": "^11.0.0",
+    "@emotion/jest": "^11.1.0",
     "@emotion/react": "^11.1.1",
     "@svgr/core": "5.5.0",
     "@svgr/plugin-svgo": "^4.0.3",
@@ -234,6 +236,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
+    "@emotion/react": "11.x",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "moment": "^2.13.0",

scripts/compile-scss.js

@@ -41,7 +41,7 @@ async function compileScssFiles({
 
   const inputFilenames = (await glob(sourcePattern, undefined)).filter(filename => {
     if (targetTheme == null) return true;
-    return filename === `src/theme_${targetTheme}.scss`;
+    return filename === `src/themes/amsterdam/theme_${targetTheme}.scss`;
   });
 
   await Promise.all(
@@ -147,7 +147,14 @@ if (require.main === module) {
   }
 
   compileScssFiles({
-    sourcePattern: path.join('src', 'theme_*.scss'),
+    sourcePattern: path.join('src/themes/legacy', 'legacy_*.scss'), 
+    destinationDirectory: 'dist',
+    docsVariablesDirectory: 'src-docs/src/views/theme/_json',
+    packageName: euiPackageName
+  });
+
+  compileScssFiles({
+    sourcePattern: path.join('src/themes/amsterdam', 'theme_*.scss'), 
     destinationDirectory: 'dist',
     docsVariablesDirectory: 'src-docs/src/views/theme/_json',
     packageName: euiPackageName

scripts/cypress.js

@@ -24,7 +24,7 @@ const log = chalk.grey;
 if (!skipScss) {
   console.log(info('Compiling SCSS'));
   execSync(
-    `TARGET_THEME=amsterdam_dark yarn compile-scss`,
+    `TARGET_THEME=dark yarn compile-scss`,
     {
       stdio: 'inherit'
     }

scripts/jest/config.json

@@ -46,6 +46,7 @@
     "^.+\\.(js|tsx?)$": "babel-jest"
   },
   "snapshotSerializers": [
-    "<rootDir>/node_modules/enzyme-to-json/serializer"
+    "<rootDir>/node_modules/enzyme-to-json/serializer",
+    "@emotion/jest/enzyme-serializer"
   ]
 }

scripts/release.js

@@ -155,13 +155,13 @@ async function getVersionTypeFromChangelog() {
   //
   // "##.+?[\r\n]+" consume the first heading & linebreak(s), which describes the main branch
   // "(.+?)" capture (non-greedy) all changes until the rest of the regex matches
-  // "[\r\n]+##" any linebreak(s) leading up to the next ## heading
+  // "[\r\n]+##(?= \[`\d)" any linebreak(s) leading up to the next ## heading with a numbered release, e.g. [`1.0.0`]
   //
   // regex flags "su" enable dotAll (s) and unicode-character matching (u)
   //
   // effectively capturing pending changes in the capture group
   // which is stored as the second item in the returned array from `changelog.match()`
-  const [, unreleasedchanges] = changelog.match(/##.+?[\r\n]+(.+?)[\r\n]+##/su);
+  const [, unreleasedchanges] = changelog.match(/##.+?[\r\n]+(.+?)[\r\n]+##(?= \[`\d)/su);
 
   // these changes contain bug fixes if the string "**bug fixes**" exists
   const hasBugFixes = unreleasedchanges.toLowerCase().indexOf('**bug fixes**') !== -1;

src-docs/.babelrc.js

@@ -2,12 +2,6 @@ const baseConfig = require('../.babelrc.js');
 const index = baseConfig.plugins.indexOf(
   './scripts/babel/proptypes-from-ts-props'
 );
-baseConfig.presets.push([
-  '@emotion/babel-preset-css-prop',
-  {
-    labelFormat: '[local]',
-  },
-]);
 baseConfig.plugins.splice(
   index + 1,
   0,

src-docs/src/components/codesandbox/link.js

@@ -5,6 +5,9 @@ import {
   hasDisplayToggles,
   listExtraDeps,
 } from '../../services';
+import { LEGACY_NAME_KEY } from '../../../../src/themes';
+
+import { ThemeContext } from '../with_theme';
 
 const pkg = require('../../../../package.json');
 
@@ -26,7 +29,6 @@ const getVersion = (packageName) => {
  * 5. Through regex we read the dependencies of both `content` and `display_toggles` and pass that to CS.
  * 6. We pass the files and dependencies as params to CS through a POST call.
  * */
-import { ThemeContext } from '../with_theme';
 
 const displayTogglesRawCode = require('!!raw-loader!../../views/form_controls/display_toggles')
   .default;
@@ -49,11 +51,11 @@ export const CodeSandboxLinkComponent = ({
 }) => {
   let cssFile;
   switch (context.theme) {
-    case 'amsterdam-light':
-      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_light.css';
+    case `${LEGACY_NAME_KEY}_light`:
+      cssFile = '@elastic/eui/dist/eui_legacy_light.css';
       break;
-    case 'amsterdam-dark':
-      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_dark.css';
+    case `${LEGACY_NAME_KEY}_dark`:
+      cssFile = '@elastic/eui/dist/eui_legacy_dark.css';
       break;
     case 'dark':
       cssFile = '@elastic/eui/dist/eui_theme_dark.css';
@@ -63,6 +65,33 @@ export const CodeSandboxLinkComponent = ({
       break;
   }
 
+  const isLegacyTheme = context.theme.includes(LEGACY_NAME_KEY);
+
+  const providerPropsObject = {};
+  // Only add configuration if it isn't the default
+  if (context.theme.includes('dark')) {
+    providerPropsObject.colorMode = 'dark';
+  }
+  // Can't spread an object inside of a string literal
+  const providerProps = Object.keys(providerPropsObject)
+    .map((prop) => {
+      const value = providerPropsObject[prop];
+      return value !== null ? `${prop}="${value}"` : `${prop}={${value}}`;
+    })
+    .join(' ');
+
+  // Renders the new Demo component generically into the code sandbox page
+  const exampleClose = `ReactDOM.render(
+  ${
+    isLegacyTheme
+      ? '<Demo />'
+      : `<EuiProvider ${providerProps}>
+    <Demo />
+  </EuiProvider>`
+  },
+  document.getElementById('root')
+);`;
+
   let indexContent;
 
   if (!content) {
@@ -72,28 +101,48 @@ import '${cssFile}';
 import React from 'react';
 
 import {
-  EuiButton,
+  ${
+    isLegacyTheme
+      ? 'EuiButton,'
+      : `EuiButton,
+  EuiProvider,`
+  }
 } from '@elastic/eui';
 
 const Demo = () => (<EuiButton>Hello world!</EuiButton>);
 
-ReactDOM.render(
-  <Demo />,
-  document.getElementById('root')
-);
+${exampleClose}
 `;
   } else {
     /** This cleans the Demo JS example for Code Sanbox.
     - Replaces relative imports with pure @elastic/eui ones
+    - Adds provider import, if necessary
     - Changes the JS example from a default export to a component const named Demo
     **/
-    const exampleCleaned = cleanEuiImports(content)
+    let exampleCleaned = cleanEuiImports(content)
       .replace('export default', 'const Demo =')
       .replace(
         /(from )'(..\/)+display_toggles(\/?';)/,
         "from './display_toggles';"
       );
 
+    if (!isLegacyTheme && !exampleCleaned.includes('EuiProvider')) {
+      if (exampleCleaned.includes(" } from '@elastic/eui';")) {
+        // Single line import statement
+        exampleCleaned = exampleCleaned.replace(
+          " } from '@elastic/eui';",
+          ", EuiProvider } from '@elastic/eui';"
+        );
+      } else {
+        // Multi line import statement
+        exampleCleaned = exampleCleaned.replace(
+          "} from '@elastic/eui';",
+          `  EuiProvider,
+} from '@elastic/eui';`
+        );
+      }
+    }
+
     // If the code example still has local doc imports after the above cleaning it's
     // too complicated for code sandbox so we don't provide a link
     const hasLocalImports = /(from )'((.|..)\/).*?';/.test(exampleCleaned);
@@ -102,11 +151,6 @@ ReactDOM.render(
       return null;
     }
 
-    // Renders the new Demo component generically into the code sandbox page
-    const exampleClose = `ReactDOM.render(
-    <Demo />,
-    document.getElementById('root')
-  );`;
     // The Code Sanbbox demo needs to import CSS at the top of the document. CS has trouble
     // with our dynamic imports so we need to warn the user for now
     const exampleStart = `import ReactDOM from 'react-dom';
@@ -116,7 +160,7 @@ import '${cssFile}';`;
     const cleanedContent = `${exampleStart}
 ${exampleCleaned}
 ${exampleClose}
-      `;
+`;
     indexContent = cleanedContent.replace(
       /(from )'.+display_toggles';/,
       "from './display_toggles';"

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

@@ -1,3 +1,5 @@
 export { GuidePage } from './guide_page';
 
 export { GuidePageChrome } from './guide_page_chrome';
+
+export { GuidePageHeader } from './guide_page_header';

src-docs/src/components/guide_theme_selector/guide_figma_link.tsx

@@ -28,13 +28,13 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
 }) => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
 
-  const isAmsterdam = context.theme.includes('amsterdam');
+  const isLegacy = context.theme.includes('legacy');
 
-  let href = 'https://www.figma.com/community/file/809845546262698150';
+  let href = 'https://www.figma.com/community/file/964536385682658129';
   const label = 'EUI Figma Design Library';
 
-  if (isAmsterdam) {
-    href = 'https://www.figma.com/community/file/964536385682658129';
+  if (isLegacy) {
+    href = 'https://www.figma.com/community/file/809845546262698150';
   }
 
   return isMobileSize ? (

src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx

@@ -31,9 +31,9 @@ const GuideSketchLinkComponent: React.FunctionComponent<GuideSketchLinkProps> =
     'https://github.com/elastic/eui/releases/download/v8.0.0/eui_sketch_8.0.0.zip';
   const label = 'EUI Sketch Library (download)';
 
-  const isAmsterdam = context.theme.includes('amsterdam');
+  const isLegacy = context.theme.includes('legacy');
 
-  if (isAmsterdam) return <></>;
+  if (!isLegacy) return <></>;
 
   return isMobileSize ? (
     <EuiButtonEmpty size="s" flush="both" iconType="logoSketch" href={href}>