[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.4.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.4.0`](https://github.com/elastic/eui/tree/v41.4.0)
 
@@ -278,7 +288,7 @@ No public interface changes since `41.4.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/plugins/webpack.config.js

@@ -11,7 +11,7 @@
 const path = require('path');
 const webpack = require('webpack');
 
-const THEME_IMPORT = `'../../dist/eui_theme_amsterdam_${process.env.THEME}.css'`;
+const THEME_IMPORT = `'../../dist/eui_theme_${process.env.THEME}.css'`;
 
 module.exports = {
   mode: 'development',

package.json

@@ -113,7 +113,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

@@ -1,19 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
 const { execSync } = require('child_process');
 const chalk = require('chalk');
-const yargs = require('yargs/yargs')
-const { hideBin } = require('yargs/helpers')
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
 
 const argv = yargs(hideBin(process.argv))
   .parserConfiguration({
-    "camel-case-expansion": false, // don't convert dash-separated options into camel case (e.g. dashSeparated)
-    "unknown-options-as-args": true, // collect any extra options to pass on to cypress
+    'camel-case-expansion': false, // don't convert dash-separated options into camel case (e.g. dashSeparated)
+    'unknown-options-as-args': true, // collect any extra options to pass on to cypress
   })
   .options({
     'skip-css': { type: 'boolean' },
-    'dev': { type: 'boolean' },
-    'theme': { type: 'string', default: 'light', choices: ['light', 'dark'] },
-  })
-  .argv
+    dev: { type: 'boolean' },
+    theme: { type: 'string', default: 'light', choices: ['light', 'dark'] },
+  }).argv;
 
 const isDev = argv.hasOwnProperty('dev');
 const skipScss = argv.hasOwnProperty('skip-css');
@@ -25,12 +32,9 @@ const log = chalk.grey;
 // compile scss -> css so tests can render correctly
 if (!skipScss) {
   console.log(info('Compiling SCSS'));
-  execSync(
-    `TARGET_THEME=amsterdam_${theme} yarn compile-scss`,
-    {
-      stdio: 'inherit'
-    }
-  );
+  execSync(`TARGET_THEME=${theme} yarn compile-scss`, {
+    stdio: 'inherit',
+  });
 } else {
   console.log(info('Not compiling SCSS, disabled by --skip-css'));
 }
@@ -41,15 +45,12 @@ const cypressCommandParts = [
   'BABEL_MODULES=false', // let webpack receive ES Module code
   'NODE_ENV=cypress_test', // enable code coverage checks
   `cypress ${isDev ? 'open-ct' : 'run-ct'}`,
-  ...argv._ // pass any extra options given to this script
+  ...argv._, // pass any extra options given to this script
 ];
 const cypressCommand = cypressCommandParts.join(' ');
 
 console.log(info(`${isDev ? 'Opening' : 'Running'} cypress`));
-console.log(log(cypressCommand))
-execSync(
-  cypressCommand,
-  {
-    stdio: 'inherit'
-  }
-);
+console.log(log(cypressCommand));
+execSync(cypressCommand, {
+  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,