[CSS-in-JS] @emotion/react in src/ (#5121)

* emotion as peerDep; babel and typescript * jest config * isDefaultTheme util * CL TODO * update snapshots * [CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy (#5222) * [CSS-in-JS] Global style reset with `emotion` (#5122) * global reset with emotion * amsterdam overrides * text-size-adjust * ams reset * invert ::selection * Renamed `isDefaultTheme` utility to `isLegacyTheme` Default will mean something different when Amsterdam becomes default so I want to head this off now by checking for “Legacy” * Quick cleanup * Fixed up scrollbar function * Removed `useEuiFont` in favor of a single reset on the elements that need it * Added `body` key to global `font` for setting base body font settings at the global level * Some more fixes based on new diff * global reset with emotion * amsterdam overrides * text-size-adjust * ams reset * invert ::selection * Renamed `isDefaultTheme` utility to `isLegacyTheme` Default will mean something different when Amsterdam becomes default so I want to head this off now by checking for “Legacy” * Quick cleanup * Fixed up scrollbar function * Removed `useEuiFont` in favor of a single reset on the elements that need it * Added `body` key to global `font` for setting base body font settings at the global level * Some more fixes based on new diff * Pulling our reset from global styles * SVG `hacks` directly in reset file * Fixed reset import * euiprovider; reset styles * use euiprovider with emotion/cache in docs * Decision clean up * Fixing a few things for legacy dark mode based on not having a provider * Revert "Fixing a few things for legacy dark mode based on not having a provider" This reverts commit 127f12e. * Actually keeping `colorMode` even if `theme = null` * Fixing merge * Moved reset sass folder to `legacy` * fix wiki * euiprovider docs * fix provider docs * remove commented import Co-authored-by: cchaos <caroline.horn@elastic.co> * [CSS-in-JS] Add provider to generated codesandbox examples (#5253) * add provider to generated codesandbox examples * indentation * euithemeprovider -> euiprovider * legacy theme * fix snapshot tests * [CSS-in-JS] Provider for fullscreen examples; Context refactor (#5309) * refactor to extract context component * refactor for fewer updates on route changes * refactor AppView to function component * [CSS-in-JS] [Breaking] Better Getting Started page (#5299) * Moved all color Sass files to their respective theme folders - Duplicates variables, but makes it actually capable of customization - New files for code & vis colors that weren’t theme specific * Remove outdated theming wiki page * Cleanup (in MD files too) * fix heading level * update changelog page regex to fully remove the master section * manual merge * update release script changelog regex * Cleanup some docs * Hide LanguageSelector tour on Getting Started page * Some GS page cleanup * PR feedback * cl * Apply suggestions from code review Co-authored-by: Constance <constancecchen@users.noreply.github.com> * lint fix * make amsterdam default * provider updates * fix cypress styles * PR feedback: - Removed blank mixins file - Added `yarn add` block for dependencies - Added props table to bottom of Provider docs page * move keydown inside useeffect * Reusing correct Sass customization snippet under Customizing * fix cypress path * update export Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Constance <constancecchen@users.noreply.github.com>
elastic · Nov 30, 2021 · c88dd35 · c88dd35
1 parent 68b1a71
commit c88dd35
Show file tree

Hide file tree

Showing 196 changed files with 4,435 additions and 2,180 deletions.
diff --git a/.babelrc.js b/.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",

diff --git a/CHANGELOG.md b/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)
 
@@ -279,7 +289,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

diff --git a/README.md b/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)

diff --git a/cypress/plugins/webpack.config.js b/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',

diff --git a/package.json b/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",

diff --git a/scripts/compile-scss.js b/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

diff --git a/scripts/cypress.js b/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',
+});
diff --git a/scripts/jest/config.json b/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"
   ]
 }
diff --git a/scripts/release.js b/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;

diff --git a/src-docs/.babelrc.js b/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,